Guida per principianti al CSS3
Fin dall'annuncio del 2005, lo sviluppo del livello 3 di Cascading Style Sheet o meglio conosciuto come CSS3 è stato attentamente monitorato e monitorato da molti designer e sviluppatori. Tutti noi entusiasti di mettere le mani sulle nuove funzionalità di CSS3: ombre di testo, bordi con immagini, opacità, sfondi multipli, ecc., Solo per citarne alcuni.
Ad oggi, non tutti i selettori di CSS3 sono pienamente supportati. Ma questo non significa che non possiamo divertirci a testare nuovi contenuti CSS3. Questo post è dedicato a tutti i designer e sviluppatori che hanno già familiarità con CSS 2.1 e vogliono sporcarsi le mani su CSS3.0.
È una raccolta di utili letture CSS3, codici di esempio, suggerimenti, tutorial, cheat-sheets e altro. Sentiti libero di usarli nei tuoi progetti, ma assicurati che ricada con grazia su browser incompatibili.
Introduzione a CSS3
Introduzione al CSS3
Introduzione ufficiale (roadmap) a CSS e CSS3. Questo documento offre un'idea generale sullo sviluppo di CSS3.
CSS3: porta il design al livello successivo
Vantaggi del CSS3, con spiegazioni ed esempi di proprietà e selettori CSS3.
Diversi trucchi con CSS3
Webmonkey ti porta attraverso diversi trucchi di base in CSS3, tra cui bordi arrotondati, bordi, ombre esterne, trucchi di immagini e altro ancora.
Intervista: sei domande con Eric Meyer su CSS3
Gente di Six Revision ha intervistato Eric Meyer con preziose intuizioni e risposte su CSS3.
CSS3: Progressive Enhancement
Come utilizzare tecniche di miglioramento aggraziate (o progressive) per utilizzare le funzionalità CSS3 nei browser che le supportano, assicurando al tempo stesso che il codice fornisca un'esperienza utente soddisfacente nei browser meno recenti che non supportano ancora tali funzionalità.
CSS3: sfondo e bordi
Bordi arrotondati (Border-radius)
Una guida per creare bordi arrotondati con i CSS3 border-radius proprietà.
Bordi arrotondati con immagine (border-immagini)
Come usare le immagini nei bordi con border-immagine proprietà.
Bordi, sfondi e scatole CSS3
Spiegazione dettagliata con esempi di nuove proprietà CSS3 come: background-clip di, background-origine, background-attachment, box-ombra, box-decorazione-break, border-radius e border-immagine.
CSS3: testo
Effetto tipografico
Crea un semplice effetto tipografico con CSS3.
Sei effetti di testo usando l'ombra del testo
Gli effetti di testo includono: vintage / retro, neon, inserto, anaglifico, fuoco e gioco da tavolo.
Bella tipografia
Come prendere il markup di base e trasformarlo in un design tipografico attraente e bello attraverso puro CSS3.
Rotazione del testo
Usa un image sprite e una spruzzata di CSS per sistemare le cose.
Testo di contorno
Come aggiungere un contorno o un tratto al testo usando il CSS3 text-stroke proprietà.
Effetto di mascheramento del testo
Effetto di mascheramento del testo interattivo usando il text-shadow Proprietà CSS.
Link nudging (animazione) con CSS3
Ditch Javascript e crea effetti nudge interamente con CSS3.
Stile di selezione CSS
Cambia lo stile di selezione del testo con CSS3.
CSS3: Menu
Contenuto a più colonne
Usando i CSS3 per creare una serie di colonne sul tuo sito web senza dover assegnare singoli livelli e (o) paragrafi per ogni colonna.
Tooltips sexy con solo CSS
Come utilizzare lo standard CSS in evoluzione può migliorare alcune fantastiche descrizioni dei cross-browser.
Altri tooltip:
- Tooltip Pure CSS3
- Tooltip con CSS3.
Menu a discesa
Come creare un menu a discesa multi-livello di Apple.com allo stesso modo border-radius, box-ombra, e text-shadow.
Area a schede solo CSS3
Fare clic su una scheda, nascondere tutti i pannelli, mostrare quello corrispondente alla scheda appena cliccato, tutto con i CSS.
Nastri 3D con CSS3
Crea nastri 3D dall'aspetto gradevole con solo CSS3.
CSS3: drop shadow
Rilascia l'ombra nell'immagine
Mostra diverse tecniche e alcune delle possibili apparizioni per eliminare le ombre senza usare le immagini.
Schede Glow con Box Shadow
Come creare schede intuitive e belle in CSS3 senza immagini.
CSS3: pulsanti
Tutorial: pulsanti graziosi
Come creare bellissimi pulsanti CSS3 compatibili con browser incrociati che degradano con grazia.
Fumetti
Varie forme di effetto fumetto create con CSS 2.1 e migliorate con CSS3.
Pulsanti simili a Github
Raccolta di pulsanti che mostrano ciò che è possibile usando CSS3 mantenendo allo stesso tempo il markup più semplice possibile.
Spinning, Fading Icons con CSS3 e MooTools
Come usare CSS3 e MooTools per creare elementi girevoli di tipo Dymanic.
Sovrapposizione di immagini
Applicazione pratica della proprietà border-image CSS3.
Di Più
- CSS3 + Mootools. Un esempio di sperimentazione in mootools. Questo aggiunge proprietà CSS3 nel lavoro principale del frame MooTools.
- Logo in espansione con CSS3 e MooTools o jQuery. Prendi l'immagine statica e trasformala in un effetto animato che esplode al passaggio del mouse.
- La potenza di HTML 5 e CSS 3. HTML 5 e CSS 3 stanno rapidamente guadagnando popolarità, Perishable Press è qui per spiegare come e perché.
- Raggi di filatura con animazioni CSS3 e esempio JavaScript. Effetto di rotazione del raggio semplice e sottile nella parte posteriore di un'immagine.
- Galleria fotografica Polaroid CSS3. Come costruire una bella pila di foto Polaroid con puro stile CSS.
- HTML 5 e CSS 3: le tecniche che presto userete. Una panoramica sulla costruzione di un blog da zero con HTML5 e CSS3.
Fogli e riferimenti
Cheat Sheet di CSS3 (PDF)
Foglio di calcolo stampabile con l'elenco completo di tutte le proprietà, i tipi di selettore e i valori dell'attuale specifica CSS3 del W3C.
Supporto CSS in Opera 9.5
Elenco completo dei selettori CSS supportati in Opera 0.5.
Caratteri disponibili per l'incorporamento di @ font-face
Elenco completo di caratteri attualmente concessi in licenza per @ Font-face embedding.
Selettori CSS 3 - Spiegato
Una guida e un riferimento ai selettori CSS3 e ai suoi modelli.
Generatore di regole CSS3 cross-browser
Regole CSS3 che puoi copiare e incollare sul tuo foglio di stile.
Grafico clic CSS3
Ottieni stili CSS3 come ridimensionamento della scatola, raggio di confine, ombreggiatura del testo e altro con un clic.
Contenuto CSS e compatibilità del browser
Elenco completo delle tabelle dei selettori di CSS e CSS3 con dichiarazione per la verifica della compatibilità del browser.
