Philter.js - Libreria di modifica delle immagini gratuita con filtri CSS
Instagram è ampiamente noto come la rete fotografica più popolare. Gestisce oltre 52 milioni di foto al giorno e molte di esse includere i filtri che alterano le immagini al volo.
Questo è anche possibile usando i filtri CSS che applicare direttamente nel browser. Queste proprietà di filtro personalizzate hanno un ampio supporto su molti browser e sono perfette.
Con il Plugin di Philter JavaScript, puoi ridimensionare questo processo per risparmiare tempo e spostare il codice in HTML per effetti di filtro dinamici.
Usando questo plugin, ottieni molto più controllo sulle tue immagini. In questo modo puoi scegliere quali filtri applicare a singole immagini e se determinati filtri dovrebbero cambiare in base al comportamento dell'utente come il passaggio del mouse.
CSS supporta le transizioni animate e Philter rende questo processo davvero semplice. Devi scaricare Philter dalla homepage o dal repository GitHub. Una volta aggiunto alla tua pagina web, semplicemente aggiungi il codice di inizializzazione e lascia andare.
Ecco un sample snippet dal repository GitHub:
Di default, puoi imposta transizioni e attributi di dati extra che puoi aggiungere in HTML. Il url parametro definisce il percorso in cui Philter deve cercare i file SVG personalizzati utilizzati nel processo di filtro.
Questi filtri extra sono confezionato con la libreria, quindi non è necessario modificarli affatto. Ma potresti spostarli o posizionarli in una diversa struttura di directory dal tuo file corrente, quindi questa impostazione potrebbe essere necessario modificare.
Ora, puoi solo aggiungi filtri personalizzati diritto al tuo codice HTML
Ecco un semplice esempio:
Puoi trovare a elenco completo di tutti i filtri su GitHub, insieme a a guida alla configurazione completa e molti altri esempi di codice.
Philter è uno dei plug-in gratuiti più interessanti e spinge i limiti del moderno CSS. Puoi persino progetta i tuoi filtri se sei disposto a scavare nel codice base e ad armeggiare.
Per iniziare, basta visitare la homepage di Philter e scaricare una copia. Puoi averlo attivo e funzionante in pochissimo tempo.
