5 fantastici effetti CSS3 ne vedrai di più

I CSS3 (combinati con la potenza di HTML5) sono rapidamente supportati da tutti i principali browser (leggi qualsiasi cosa eccetto Internet Explorer), quindi ho pensato che sarebbe stato un buon momento per vedere alcuni dei fantastici effetti CSS che possiamo ottenere usando il potere del tuo browser e un piccolo codice CSS. Dovresti essere in grado di vedere tutti gli effetti dimostrati in questo articolo se stai utilizzando il browser Chrome, Safari o Firefox più recente.

Primo: cos'è il CSS?

Se stai leggendo questo articolo perché sei intrigato ma non hai idea di cosa significhi CSS, spiegami rapidamente. Il CSS è il linguaggio di codifica usato per decorare le pagine web. Sta per Cascading Style Sheet, e in pratica aggiunge solo stile e stile a un sito. I siti Web sono certamente leggibili senza il loro CSS, ma sono orribili proprio come tutti i siti web erano nel 1995. Mentre i file HTML descrivono la struttura e il contenuto testuale di una pagina, il CSS li fa visualizzare nel modo in cui il progettista ha inteso, e determinare tutto da layout di pagina, dimensioni del testo e colori, e ora una serie di effetti di fantasia con l'introduzione di CSS3.

In passato, ottenere lo stesso tipo di effetti di quelli descritti in questo articolo avrebbe significato scaricare CSS ingombranti o grafica ancora più grande. Ora, i CSS possono semplicemente descrivere al browser come vorrebbe che la pagina appaia, e il browser gestirà l'elaborazione. Mi piace consegnarti i piani per costruire la tua casa invece di venderti tutta la casa - è decisamente più economico!

Angoli arrotondati

Internet è diventato progressivamente più "arrotondato", ma ora è solidificato nei CSS3. Dai un'occhiata alla casella che circonda questo paragrafo. Non è un'immagine: prova a fare clic con il pulsante destro del mouse per vedere. CSS puro!

Il codice per gli angoli arrotondati è davvero semplice:

.box_round -moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / border-radius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /

Ombra di testo

A volte il testo può sembrare davvero duro, ma una semplice piccola ombra aiuta davvero le cose. Controlla l'ombra che ho applicato a questo paragrafo.

Ecco il codice per alcune ombre di testo:

.box_textshadow text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /

Sfumature

Niente più colori uniformi o immagini sfumate di sfondo, ora puoi creare un gradiente gradevole solo con i CSS. Sfortunatamente, hai bisogno di alcune righe a causa degli attuali problemi di incompatibilità tra i browser, ma puoi usare lo strumento che descriverò in seguito per generarli automaticamente.

Ecco il codice per i gradienti CSS:

.box_gradient background-color: # 3f9fe3; background-image: -moz-linear-gradient (in alto, # 3f9fe3, #white); / * FF3.6 * / background: -moz-linear-gradient (in alto, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (in alto, # 3f9fe3, #white); / * IE10 * / background-image: -o-linear-gradient (in alto, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# 3f9fe3), a (#white)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (in alto, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: linear-gradient (superiore, # 3f9fe3, #white); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /

Rotazione

È difficile immaginare un uso per questo in termini di testo, ma può aggiungere alcuni elementi di design quando si usano le immagini, ad esempio. Anche in questo caso, si noti che anche se questo paragrafo è stato ruotato, è ancora possibile selezionare e interagire con esso in quanto rimane testo normale.

Ecco il codice per ruotare qualcosa:

 .box_rotate -moz-transform: ruotare (7,5 gradi); / * FF3.5 + * / -o-transform: ruota (7.5deg); / * Opera 10.5 * / -webkit-transform: ruota (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: ruota (7.5deg); / * IE9 * / transform: rotazione (7,5 gradi); filtro: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = "auto expand"); zoom: 1;  

Animazione

Oh sì, ho salvato il meglio fino all'ultimo. CSS3 introduce varie forme di animazione per qualsiasi numero di fantastici effetti CSS descritti. In questo paragrafo, ho definito la proprietà di transizione come elencata di seguito, oltre a un colore di sfondo e una rotazione semplici quando passi il mouse su di essa. Se non lo sei già, passa con il mouse su questo paragrafo del testo per vedere l'effetto in azione. Puoi animare praticamente qualsiasi cosa!

Avrai bisogno del codice di transizione come questo per qualsiasi elemento che desideri modificare. Dovrai anche usare alcune classi CSS pseudo (come: passa il mouse per cambiare le proprietà che vuoi animare, come colore, dimensione o rotazione)

 .box_transition -moz-transition: tutti gli anni '50 di alleggerimento; / * FF4 + * / -o-transition: tutti gli anni '0.5 di andamento facilitato; / * Opera 10.5+ * / -webkit-transition: tutti gli anni '50 di alleggerimento; / * Saf3.2 +, Chrome * / -ms-transition: tutti gli anni '50 di alleggerimento; / * IE10? * / transizione: tutti gli anni '90 di alleggerimento;  

Incompatibilità del browser incrociato

Anche se la maggior parte dei browser moderni supporta in qualche modo tutti i CSS3, alcuni richiedono ancora un codice leggermente diverso o hack per farlo funzionare con la loro particolare implementazione dello standard. Nel codice sopra, ad esempio, vedrete molte istanze di -moz- o -webkit- che precedono alcune delle proprietà CSS, che si riferiscono ai browser basati su Mozilla o Webkit. Scrivere queste linee extra può essere un problema, quindi controlla il generatore di css3 per scriverle per te.

Conclusione

Il Web diventerà molto più eccitante con le nuove estensioni CSS3 e HTML5. Certo, vedremo un altro sprazzo di testo lampeggiante e un alto rapporto di whiz-bang con contenuti reali (proprio come quando GIF animate sono state le prime “scoperto”) ma a lungo termine impareremo come utilizzare gli strumenti di CSS3 per creare interfacce Web più interessanti. E hey, puoi sempre disattivarlo!

Se sei tu stesso un designer o uno sviluppatore web, ricorda che CSS3 non dovrebbe mai essere l'unica opzione. Se il tuo sito non funziona senza CSS3, non lo hai usato correttamente. I CSS dovrebbero essere usati per migliorare l'esperienza, non la funzionalità del programma.

Scopri di più su: HTML, HTML5, programmazione, sviluppo Web.