Share
Tutti abbiamo dovuto ottenere qualche effetto che richiedesse una manciata extra di div o PNG. Non dovremmo limitarci a queste vecchie tecniche quando arriva una nuova era. Questa nuova era include l'uso di CSS3. Nel tutorial di oggi, ti mostrerò undici diversi effetti dispendiosi in termini di tempo che è possibile ottenere facilmente con CSS3.
Sono sicuro che hai sentito parlare di CSS in generale. CSS3 non è molto diverso, in termini di sintassi; tuttavia, la potenza del CSS3 è molto maggiore. Come vedrai in queste undici tecniche, puoi avere più sfondi, ridimensionare dinamicamente quegli sfondi, i raggi del bordo, le ombre del testo e altro!
Ecco cosa dice il sito ufficiale (o almeno quello che considero ufficiale) di CSS3, css3.info, sul CSS3:
CSS3 è il nuovo capretto della famiglia di fogli di stile. Offre nuove entusiasmanti possibilità di creare un impatto con i tuoi progetti, ti consente di utilizzare fogli di stile più diversi per una varietà di occasioni e molto altro ancora.
Ecco le 11 tecniche che ti mostrerò come ricreare con CSS3. Ti mostrerò come crearli usando CSS2 (o JavaScript) e quindi con proprietà CSS3. Ricorda: questi effetti funzionano solo su browser moderni che implementano queste funzionalità CSS3. La tua migliore opzione è vederli con Safari 4.
Probabilmente il mio preferito su questa lista, gli angoli arrotondati forniscono uno sviluppatore con così tante opzioni. È possibile creare un pulsante angolo arrotondato in pochi secondi. La cosa che preferisco fare è impostare uno sfondo sfumato da ripetere lungo l'asse x e quindi applicare gli angoli arrotondati per creare un pulsante Web 2.0 dall'aspetto molto gradevole.
Puoi simulare angoli arrotondati usando quattro immersioni extra o usando JavaScript. Però, un utente non vede questi angoli smussati se ha JavaScript disabilitato, penso che vada bene finché il sito funziona ancora come dovrebbe. Puoi leggere questo metodo se preferisci usare puro CSS nella realizzazione di angoli arrotondati.
Il metodo classico utilizza jQuery insieme a un plugin JavaScript chiamato Corners.
Come puoi vedere, tutto ciò che devi fare è specificare tre proprietà CSS3. Alla fine, sarà solo uno; devi usarne tre ora perché i diversi browser usano nomi di proprietà diversi.
Guarda la demo.
Le ombre delle caselle ti forniscono uno strumento molto potente. Il 99% delle volte in cui sto scrivendo, mi trovo a usare le ombre esterne per qualcosa. Ancora una volta, userò un plugin jQuery per occuparmi del modo classico perché onestamente, cercare di capirlo con solo CSS è confuso. Perché dovrei sprecare il mio tempo a trafficare con margini negativi quando c'è già qualcosa di scritto che fa il lavoro per me? Finché il mio design sembra perfetto quando le persone hanno JavaScript disabilitato, sono perfettamente soddisfatto dall'uso di un plugin jQuery.
Sto usando il plugin dropShadow. Semplice e quello che volevo; anche se preferirei usare solo CSS;).
I valori per le proprietà shadow del riquadro sono: x-offset y-offset sfocatura colore. Molto più facile dell'importazione di due file JavaScript, e MOLTO MOLTO più semplice che fare confusione con immagini di sfondo e margini negativi.
Guarda la demo.
Se hai mai letto un tutorial su come realizzare l'effetto di stampa tipografica in Photoshop, saprai che l'effetto Ombra esterna è usato. È davvero semplice creare testo con caratteri letterali, basta seguire questo tutorial su Line25 di Chris Spooner.
La volpe marrone veloce salta sul cane pigro. La volpe marrone veloce salta sul cane pigro.
Invece di usare un plugin jQuery questa volta, ho semplicemente usato alcuni semplici trucchi CSS per posizionare in modo assoluto il testo dietro l'altra copia di testo. L'unica cosa negativa di non usare CSS3 per questa situazione è che otterrai due copie del testo se il CSS è disabilitato.
Accentsconagua
La volpe marrone veloce salta sul cane pigro. Se hai intenzione di utilizzare ombre di testo sfocate (la terza "opzione" nella proprietà text-shadow), non so come lo realizzeresti con puro CSS e nessuna immagine.
Guarda la demo.
Lo abbiamo sognato da molto tempo, ma finalmente puoi visualizzare "caratteri fantasiosi" sul web senza basandosi su JavaScript. Ovviamente questo causa alcuni problemi con il permettere di distribuire font a pagamento su Internet. Comunque, ti presento con @ font-face.
La volpe marrone veloce salta sul cane pigro. Ho deciso di usare Cufón per sostituire il testo. Non ho intenzione di spiegare come usarlo perché Jeffrey ha già un fantastico screencast.
La volpe marrone veloce salta sul cane pigro. Creiamo una famiglia di font con @ font-face e quindi la usiamo come valore per la famiglia di font. Michael Owens ha scritto un articolo qui circa un mese fa, che spiega bene @ font-face.
Guarda la demo.
Se hai visitato di recente la riprogettazione del sito web di Envato, potresti aver notato che ci sono molti elementi trasparenti. Anche se questo è ottenuto con PNG trasparenti, è possibile ottenere un effetto simile usando la proprietà opacity. Ora, la proprietà di opacità è in circolazione da un po ', ma il nostro amato IE ha le sue proprietà.
Con CSS3, abbiamo appena eliminato due proprietà specifiche per IE, non è grandioso?!
Guarda la demo.
Tutti sanno cosa significa RGB (rosso, verde, blu), ma cosa significa A? Sta per alpha, che si riferisce alla trasparenza.
Oltre agli angoli arrotondati, RGBA è la mia prossima proprietà CSS3 più utilizzata. A volte voglio solo aggiungere qualche leggero sfondo bianco / nero ai collegamenti di navigazione quando un utente passa il mouse su di essi. È molto più facile che creare una nuova immagine per ogni colore; tuttavia, con un piccolo PHP rende le cose molto più semplici.
Visto che non si tratta di un articolo in PHP, non parlerò del PHP. Basta salvare questo file come rgba.php e quando hai bisogno di un determinato colore RGBA, rendi lo sfondo "colore" come url (rgba.php? R = R & g = G & b = B & a = A).
Ora basta applicarlo a un div ...
Guarda la demo.
La proprietà delle dimensioni dello sfondo è una cosa incredibile da avere sulla cintura degli attrezzi quando si crea un layout liquido. Un esempio di ciò potrebbe essere quando si dispone di un'immagine di sfondo per un contenitore che è per la barra laterale. Il modo classico per farlo richiede un ritocco per far ripetere l'immagine lungo l'asse y, ma con CSS3 è come aggiungere un'altra proprietà di background.
Sfortunatamente, questa proprietà non è implementata in Firefox (V3.5.2) al momento della stesura di questo documento.
Guarda la demo.
Ah, sfondi multipli. Ora questo offre agli sviluppatori uno strumento molto potente. Posso pensare a così tante cose che richiedono div multiple solo per avere più di uno sfondo. Il posto più comune che riesco a vedere è utile in una sezione di intestazione del sito Web, ma questa è solo la prima cosa che ho pensato.
Il metodo classico è abbastanza ovvio, basta avvolgere il div con un altro div e così via per ogni sfondo di cui hai bisogno. Produce un codice bello, non è vero??
La sintassi è davvero facile da cogliere su questo. Tutto quello che fai per gli sfondi multipli è aggiungere una virgola tra ognuna! Tuttavia, ancora una volta, questa è una proprietà limitata ed è solo in Safari.
Guarda la demo.
Questa è la proprietà CSS3 più interessante in cui sono arrivato. Non è qualcosa che vedi molto nel web design. Io stesso ho visto solo colonne di giornali una o due volte; tuttavia, mi piace come appare l'effetto se eseguito correttamente. Normalmente dovresti separare il contenuto in div e fluttare quelle div, ma ho trovato un plugin jQuery che rende dinamicamente le colonne.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Mecenate id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In puro lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Mecenate id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In puro lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Ho aggiunto un po 'di padding alle colonne solo in modo che il testo non sia sfasciato l'uno contro l'altro.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Mecenate id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In puro lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Mecenate id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In puro lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Ci sono una manciata di altre proprietà di colonne CSS3 che è possibile applicare, ma a scopo dimostrativo, ho solo specificato il numero di colonne. Se vuoi saperne di più su queste altre proprietà, controlla la pagina multi-colonna su CSS3.info.
Guarda la demo.
Non avevo idea della proprietà dell'immagine del bordo fino a quando non ho eseguito l'aggiornamento a Firefox 3.5 e sono andato sul sito web di Chris Spooner e ho visto che le sue immagini post avevano i bordi dell'immagine. Personalmente non ho alcun interesse in questa proprietà, ma questo non mi impedirà di spiegare come raggiungerlo.
Invece di passare il tempo a creare più div e a ripetere l'immagine di sfondo attorno al div, ho trovato un plugin jQuery che fa il lavoro per me. Si chiama borderImage e funziona esattamente come dovrebbe.
Come puoi vedere, la proprietà dell'immagine del bordo è un po 'strana. W3 spiega come viene calcolato TANTO meglio.
Guarda la demo.
Bene, chi non ama vedere alcuni elementi scivolare delicatamente a sinistra o sfumare quando si passa sopra qualcosa? Le animazioni sono ottime per aumentare l'interfaccia utente, ma assicurati di non andare troppo in fondo! Gli unici browser che supportano le animazioni CSS3 sono i browser basati su Webkit. L'unico altro modo per visualizzare le animazioni è usare JavaScript. Userò jQuery perché è la mia libreria JavaScript preferita (se non l'hai già indovinato).
Entrambi questi snippet di codice fanno la stessa cosa: fai scorrere verso il basso i div 20 pixel nel corso di 300 ms. Ricorda, il codice CSS3 funziona solo nei browser Webkit!
Guarda la demo.
Ecco qua: 11 tecniche CSS che diventeranno molto più semplici con CSS3 nel (auspicabilmente vicino) futuro. Ovviamente, ci vorrà un po 'prima di poter dipendere al 100% da queste proprietà su tutti i browser.
Non dimenticare di rivedere questi altri tutorial di Nettuts + che discutono di CSS3:
