50+ Tecniche CSS3 incredibili per progetti migliori
I CSS3 stanno prendendo slancio, nonostante il fatto che lo standard non sia nemmeno stato finalizzato.
Ci sono centinaia di tutorial là fuori per insegnare ai designer come usarlo, ma sfortunatamente molti di loro coprono lo stesso terreno.
E alcuni tutorial insegnano ai designer a fare cose che potrebbero non essere ritenute utili, sebbene le tecniche possano essere adattate per adattarsi perfettamente a un progetto.
Di seguito sono riportati oltre cinquanta tutorial CSS3. Molti sono rigorosamente basati su CSS e HTML, mentre altri includono anche JavaScript.
Se hai una tecnica o un tutorial preferito che non è incluso di seguito, per favore condividilo nei commenti!
Utilizzando CSS3 per l'illustrazione senza immagini
Vari nuovi metodi in CSS3 consentono di creare una serie di grafiche molto complesse utilizzando puro CSS e nessuna immagine. Ecco una manciata dei migliori esempi là fuori.
Illustrazione di iPhone CSS puro
Una miscela di bordi, trasformazioni e sfumature per creare un'immagine animata di un iPhone.
Creazione del logo del browser Opera in CSS3
Una chiara illustrazione del logo di Opera reso con le tecniche CSS3.
Il nostro sistema solare con CSS3
Una resa del sistema solare dall'aspetto elegante con effetti di animazione ..
Effetto orologio analogico
Crea un fantastico orologio analogico usando solo CSS3 e jquery.
Esperimenti d'ombra
Questo tutorial mostra come usare le ombre CSS per creare una varietà di effetti, tra cui una grafica Dark Side of the Moon, una tavola periodica in ombra e persino una "pozione d'amore" psichedelica.
Creazione di immagini in stile Polaroid con solo CSS
Questo tutorial utilizza effetti CSS2 e CSS3 per aggiungere lo stile Polaroid a un semplice elenco di immagini.
CSS3 Testo, layout ed effetti cromatici
I CSS3 possono essere usati per molte animazioni e grafiche fantasiose, ma è anche ottimo per il layout, il testo e gli effetti cromatici per i quali potresti aver fatto ricorso a Photoshop.
Colonne CSS3 Utilitzing
Codifica di un modulo CSS3 pulito multi-colonna.
General CSS3 Implemenation
Una panoramica dei vantaggi del CSS3.
Collegamenti di stile con CSS3
Quattro diversi modi per personalizzare diversi tipi di link con CSS3
Fisarmonica verticale CSS3
Sfumature e transizioni rendono questo menu fisarmonica che degrada in una lista ordinata sui browser più vecchi.
Super incredibili pulsanti CSS3
Pulsanti colorati sfumati con ombreggiatura che funzionano su sfondi chiari o scuri e non richiedono immagini!
Pulsanti di stile Photoshop con CSS3
Un confronto affiancato su come creare pulsanti CSS3 senza immagini e con Photoshop.
Effetto di testo gradiente Css
Istruzioni per creare un effetto di testo unico applicando una texture map al testo. Puoi utilizzare sfumature o motivi per rendere veramente pop di testo.
Alcune alternative CSS3 agli effetti JavaScript
7 modi per sostituire gli effetti JavaScript comunemente usati con CSS3 per rendere il tuo sito pronto per il futuro.
Effetto testo CSS3 in rilievo
Creazione di un effetto di testo in rilievo senza hack del browser Photoshop.
Comprensione dei valori cromatici CSS3
Tutto sulle nuove opzioni di colore disponibili con CSS3.
Creazione di effetti speciali con CSS3
Le transizioni e le trasformazioni CSS possono essere combinate per creare una varietà di effetti.
Fare un effetto Bokeh CSS3
La possibilità di utilizzare gradienti e trasparenza con CSS3 rende possibile questo effetto classico.
Colonne CSS3
Un buon video tutorial sul concetto di usare le colonne CSS3 per il layout.
Liste di fantasia con CSS3
Raffinato stile elenco puntato usando CSS3 per creare fantasiosi segni di spunta.
Infobox Imageless molto liscia con CSS3
Le tecniche rese possibili dai CSS3 rendono queste scatole davvero pop.
Fumetti
Gli pseudo-elementi border-radius e transform rendono queste forme possibili.
Effetti di transizione delle immagini in stile flash
Un modo intelligente per utilizzare l'effetto di animazione CSS.
Ricreare la schermata di aggiornamento di Tumblr con CSS3
Un effetto di design CSS3 che si degrada bene per i browser più vecchi.
La sottile tipografia CSS3 che avresti fatto sarebbe stata realizzata in Photoshop
Questo video tutorial di 13 minuti ti mostrerà come creare un effetto tipografico 3D bello e sottile interamente con CSS3.
Rotazione del testo con CSS
Ecco una tecnica leggermente più vecchia che mostra come creare testo compatibile con più browser ruotato per allinearlo con un asse verticale.
Crea un effetto tipografica con CSS Text-Shadow
Questo tutorial di Line25 ti mostrerà come usare le ombre di testo per creare un effetto stile tipografico sul testo del tuo sito web.
Galleria di foto CSS3 impressionante con jQuery
Questo codice crea una galleria di immagini in stile Polaroid con un'opzione di condivisione drag-and-drop.
Incredibili sovrapposizioni
Questo tutorial di Zurb mostra come creare sovrapposizioni di immagini usando le proprietà dei bordi di CSS3 che possono poi essere utilizzate per visualizzare informazioni aggiuntive su un'immagine quando si passa sopra.
Impressionante etichette in linea
Questo tutorial mostra come creare etichette di moduli in linea che non scompaiono quando i visitatori iniziano a digitare.
Effetti 3D CSS3
Cubo animato di CSS3
Un cubo animato 3D unico con trasformazioni 3D in stile CSS. Il cubo può essere ruotato usando i tasti freccia per mostrare le informazioni visualizzate su ogni faccia.
Nastri CSS3 3D
Dai un tocco di profondità al tuo design usando questi semplici nastri CD CSS3.
Scroller animato 3D Poster
Visualizzazione di poster di film con didascalie che utilizzano un effetto prospettiva 3D sbalorditivo in CSS3.
Latta di coca cola 3D CSS3
Trascinando una barra di scorrimento, questa Coca Cola virtuale può rotolare avanti e indietro.
Ombre CSS
Ombre creativamente dallo styling staccandole dall'elemento.
Animazione CSS3
Una versione animata della Fail Whale di Twitter con CSS3
Un utente molto elegante di CSS3 che si degrada sorprendentemente piuttosto bene nei browser più vecchi.
Parallax Starfield Background
Le stelle si spostano da sinistra a destra dietro i tuoi contenuti con questo classico look da viaggio spaziale.
Mostrare e nascondere il contenuto con CSS3
Allargare e contrarre vassoi e alberi di menu senza javascript.
Una scheda Follow Floating con CSS3
Metti a portata di mano le tue icone di navigazione o di contatto con questo utile metodo.
Windows modale Drop-in CSS3
Un paio di finestre modali comuni generate utilizzando effetti e trasformazioni CSS3.
Spinners che usano solo CSS3
Creare animazioni di caricamento usando solo CSS3 e nessun GIF animato!
Visualizzazione di icone sociali tramite CSS3
Un fantastico effetto di dissolvenza per la visualizzazione delle icone sociali utilizzando puro CSS3.
Animazione di cartoni animati CSS3
Creare un'intera animazione in stile flash usando solo CSS3 e jquery.
Un paesaggio animato usando CSS3
Montagne e nuvole e acqua animate da CSS3.
Simpatici titoli animati a scorrimento
Le transizioni CSS3 ti consentono di fare cose incredibili con didascalie di testo. Ecco un esempio.
Un menu di miniature elastiche
Una serie di immagini che si espandono e si ritirano quando si librano sopra.
Schede indice impilate e dinamiche
Un fantastico effetto di animazione che potrebbe essere applicato a numerosi design.
Un orologio colorato con CSS e jQuery
Questo tutorial mostra come creare un orologio colorato davvero fantastico usando CSS e jQuery, composto da tre cerchi separati in stile di caricamento che mostrano ore, minuti e secondi.
Walker At-At Pure CSS3
Questo è un esempio impressionante che usa CSS3 (no JavaScript, no Flash) per creare un At-At Walker animato di Star Wars. L'unico svantaggio è che al momento è visibile solo nei browser Webkit (Safari e Chrome).
Crea un dispositivo di scorrimento dei contenuti jQuery usando Pure CSS
Impara a creare un dispositivo di scorrimento in stile jQuery puramente CSS con questo tutorial.
Menu a discesa CSS3
Questo tutorial di WebDesignerWall mostra come creare un menu a discesa CSS3 compatibile con più browser compatibile anche con browser che non supportano CSS3 (sebbene con uno stile limitato).
Scritto esclusivamente per WDD da Cameron Chapman .
Se sei a conoscenza di altri tutorial CSS3 di alta qualità che non erano trattati in precedenza e vorresti condividere, per favore fallo nei commenti!