Recentemente ho discusso dei meriti e delle varie caratteristiche dei preprocessori CSS con un collega. Abbiamo trattato tutti i principi fondamentali: come è bello avere variabili e come i mixin possono farti risparmiare un'incredibile quantità di tempo per la codifica. Quando la conversazione si è spostata su alcune delle caratteristiche più oscure anche se le cose si sono fatte interessanti. Quando ho parlato delle varie operazioni sul colore, il mio collega ha proclamato coraggiosamente che non è un vero designer? potrebbe mai trovare una scusa legittima per utilizzare questa funzione e non scegliere manualmente i propri colori.
Nelle parole di Barney Stinson, "la sfida è accettata !? Oggi creeremo un fantastico effetto di testo 3D finto con puro CSS e quindi vediamo perché è molto più facile farlo con le operazioni di colore in Sass o LESS.
Costruiamo un po 'di testo 3D
Non c'è davvero un grande modo di applicare un effetto 3D usando CSS. Non c'è? Testo-estrusione? proprietà, anche se sarebbe davvero fantastico. Invece dobbiamo fingere. Uno dei modi più popolari per farlo è quello di creare un intero mucchio di ombre di testo (effetto mostrato da Mark Otto qui). Come per gli sfondi CSS, le ombre di testo possono essere sovrapposte ripetutamente per ottenere risultati davvero interessanti.
Mancia: IE odia i web designer, quindi non supporta nulla di interessante come le ombre di testo. Usa Modernizr per compensare.
La Fondazione
Iniziamo lentamente e costruiamo le fondamenta HTML e CSS di base necessarie per creare un oggetto di testo di grandi dimensioni con cui lavorare. Tutto ciò di cui abbiamo bisogno per l'HTML è un h2 con un testo e una singola classe applicata.
Ora per alcuni CSS. Per ora, è sufficiente selezionare l'h2 e applicare alcuni stili di base. Ho trasformato il testo in maiuscolo e ho utilizzato una scorciatoia per applicare un gruppo di proprietà dei font in una volta sola: peso / altezza carattere-famiglia.
Con questo, dovresti avere una semplice porzione di testo che è praticamente insignificante in ogni modo. Non temere, lo faremo a crepapelle alla grande con i prossimi passi!
Applicazione di un'ombra di testo
Per iniziare il processo di ializzazione 3D, scegli un colore che ti piace e applicalo alla classe threedee. Quindi applica una tonalità leggermente più scura del colore come un'ombra di testo. Ho indicato come la sintassi funziona con un commento. Si noti che sia l'offset orizzontale che la sfocatura sono impostati su zero. Vogliamo un'ombra difficile a sud del nostro testo.
Se hai bisogno di un buon modo veloce per trovare diverse sfumature di un determinato colore, controlla 0to255, un'utilità web gratuita molto utile che uso sempre.
Dopo questo passaggio, puoi vedere chiaramente gli effetti dell'ombra di testo. Come puoi vedere, un'ombra non la taglia. Ci stiamo avvicinando a un effetto 3D, ma al momento sembra davvero un'ombra. Abbiamo bisogno di colmare queste lacune.
Andando in 3D
Per colmare le lacune, tutto ciò che dobbiamo fare è aggiungere altre ombre di testo. In realtà non creerà una transizione senza soluzione di continuità, ma i tuoi occhi sono pigri e tenderanno a percepire le ombre separate come un'unica entità, a meno che tu non guardi davvero da vicino.
Per applicare più ombre, è sufficiente separarle ciascuna con una virgola. Assicurati che ciascuno sia leggermente più sfalsato rispetto all'ultima, in modo da ottenere un buon effetto di estrusione.
Dopo questo, dovresti avere un effetto 3D davvero carino che inizia a prendere forma. Le lettere sembrano davvero estruse!
Notare che tutte le mie ombre sono dello stesso colore. Ciò si traduce in un effetto 3D molto piatto e animato. Se è quello che stai andando, fantastico, ma vogliamo qualcosa con un po 'più realismo. Per ottenere ciò, possiamo rendere ogni ombra consecutiva un po 'più scura.
C'è un po 'di compromesso qui. È molto più facile vedere le singole ombre in questo modo, ma io tendo ad apprezzare meglio l'effetto di oscuramento rispetto all'aspetto piatto.
Ritocchi finali
Non siamo ancora al livello realistico. Il problema che vedo ora è che il testo tridimensionale non sta avendo ed ha effetti sul suo sfondo. Risolviamo questo problema con alcune ombre in più, questa volta con un po 'di sfocatura e trasparenza.
Con quello, siamo tutti finiti! Non è affatto così nitido come quello che potremmo ottenere con Photoshop e un'ora da uccidere, ma visto che è puro CSS, è piuttosto impressionante!
Il problema con questo metodo
Il problema principale che ho con questo metodo è che non è molto flessibile. Dal momento che stiamo utilizzando un totale di cinque diverse varianti di un colore, ciò significa che cambiare il colore del testo 3D è un vero dolore!
Ad esempio, supponiamo di voler cambiare il testo in blu. Non solo devo scegliere il mio blu primario, quindi devo applicare ciascuna delle ombre mentre scurisco gradualmente quello blu.
Certo, non è la cosa più difficile del mondo, ma dopo aver giocato con alcune varianti di colore a questo articolo posso sicuramente dire che è un compito che richiede tempo. Odio che tutto il mio lavoro non sia riutilizzabile.Vorrei poter semplicemente applicare l'effetto 3D, scegliere un singolo colore e fare in modo che il resto avvenga automaticamente.
Sass To The Rescue
Come avrete senza dubbio immaginato ora, questa è una situazione in cui le operazioni con il colore di Sass si dimostrerebbero estremamente utili. Sì, sono un vero designer. Sì, preferisco scegliere manualmente le combinazioni di colori. Tuttavia, questo processo non è scienza missilistica e sembra davvero che dovrebbe essere automatizzato. Finché riesco a scegliere il colore iniziale, non mi importa lasciare che Sass si prenda cura di tutto il resto.
Creazione del Mixin
Questo è il posto dove le cose diventeranno piuttosto fantasiose, quindi se non hai fatto i tuoi compiti su Sass, ti consiglio di dare un'occhiata al tutorial ufficiale.
Stiamo andando a racchiudere l'intero processo 3D in un piccolo mixin che può essere applicato con pochissimo sforzo. Per fare ciò, usiamo il? @Mixin? sintassi, quindi denominare il nostro mixin. Ecco la struttura del blocco di codice iniziale:
Passando nei parametri
Dal momento che vogliamo che questo sia qualcosa che possiamo iniziare al volo, dobbiamo essere in grado di passare un colore. Per fare ciò, creiamo una variabile e la posizioniamo tra parentesi. Nota che le variabili Sass iniziano con il simbolo del dollaro.
Impostazione del colore principale
Ora è il momento di mettere questo mixin al lavoro. Vogliamo che prenda il colore passato e lo applichi alla proprietà color. Questo avviene esattamente come nel normale CSS, ma usiamo la nostra variabile invece di digitare effettivamente un codice colore.
Oscuramento del colore
Prima di continuare a creare l'ombra, dobbiamo imparare come funziona una delle operazioni di colore di Sass. Come abbiamo visto sopra, la nostra ombra deve diventare sempre più scura con ogni implementazione. Sass può facilmente eliminarlo per noi con l'operazione di oscuramento.
Qui ho avviato l'operazione darken, passato nella variabile che abbiamo impostato prima e gli ho dato un valore del 10%. Questo restituirà un colore che è il 10% più scuro di qualsiasi altra cosa $ colore è impostato per.
Creare le ombre
Ora che sappiamo come funziona tutto, è il momento di metterlo insieme e costruire le nostre ombre di testo. Ecco lo snippet di mixin completo. Creiamo il mixin, passiamo una variabile, impostiamo il colore del testo su quella variabile e quindi costruiamo le nostre ombre con variazioni più scure di quella variabile.
Implementazione del Mixin
Quel piccolo frammento sopra ci consente di creare fantasiosi testi 3D usando qualsiasi colore con pochissimo lavoro. Tutto ciò che dobbiamo fare è eseguire il comando include, indicare il nome del mixin e passare un colore. È una cosa bellissima
Quanto è facile? Ora se decidiamo che vogliamo un nuovo colore, cambiarlo è veloce e indolore.
Prova a cambiare il carattere
Tieni presente che questo viene fatto con testo live, completamente selezionabile / modificabile. Questo apre molte grandi possibilità. Ad esempio, prova a combinarlo con un carattere Web di Google come Medula One per un effetto davvero impressionante.
Dimostrazione dal vivo
Clicca qui per vedere e giocherellare con la versione Sass del nostro mix threedee.
Ora con MENO
Ero un uomo LESS, ma sono stato conquistato dalla profondità e dalla potenza di Sass. Tuttavia, penso ancora che LESS sia uno strumento fantastico e non voglio scoraggiarvi dall'usarlo in qualsiasi modo. Entrambi i preprocessori hanno i loro meriti quindi se ti piace MENO meglio, usa quello. Entrambi producono in uscita puro CSS alla fine, quindi il modo in cui arrivate dipende da voi.
Mi è capitato di sapere da precedenti articoli che molti dei nostri lettori sono meno fan quindi non volevo che nessuno si perdesse questo fantastico effetto. LESS condivide effettivamente le operazioni di colore Sass in modo che possiamo facilmente creare un mix simile con questa sintassi. In effetti, la versione LESS è in realtà più concisa perché possiamo eliminare la sintassi di @ mixin / @ che Sass richiede.
Come puoi vedere, le due versioni sono molto simili. Notare che Less usa il simbolo @ per le variabili e che i mixins rispecchiano effettivamente le classi nella forma, che è sia conveniente che un po 'confusa.
Conclusione
In definitiva, sono d'accordo sul fatto che non si dovrebbe passare a un preprocessore CSS per fare il lavoro di progettazione per voi. Le tavolozze dei colori dovrebbero essere costruite con cura dopo aver pesato diversi fattori. Tuttavia, ciò non significa che le operazioni di colore automatiche siano inutili. Spero di aver dimostrato un chiaro esempio in cui l'operazione di scurimento combinata con un mixin crea un flusso di lavoro infinitamente migliore per tirare fuori un grande effetto CSS 3D. Mi piacerebbe sentire le tue opinioni su altri modi per utilizzare le operazioni sui colori in un flusso di lavoro legittimo e utile.
Se stai cercando di implementare del testo 3D in uno dei tuoi progetti, tieni d'occhio Design Curate, il nostro fantastico sito per i download. Pubblicheremo presto delle ottime risorse basate su questo tutorial.