Annuncio pubblicitario
CSS3 (combinato con la potenza di HTML5) è rapidamente supportato da tutti i principali browser (leggi - tutto tranne Internet Explorer), quindi io pensato ora sarebbe un buon momento per vedere alcuni dei fantastici effetti CSS che possiamo ottenere usando la potenza del tuo browser e un po 'di 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 incuriosito ma non hai idea di cosa significhi CSS, mi spiego rapidamente. CSS è il linguaggio di codifica utilizzato per decorare le pagine Web. Sta per Cascading Style Se, in sostanza, 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, i CSS li visualizzano nel modo in cui il designer inteso e determinare qualsiasi cosa dal layout di pagina, dimensione del testo e colori, e ora una serie di effetti fantasiosi con l'introduzione di CSS3.
In passato, ottenere gli stessi tipi di effetti descritti in questo articolo avrebbe significato scaricare ingombranti CSS o grafica ancora più grande. Ora, CSS può semplicemente descrivere al tuo browser come dovrebbe apparire la pagina e il browser gestirà l'elaborazione. È come se ti consegnassi i piani per costruire la tua casa invece di venderti l'intera casa - è significativamente più economico!
Angoli arrotondati
Internet sta gradualmente diventando più "rotondo", ma ora questo si è consolidato in CSS3. Dai un'occhiata al riquadro che circonda questo paragrafo. Non è un'immagine: prova a fare clic destro su di essa 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 del testo
Il testo a volte può sembrare molto duro da solo, ma una semplice piccola ombra aiuta davvero le cose. Guarda 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 piatti o immagini con gradiente di sfondo, ora puoi creare un gradiente freddo usando solo CSS. Sfortunatamente, hai bisogno di alcune righe a causa degli attuali problemi di incompatibilità tra i browser, ma puoi utilizzare lo strumento che descriverò più avanti per generarli automaticamente.
Ecco il codice per i gradienti CSS:
.box_gradient {background-color: # 3f9fe3; immagine di sfondo: -moz-linear-gradient (top, # 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 * / immagine di sfondo: -o-linear-gradient (top, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# 3f9fe3), a (#white)); / * Saf4 +, Chrome * / immagine di sfondo: -webkit-linear-gradient (in alto, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / immagine-sfondo: gradiente lineare (in alto, # 3f9fe3, #white); filtro: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }
Rotazione
È difficile immaginarne un uso in termini di testo, ma può aggiungere alcuni elementi di design piacevoli quando si utilizzano le immagini, ad esempio. Ancora una volta, nota che anche se questo paragrafo è stato ruotato, puoi comunque selezionarlo e interagire con esso in quanto rimane testo normale.
Ecco il codice per ruotare qualcosa:
.box_rotate {-moz-transform: rotate (7.5deg); / * 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: rotate (7.5deg); filtro: progid: DXImageTransform. Microsoft. Matrice (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, dimensionamentoMetodo = 'espansione automatica'); zoom: 1; }
Animazione
Oh sì, ho salvato il meglio fino all'ultimo. CSS3 introduce varie forme di animazione per qualsiasi numero dei fantastici effetti CSS descritti. In questo paragrafo, ho definito la proprietà di transizione come elencato di seguito, nonché un semplice colore di sfondo e rotazione quando ci si passa sopra. Se non lo sei già, passa il mouse su questo paragrafo di testo ora 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 utilizzare alcune pseudo classi CSS (come ad esempio: passa il mouse per modificare tutte le proprietà che desideri animare, come colore, dimensioni o rotazione)
.box_transition {-moz-transizione: allentamento di tutti gli 0,5; / * FF4 + * / -o-transizione: allentamento di tutti gli 0,5; / * Opera 10.5+ * / -webkit-transizione: allentamento di tutti gli 0,5; / * Saf3.2 +, Chrome * / -ms-transizione: allentamento di tutti gli 0,5; / * IE10? * / transizione: allentamento di tutti gli 0,5; }
Incompatibilità tra browser
Sebbene la maggior parte dei browser moderni supporti in qualche modo tutto il CSS3, alcuni richiedono comunque un codice leggermente diverso o degli hack per farlo funzionare con la loro particolare implementazione dello standard. Nel codice sopra, ad esempio, vedrai molte istanze di -moz- o -webkit- che precedono alcune delle proprietà CSS, che si riferiscono a browser basati su Mozilla o basati su Webkit. Scrivere queste righe extra può essere una seccatura, quindi dai un'occhiata a generatore css3 per scriverli per te.
Conclusione
Il web diventerà molto più eccitante con le nuove estensioni CSS3 e HTML5. Certo, vedremo un altro scatto di testo lampeggiante e un alto rapporto tra whiz bang e contenuti reali (proprio come abbiamo fatto quando le GIF animate sono state prima "scoperte") ma a lungo termine impareremo come utilizzare gli strumenti di CSS3 per rendere il web più interessante interfacce. Ehi, puoi sempre spegnere tutto!
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 funzionerà senza CSS3, non lo hai utilizzato correttamente. I CSS dovrebbero essere usati per migliorare l'esperienza, non la funzionalità del programma.
James ha una laurea in Intelligenza Artificiale ed è certificato CompTIA A + e Network +. È lo sviluppatore principale di MakeUseOf e trascorre il suo tempo libero giocando a paintball e giochi da tavolo VR. Costruisce PC da quando era un bambino.