C'è molto che puoi fare con solo CSS e un browser web. I grandi sviluppatori amano spingere la busta e mostrare quanto è possibile.
Sebbene i progetti sperimentali non siano sempre utili nei siti di produzione, sono incredibilmente stimolanti ed educativi.
Abbiamo organizzato una manciata di progetti CSS che mostrano il vero potere dei CSS. Questi sono tutti ospitati su CodePen in modo da poter anche studiare e clonare il codice sorgente per vedere come funzionano.
Questo Pagina di caricamento Sass usa gradienti animati e elementi ridimensionabili per creare un effetto di caricamento ripetuto.
La maggior parte delle persone dovrebbe riconoscere questa animazione di caricamento da Facebook che utilizza una versione ridotta di questo caricatore di barre verticali. Ma la maggior parte dei caricatori web utilizza GIF animate poiché le immagini sono più compatibili con tutti i browser.
Questa barra di caricamento CSS3 dimostra che con un po 'di pensiero creativo è possibile ricostruire quasi tutti gli stili di animazione che si desidera.
Vedi la penna Caricamento barre di MaxStalker ( @MaxStalker ) sopra CodePen .
Ecco uno dei progetti CSS più complessi che potrei trovare online. Questa dinamica progettazione del sistema solare di Malik Dellidj funziona su puro CSS senza immagini .
Ogni pianeta è reso in CSS incluse le velocità di rotazione. Questo progetto è pensato per essere un modello accurato del sistema solare e presenta anche uno sfondo interstellare realistico per l'avvio.
Non riesco a immaginare quanto tempo ci sia voluto solo per rendere le icone del pianeta, per non parlare di avere le velocità di animazione giuste. Ma dove c'è una volontà c'è un modo.
Vedi la penna Animazione del sistema solare - Pure CSS di Malik Dellidj ( @kowlor ) sopra CodePen .
Non avrei mai pensato di vedere il giorno in cui si poteva giocare il dragamine classico di Windows usando puro CSS . Eppure grazie allo sviluppatore Bali Balo quel giorno è arrivato.
Nota che questo non funziona esattamente come il Minesweeper tradizionale perché non tiene il punteggio correttamente. Ma tiene traccia del tempo con precisione e non usa una leccata di JavaScript.
In qualche modo, anche l'interfaccia sembra sorprendentemente vicina all'interfaccia originale di Minesweeper e funziona tutto su CSS. Anche se potrebbe non essere una replica perfetta, è abbastanza vicino da costringermi a giocare qualche round.
Vedi la penna Dragamine puro CSS di Bali Balo ( @bali_balo ) sopra CodePen .
Sulla superficie questo interruttore a levetta può sembrare piuttosto semplice. Funziona attraverso un input di checkbox e passa i dati sul back-end, anche se questa non è la parte più impressionante.
Questo interruttore ha alcune caratteristiche che lo rendono uno dei migliori interruttori on / off del frontend:
In qualche modo questo interruttore on / off cattura ogni clic dell'utente e usa quell'evento per animare l'area di commutazione giorno / notte in vista. I disegni dell'icona di sole e luna sono anche ben stilizzati considerando che funzionano solo con i CSS.
Vedi la penna Attiva "giorno e notte" Pure Css di Benjamin Réthoré ( @bnthor ) sopra CodePen .
Il tracciamento tradizionale del mouse è il lavoro di JavaScript che riporta le coordinate X / Y dell'utente nella pagina.
Tecnicamente hai ancora bisogno di JavaScript per raccogliere queste coordinate e fare qualcosa di utile con loro. Ma questo frammento mostra che è possibile progettare una pura funzione di tracciamento del mouse CSS che segue ogni movimento dell'utente.
Non posso davvero pensare a un uso pratico per questo, ma potrebbe essere divertente su un sito scherzo.
Vedi la penna Tracciamento del mouse CSS puro sperimentale di Momcilo Popov ( @Momciloo ) sopra CodePen .
Abbiamo visto tutti icone vettoriali e illustrazioni progettato per il web . Ma che dire delle illustrazioni vettoriali a pagina intera progettate con codice CSS e SVG non formattato?
Questo progettazione del parco di divertimenti è un progetto sperimentale che funziona solo con i browser supportati da SVG. Eppure in quei browser moderni lo rende perfettamente impeccabile e ogni elemento ha un posizionamento molto realistico nella pagina.
Le animazioni sono certamente impressionanti ma è la precisione degli elementi SVG che attira anche la mia attenzione. In pochi anni potremmo trovare questo tipo di illustrazioni sul web che funzionano esclusivamente in codice senza file di immagine.
Vedi la penna Flat design amusement park svg di Lina (animazione powered by CSS) di Vladimir Gashenko ( @gxash ) sopra CodePen .
Come creare un'animazione CSS ripetitiva il concetto di striscia di Möbius è piuttosto difficile. Ma aggiungi alcuni elementi 3D e gradienti variabili? Ora hai una vera sfida.
Questo frammento è abbastanza impressionante considerando quanto è fluido e quanto poco codice viene utilizzato (solo 90 righe di CSS). Con Haml hai solo bisogno di 6 linee di codice per creare anche l'intero concept.
Devo ammettere che non sarebbe super utile su un sito web reale, ma è una testimonianza di quanto puoi fare con alcune dozzine di righe di HTML e CSS.
Vedi la penna Möbius 6 hedrons (pure CSS) di Ana Tudor ( @thebabydino ) sopra CodePen .
Dopo aver usato questa webapp per alcuni secondi, potresti sentirti sicuro che funziona su JavaScript. I comportamenti dinamici come la rotazione 3D e il posizionamento del terreno sono tutti segni di una dolce applicazione web JS.
Ma questa interfaccia utente creator mappa di Vincent Durand è in realtà puro CSS al 100%. Le frecce per la rotazione, l'effetto di rotazione stesso e tutte le funzionalità click-to-place funzionano su CSS.
Vale la pena ricordare come tutto questo concetto è reso utilizzando anche cubi 3D. I blocchi stessi funzionano come elementi 3D e puoi ruotare i cubi semplicemente passando il mouse.
Senza dubbio uno degli usi più folli per i CSS che ho visto da molto tempo.
Vedi la penna Creatore di mappe CSS completo di Vincent Durand ( @onediv ) sopra CodePen .
Questo progetto è un po 'meno interattivo ma comunque mozzafiato. Lo sviluppatore Peter Schmiz ha ricreato tutto il principale Icone dell'app iOS 7 usando puro HTML e CSS.
Nessuna di queste icone utilizza SVG o file di immagine. Ogni elemento di ciascuna icona è codificato in HTML con un elemento span / div, quindi in stile CSS. La parte più pazza è la precisione di questi!
Il set completo include 22 icone e sono tutte molto belle. Sono rimasto molto colpito dall'attenzione ai dettagli per icone come Mappe e Meteo. Solo più la prova che con abbastanza tempo e pazienza puoi praticamente progettare qualsiasi cosa nei CSS.
Vedi la penna Icone iOS 7 con puro CSS di Peter Schmiz ( @peterschmiz ) sopra CodePen .
Ricreare l'animazione di caricamento Slack con CSS3 è decisamente impressionante. Ma questo frammento ricrea il caricatore Slack con un solo elemento sulla pagina. Questo è ciò che chiamo dedica.
Il numero totale di CSS per questo snippet è di oltre 100 righe che include i colori del logo Slack e gli effetti di animazione.
Non posso dire se questa idea possa funzionare per altre icone di caricamento con marchio, ma sono certamente impressionato da questo.
Vedi la penna Caricatore a gioco singolo elemento da CrocoDillon ( @CrocoDillon ) sopra CodePen .
Troverai dozzine di design personalizzati per barre 3D in CodePen con le loro animazioni. Ma queste barre 3D di Rafael González si distinguono per tutti gli altri moderni grafici a barre CSS.
Ognuno di questi grafici eseguire su flexbox per i contenitori, quindi verranno ridimensionati automaticamente in base al numero di barre aggiunte e alla dimensione del contenitore. Inoltre, ogni grafico a barre si anima quando scorre in vista, il tutto controllato tramite puro CSS.
E dal momento che la dimensione di ciascuna barra viene eseguita in em è possibile regolare ogni singola barra in modo che si riduca in modo naturale in base alle dimensioni dei caratteri del browser. Un esempio geniale che dimostra che il moderno CSS è molto più flessibile che mai.
Vedi la penna Pure CSS Bars di Rafael González ( @rgg ) sopra CodePen .