Codifica di Kung-fu 35 Grafica costruita esclusivamente con CSS3
Guarda la grafica qui sotto, Photoshop fantastico funziona, giusto? No, sono creati da CSS3. Sì, lo sono completamente “disegnato” da CSS3! Quando abbiamo visto un numero sufficiente di animazioni CSS3, abbiamo pensato che tutti i CSS3 possono fare un potenziale killer Flash, ma ci sbagliamo. Gli sviluppatori forse non soddisfano il divertimento dell'animazione, quindi, ancora una volta, spingono i confini del CSS3 per sfidare il regno dell'editor grafico.
Con questo post arriva 35 grafici CSS3 accuratamente realizzati che includono anche qualcosa che non si relaziona con CSS3 come Apple iphone, personaggio dei cartoni animati Doraemon, e altre sorprese! Diamine, alcuni di loro vengono anche con un tutorial dettagliato che ti insegna come ottenerlo! Quindi non perdere la grande opportunità di imparare a creare grafica usando CSS3 e un po 'di HTML, diventiamo cattivi con CSS3!
Si consiglia vivamente di visualizzare queste demo utilizzando l'ultima versione di Safari o la versione per sviluppatori di Google Chrome. La maggior parte delle demo supporta l'ultima versione di Firefox e Google Chrome, però.
Icona del feed RSS
Icona RSS Feed creata con CSS3, in esclusiva da Hongkiat! Insieme al link arriva un tutorial che puoi davvero imparare “disegnare” l'icona RSS Feed senza usare nemmeno una singola immagine. Crea il miracolo CSS3 con le tue mani!
Apple iMac
Sì, anche i miei occhi non possono crederci, ma è iMac “assemblato” puramente con CSS3.
Tastiera Apple
È una tastiera Apple creata con CSS3! Diamine, i pulsanti della tastiera possono anche essere premuti.
Apple iphone
Oh, un'altra cosa: iPhoneCSS3.
fiore di ciliegio
La vera bellezza dei CSS3 è che può essere utilizzato per costruire qualsiasi cosa, comprese piante e animali!
Tazza di caffè
Una giornata stancante? Prendiamo un caffè CSS3, meglio servito con Safari / Google Chrome.
Doraemon
Questo Doraemon è famoso per i test di compatibilità CSS3. Provalo in Internet Explorer 8 o in basso e buona giornata.
Meowww!
Ora stai guardando un gatto costruito completamente con il codice! Peccato che il CSS3 non possa generare effetti sonori, almeno per ora.
Mushroom, Triforce, Poké Ball, Kirby
“Essendo un nerd, ho creato alcune creazioni da nerd: un fungo di Mario, la Triforce, una Pokéball e Kirby. Per quelli che usano i browser dei dinosauri, c'è uno screenshot di come dovrebbe essere.”
Nyan Cat
“Contiene 81 elementi DOM, 688 linee di puro CSS e una funzione JavaScript per il loop audio. Il mio CSS fallisce il test CSSLint e sono davvero orgoglioso di questo.”
Patterns
Il CSS3 è così grande che può anche essere usato per costruire asset fondamentali per il web design, come questi modelli.
BonBon
BonBon sono pulsanti CSS3 dolci creati con un obiettivo in mente: pulsanti dall'aspetto sexy, davvero flessibili con il markup più minimalista possibile.
Icone iOS
Stupefacente? Sì. Queste icone sono costruite da angoli arrotondati, ombre, gradienti, RGBA, pseudo-elementi, e trasforma, con l'aiuto di alcuni strumenti come gli strumenti di Westciv e il raggio di confine.
Icone social media
È impossibile per lo sviluppatore web non creare icone di social media se possono costruire iPhone e Doraemon con CSS3. E hanno costruito queste icone davvero bene.
Icone social media
Un'altra serie di icone dei social media che mostrano le possibilità del CSS3 nella creazione di icone utilizzabili.
peculiare
“Particolare è un pacchetto di icone gratuito realizzato solo in CSS. È stato creato per siti e applicazioni web che dipendono dal minor numero possibile di richieste HTTP o non hanno bisogno di utilizzare alcuna immagine.”
Icone GUI
84 semplici icone GUI che usano solo CSS e HTML semantico. Questo è ancora considerato come “pronto per la produzione” icone, ma sembrano molto promettenti.
Steve Jobs
Steve Jobs non è solo l'icona dell'era digitale, ma anche il leader che promuove fortemente HTML5.
Twitter Fail Whale
Twitter fail whale non mancherà di sorprenderti, tranne che in Internet Explorer 8 o versioni successive.
umbrUI
Elementi dell'interfaccia utente resi possibili con CSS3, e sembra davvero elegante!
Adobe Photoshop Logo
Un omaggio a Photoshop senza usare Photoshop.
Logo Android
L'Android è fatto di forme abbastanza semplici, ma spiega il vantaggio del CSS3: puoi creare cose semplici e modificarlo come vuoi usando solo il codice ma non Photoshop.
Logo Apple
Retro logo Apple presentato con CSS3, ancora fantastico come il tempo in cui è stato creato.
Logo Atari
Anni prima, chi avrebbe pensato che il logo Atari sarebbe stato ricreato usando CSS3.
Logo BP
Semplice logo può essere fatto facilmente con CSS3. La cosa migliore con alcuni di questi loghi presentati qui è che ci sono codice da provare!
Logo Dribbble
Il famoso logo di Dribbble, il sito di vetrina basato sull'uso degli utenti, è stato presentato utilizzando CSS3.
Magento Logo
Il logo di Magento non è troppo difficile da disegnare ma il risultato è professionale.
Logo McDonald
Mi piace il CSS3!
Twitter Bird
Perfetta proporzione, punta del cappello al creatore.
Logo Windows
Logo di Windows! Sembra davvero fantastico ed è facile da creare!
Logo di Internet Explorer
Creazione davvero fantastica! Funziona nei principali browser ad eccezione di Internet Explorer 8 o versioni precedenti.
Google Chrome Logo
Non sono sicuro che tu ami il nuovo logo di Google Chrome o no, ma questo logo Google Chrome di CSS3 è fantastico!
Logo Opera
Ora una pratica per te: quali sono le differenze tra questo pezzo di CSS3 e il vero affare?
Logo HTML5
HTML5 non può brillare senza CSS3!
Logo Volkswagen
Tranne la combinazione di colori, questo clone CSS3 sembra identico a quello originale.
Riflessione
Con il boom dei loghi e della grafica fatta di puro CSS3 arrivano le discussioni che dibattono ampiamente sull'usabilità della grafica prodotta da CSS3 nell'ambiente di produzione reale.
Generalmente il grafico CSS3 va bene, ma è così potrebbe essere fastidioso specialmente quando è necessario modificare il disegno o semplicemente ridimensionare l'immagine, anche il più grande dolore qui è che la tecnologia non è ancora pienamente supportata da alcuni browser come Internet Explorer.
Cosa pensi? Utilizzerai la grafica realizzata con CSS3 nel tuo sito? Avete qualche soluzione per i suoi attuali inconvenienti? Fateci sapere il vostro pensiero e condividete con noi se avete appena stampato una grafica CSS3!
Di Più
Vuoi fare qualcosa con CSS3? Sei arrivato nel posto giusto! Di seguito sono riportate le guide e le esercitazioni scritte per aiutarti molto sulla tua strada per padroneggiare il CSS3.
- CSS3: crea un menu di navigazione breadcrumb
- CSS3: crea un logo di feed RSS
- CSS3: crea una casella di ricerca
- CSS3: Guida per principianti
- CSS3 / HTML5: crea pagine Web
- CSS3 / HTML5: crea un modulo di contatto basato su AJAX
