Guida per principianti ai CSS3
Questo articolo fa parte della nostra "serie di tutorial HTML5 / CSS3", dedicata a farti diventare un designer e / o uno sviluppatore migliori. Clicca qui per vedere più articoli della stessa serie.
Fin dall'annuncio del 2005, lo sviluppo del livello 3 di Cascading Style Sheet o meglio conosciuto come CSS3 è stato osservato e monitorato da molti designer e sviluppatori. Siamo tutti 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 ancora completamente supportati. Ma questo non significa che non possiamo divertirci a testare nuovi elementi 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
Un'introduzione ufficiale (roadmap) a CSS e CSS3. Questo documento offre un'idea generale sullo sviluppo di CSS3.

Vantaggi del CSS3, con spiegazioni ed esempi di proprietà e selettori CSS3.

Webmonkey ti porta attraverso diversi trucchi di base in CSS3, tra cui bordi arrotondati, bordi, ombre esterne, trucchi di immagini e altro ancora.

Gente di Six Revision ha intervistato Eric Meyer con preziose intuizioni e risposte su CSS3.

Come utilizzare tecniche di miglioramento aggraziate (o progressive) per utilizzare le funzionalità CSS3 nei browser che le supportano, assicurando che il codice continui a fornire un'esperienza utente soddisfacente nei browser meno recenti che non supportano ancora tali funzionalità.

Bordi arrotondati (raggio di confine)
Una guida per creare bordi arrotondati con proprietà border-radius
di CSS3.

Come utilizzare le immagini nei bordi con proprietà border-image
.

Spiegazione dei dettagli con esempi di nuove proprietà CSS3 come: background-clip
, background-origin
, background-attachment
, box-shadow
, box-decoration-break
, border-radius
e border-image
.

Effetto tipografico
Crea un semplice effetto tipografico con CSS3.

Gli effetti di testo includono: vintage / retrò, neon, inserto, anaglifico, fuoco e gioco da tavolo.

Come prendere il markup di base e trasformarlo in un design tipografico attraente e bello attraverso puro CSS3.

Usa un image sprite e una spolveratina di CSS per sistemare le cose.

Come aggiungere una struttura o un tratto al testo usando la proprietà del text-stroke
CSS3.

Effetto di mascheramento del testo interattivo utilizzando la proprietà CSS text-shadow
.

Ditch Javascript e crea effetti nudge interamente con CSS3.

Cambia lo stile di selezione del testo con CSS3.

Contenuto a più colonne
Utilizzando CSS3 per creare un set di colonne sul tuo sito web senza dover assegnare singoli livelli e (o) paragrafi per ogni colonna.

Come utilizzare lo standard CSS evolutivo può migliorare alcune fantastiche descrizioni dei cross-browser.

- Tooltip Pure CSS3
- Tooltip con CSS3.
Menu a discesa
Come creare un menu a discesa multi-livello di Apple.com allo stesso modo usando il border-radius
, l' box-shadow
text-shadow
.

Fare clic su una scheda, nascondere tutti i pannelli, mostrare quello corrispondente alla scheda appena cliccato, tutto con i CSS.

Crea nastri 3D dall'aspetto gradevole con solo CSS3.

Rilascia l'ombra nell'immagine
Mostra diverse tecniche e alcune delle possibili apparizioni per eliminare le ombre senza usare le immagini.

Come creare schede intuitive e belle in CSS3 senza immagini.

Tutorial: pulsanti graziosi
Come creare bellissimi pulsanti CSS3 compatibili con browser incrociati che degradano con grazia.

Varie forme di effetto fumetto create con CSS 2.1 e migliorate con CSS3.

Raccolta di pulsanti che mostrano ciò che è possibile usando CSS3 mantenendo anche il markup più semplice possibile.

Come usare CSS3 e MooTools per creare elementi girevoli di tipo Dymanic.

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 CSS3 (PDF)
Foglio di calcolo stampabile con l'elenco completo di tutte le proprietà, i tipi di selettori 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.

Elenco completo di caratteri attualmente concessi in licenza per l'incorporamento di @font-face
.

Una guida e un riferimento ai selettori CSS3 e ai suoi modelli.

Regole CSS3 che puoi copiare e incollare sul tuo foglio di stile.
Grafico clic CSS3
Ottieni stili CSS3 come ridimensionamento della scatola, raggio del bordo, ombreggiatura del testo e altro con un clic.

Elenco completo delle tabelle dei selettori di CSS e CSS3 con dichiarazione per la verifica della compatibilità del browser.


20 temi gratuiti per WordPress multiuso
Quando si tratta di temi WordPress, le scelte disponibili sono una dozzina di dozzine, abbiamo temi di avviamento WordPress adatti agli sviluppatori avanzati. Abbiamo anche bellissimi temi premium per WordPress che puoi permetterti a un prezzo conveniente. E naturalmente abbiamo Temi WordPress facili da personalizzare, perfetti per coloro che non amano toccare il codice e che sono gratuiti

Aggiungi passi di progresso ai moduli con questo plugin jQuery
La maggior parte di noi conosce le barre di avanzamento e come funzionano nella progettazione dell'interfaccia utente. Aiutano a definire tempi di caricamento, moduli di caricamento e periodi di ritardo simili tra le pagine.Ma i passi del progresso sono un po 'diversi. Questi funzionano come breadcrumb nella parte superiore della pagina per guidare gli utenti attraverso una procedura dettagliata (di solito moduli di iscrizione e verifica)