Grazie alle app di editing di immagini mobili come Instagram, la moda del finto tilt shift sembra essere all'altezza. Ma perché dovremmo lasciare che gli iPhone si divertano? Scacciamo un effetto tilt shift usando puro CSS.
In questo tutorial, impareremo tutto sui nuovi filtri CSS in Webkit e su come implementare una maschera immagine in CSS. Useremo quindi queste tecniche per il nostro effetto di inclinazione finale. Stiamo andando a colpire tutti i tipi di cose pazze, quindi continuate a leggere e ci divertiremo un po '.
Sbirciata
Vuoi vedere cosa stiamo costruendo? Salta avanti e guarda la demo, poi torna indietro e scopri come farlo da solo.
demo: Clicca qui per il lancio.
Scopri i filtri Webkit
Negli ultimi anni, i CSS hanno preso sempre più lentamente in considerazione le aree che abbiamo utilizzato per Photoshop per: gradienti, angoli arrotondati, ombre, ecc. Di recente, Webkit ha fatto un grande balzo in avanti in quest'area con l'introduzione dei CSS filtri di immagine.
E se potessi alterare la saturazione, il contrasto o persino la sfocatura di un'immagine usando puro CSS? Le possibilità sarebbero fantastiche. Preparati, perché puoi fare esattamente questo con una linea di codice veloce.
Immagine iniziale
Avremo bisogno di un'immagine per mostrare tutte le tecniche con cui giocheremo, così ho afferrato l'inquadratura aerea di New York qui sotto dal fotografo Nathan Siemers.
Luminosità
La luminosità può accettare una percentuale (10%) o un decimale (0,1). Lo zero è uguale alla luminosità normale, quindi il 5% aumenta la luminosità e il -5% effettivamente oscura l'immagine.
blur
Il filtro sfocatura accetta un valore di pixel simile alla sfocatura su un'ombra di riquadro. Più alto è il valore del pixel, più pesante è la sfocatura.
Contrasto
Contrast accetta un valore basato sulla percentuale. 100% è normale, qualsiasi valore superiore a quello aggiunge contrasto, qualsiasi valore inferiore riduce il contrasto.
Scala di grigi
La scala di grigi ti consente di desaturare gradualmente un'immagine con percentuali. 0% è a colori, 100% è scala di grigi. L'esempio seguente mostra la nostra immagine al 50%.
Tonalità Ruota
La rotazione della tonalità consente di spostare la tonalità attraverso la metafora di una ruota dei colori. Regoli la rotazione in gradi con zero che è il valore normale, non regolato.
Invertire
Fa esattamente come suona, accetta una percentuale da zero (predefinito) a 100%;
nero di seppia
Il bianco e nero non lo fa per te? Aggiungi un po 'di età con il filtro Seppia. La percentuale zero non contiene alcun effetto, il 100% è piena potenza.
Supporto del browser
Attualmente, non c'è molto supporto per i filtri CSS3. Secondo CanIUse, dovrebbero funzionare in Chrome, Safari 6, iOS Safari 6 e Blackberry Browser 10. Tutti questi richiedono il? -Webkit? prefisso, ma a prova di futuro, potresti voler aggiungere gli altri:
Passo 1: Tilt Shift HTML
Ora che sappiamo quali filtri CSS ci sono disponibili, possiamo iniziare a costruire la nostra demo di tilt shift. Per iniziare, disponi il seguente codice HTML nel tuo editor di codice preferito:
Guardalo in azione
Questo è tutto ciò che c'è da fare! Ora abbiamo un bel po 'di puro effetto CSS tilt shift. Dai un'occhiata alla versione live nella demo qui sotto.
demo: Clicca qui per il lancio.
tiltShift.js
Gli sviluppatori di talento Noel Tock e Adam Yanalunas hanno creato un plugin jQuery di facile utilizzo che consente di utilizzare i filtri CSS per creare un simile effetto tilt shift. Scarica tiltShift.js e fai un tentativo.
Conclusione: perché preoccuparsi?
Tutorial come questo sollevano sempre una grande domanda: dovremmo usare solo le proprietà di Webkit nei flussi di lavoro di sviluppo professionale? La risposta è sempre la stessa: no. Questo è un esperimento, un modo divertente per conoscere le possibilità per il futuro dei CSS. Un giorno, i filtri CSS potrebbero essere una caratteristica standard. Per ora, sono solo un'idea.
La cosa triste è che così tanti sviluppatori completamente cancellano cose come questa fino a quando non hanno raggiunto uno stato più ufficiale. Come membro della comunità di sviluppo web, dovresti provare nuove potenziali funzionalità per vedere come vengono implementate ed essere chiari sulla tua opinione. Anche se ti senti una voce non importante, ricorda che la tua opinione è importante e che fai parte di un insieme più ampio che può influire sul futuro del Web.
Su quella nota, cosa ne pensi dei filtri CSS? Lascia un commento qui sotto e fammi sapere. Personalmente ritengo che siano un'esplosione e potrebbero portare a molti progetti interessanti. Tuttavia, tutto ciò dovrebbe essere fatto davvero con i CSS? Dimmelo tu.