15 Approcci ispiratori ai CSS
HTML prenderà solo il web designer finora e se vuoi creare un web design dinamico, attraente e reattivo, allora devi imparare e implementare i CSS. Non solo puoi creare elementi di design migliorati per le tue pagine, ma puoi aspettarti tempi di caricamento più rapidi, manutenzione più semplice e meno tempo per creare nuove pagine o aggiornare quelli esistenti.
Di seguito sono riportati 15 dei migliori siti Web CSS disponibili che offrono approcci diversi alla fase di progettazione web. Raccogli un po 'di ispirazione, raccogli consigli CSS e applicali al tuo design.
Beercamp
Il Beercamp sito web funziona come un libro popup e gli utenti possono girare le pagine per mostrare i display popup. È possibile ruotare il disegno 3D e ruotare le pagine facendo clic sulla pagina e ruotando. Il sito è interattivo, attraente, colorato e attrae i suoi visitatori.
Inzeit
Anche se potrebbe sembrare poco più di un magnifico sito web statico Inzeit homepage letteralmente prende vita mentre si inizia a scorrere verso il basso la pagina. Diversi strati si muovono in direzioni diverse e a velocità diverse. Mentre i visitatori devono essere incoraggiati a fare le mosse giuste, il sito diventa attivo mentre viene intrapresa un'azione in modo tale che i visitatori vengano premiati per agire.
ShockBlast
Shockblast è un sito di galleria fotografica e dal secondo la pagina carica ogni hover del mouse aiuta a riportare la pagina in vita. La homepage non solo mostra molti dei grandi campioni fotografici, ma consente a ShockBlast di catalogare e impaginare le foto rendendo la navigazione semplice ed estremamente efficace.
TepTek
Il TepTek il sito Web è un altro che incorpora un numero di livelli complessi progettati in un unico progetto. Il display iniziale cambia mentre si scorre verso il basso e mentre i frame ruotano verso il basso della pagina, i numeri di pagina appaiono e scompaiono. Il colore bianco e nero offre una finitura nitida ed elegante in modo che il visitatore si concentri pienamente sul contenuto.
FineGoods
Il FineGoods il sito Web presenta alcune sorprese poco piacevoli che ti attendono mentre passi con il mouse sui cassetti di navigazione, scorri verso il basso la pagina e dai un'occhiata anche ai cartellini dei prezzi (testo HTML). La selezione dei prodotti può essere limitata, ma questo è parte del motivo per cui il design unico funziona così bene.
Envy Labs
Envy Labs è uno dei nostri preferiti. Le trasformazioni CSS vengono utilizzate per creare un carosello rotante e mentre si fa clic sulle icone "successivo" e "precedente", si osserva la rotazione del carousel finché non viene visualizzata l'immagine successiva. Il resto della pagina è un design relativamente semplice, ma molto efficace che utilizza i CSS in una varietà di altri modi.
Driver Club
Il Driver Club il sito Web è stato progettato per Ubisoft quando è stato rilasciato il nuovo gioco Driver e non appena si visita il sito è possibile vedere il collegamento tra il sito Web e il gioco. Un altro grande uso di trasformazioni significa che mentre si scorre verso il basso, l'intero sito Web sembra prendere vita anche dando l'impressione di crediti a rotazione.
Cabina di mammut
Cabina di mammut è un altro favorito e gioca sulla teoria che tutti noi vogliamo ciò che non dovremmo. Fai clic sul pulsante Fuoco e una serie di immagini si sovrappone allo schermo e crea una cabina fotografica. Il sito Web è un ottimo modo per promuovere il servizio di fototessere che l'azienda ha da offrire.
Jeclat
Inserisci il Jeclat sito web e sarete invitati a navigare in tutto il mondo, controllare i luoghi d'interesse e aprire i pannelli laterali. Scorrere lateralmente è inusuale per molti utenti online e dovendo afferrare la statua crea intrighi e coinvolgimento anche da parte dell'utente.
Vacheron Constantin
Il Vacheron Constantin il sito web è in francese ma vale la pena visitarlo anche se non lo leggi. Fai clic e tieni premuto il pulsante di scorrimento lungo la pagina e goditi lo spettacolo. Un sito web dall'aspetto elegante che mette in risalto non solo gli orologi altrettanto eleganti ma anche l'ispirazione per i disegni.
Lift Interactive
A volte, il tentativo di adattare troppi stili ed effetti su una singola pagina può rivelarsi costoso man mano che la pagina viene incasinata, ma questo non è il caso Lift Interactive . Visita e goditi i numerosi trucchi. Dai un'occhiata agli effetti del libro in 3D e al movimento stratificato delle immagini di intestazione.
VZug
Il VZug il sito è una linea temporale dinamica. Piuttosto che una semplice e semplice foto visualizzata su una pagina statica, mentre scorri verso il basso la timeline dinamica, ti apparirà un design accattivante e una pagina annotata. Il sito mira a celebrare 100 anni di storia dell'azienda e il design aiuta a farlo bene.
Dego
Chiunque abbia giocato al gioco Little Big Planet riconoscerà lo stile del sito Web di proprietà di Dego agenzia di design. La navigazione assume una direzione apparentemente casuale e ti guida attraverso le numerose fasi che il team di progettazione di Dego rivendica per portare i propri clienti e potenziali clienti.
WeAreX3
Questo sito è un modo unico per un'azienda di cercare uno stagista. Il design storico fantascientifico si combina con un unico scorrimento orizzontale della pagina e elementi verticali. Ai visitatori viene mostrato come far scorrere le pagine e X3 spera che l'aspetto e gli elementi unici del sito attraggano il tipo di stagista di design che stanno cercando.
Cymetriq
Cymetriq è un altro sito in stile portfolio dal design brillante che combina diversi elementi e stili in un unico sito dall'aspetto e dall'interpretazione. Scorri verso il basso per gli esempi della galleria, passa con il mouse sulla barra di navigazione per gli elementi CSS e continua a scorrere dall'alto verso il basso per alcuni stili e disegni dall'aspetto unico.
Abbiamo perso uno dei tuoi preferiti? Hai superato uno degli esempi qui? Fateci sapere nei commenti.