Tutte le nuove proprietà emergenti dalle specifiche CSS3 sono state estremamente utili nella costruzione di progetti di interfaccia utente più avanzati. Le pagine Web hanno visto una drastica revisione dei metodi utilizzati per creare stili di layout tipici. In particolare tipografia e pulsanti / elementi di forma stanno vedendo il più grande rifacimento - e con più sviluppatori che lanciano progetti open source sembra non esserci fine in vista.
Per questo tutorial voglio dimostrare come possiamo costruire alcuni titoli di esempio in una pagina web di base. Sto usando per lo più effetti CSS3 sulla barra di navigazione in alto, insieme alla tipografia nella pagina. Tutte queste tecniche dovrebbero essere trasferite nei nuovi browser Web conformi agli standard. Inoltre ci sono così tante diverse tecniche di progettazione che puoi duplicare e applicare in qualsiasi progetto. Assicurati di dare un'occhiata alla mia demo dal vivo per avere un'idea di cosa stiamo cercando di costruire!
Demo dal vivo - Scarica il codice sorgente
Iniziare
Sto prima creando una semplice pagina index.html utilizzando il doctype HTML5. Abbiamo solo bisogno di un paio di risorse per lo styling, vale a dire un foglio di stile unico styles.css insieme ad alcuni font web di Google. Molte persone credono che queste risorse rallenteranno la velocità di caricamento della pagina e, mentre richiediamo alcuni documenti via HTTP, non ci vorranno più di duecento millisecondi per una buona connessione.
Ora l'intestazione della pagina e il contenuto del corpo vengono suddivisi utilizzando un sistema di classi contenitore. La barra di navigazione dovrebbe estendersi al 100% della larghezza della pagina, tuttavia il contenuto interno raggiunge il massimo a 1050 px. Ciò manterrà tutti i nostri contenuti centrati sulla pagina, non importa quanto grande sia la risoluzione del monitor. Manteniamo l'intestazione all'interno di un HTML5 nav elemento per più stili semantici.
Vale la pena sottolineare come il testo dell'intestazione venga visualizzato per primo nel codice HTML, anche se è posizionato sul lato destro della navigazione. Anche se potremmo formattare questo aspetto come se l'intestazione arrivasse dopo la navigazione, per i crawler dei motori di ricerca, dobbiamo assicurarci che il titolo della pagina venga prima in modo che sia posizionato più in alto nella pagina. Inoltre, man mano che la finestra si riduce, gli stili reattivi fanno sì che i collegamenti nav scendano sotto l'intestazione, quindi in ultima analisi l'intestazione dovrebbe venire prima nella gerarchia.
I collegamenti interni dell'elenco sono separati da testo usando il em etichetta. Questi sottotitoli più piccoli sono piacevoli effetti aggiunti su una navigazione se c'è spazio sufficiente. Puoi dare ai visitatori un senso in più di ciò che è in ogni pagina senza apparire eccessivamente conflittuale.
Contenuto del corpo interno
Non ho incluso molti nuovi contenuti all'interno del corpo poiché ci stiamo concentrando sulla tipografia. Ma ci sono 3 stili di titolo unici che spingono da h1-h3 come classificati per importanza. Alcuni progettisti possono scegliere di includere anche h4 e persino h5 se necessario. La tipografia Copyfitting punta a lavorare su un posizionamento affiatato di contenuti sulla pagina. Si tratta di pianificare le tue parole scritte e adattare altri media in questo contesto (immagini, video, ecc.).
Penso che uno degli effetti più interessanti che potresti includere sia un design a virgolette o a blocco. Nota queste sono due idee molto diverse e servono a scopi molto diversi. Nel nostro esempio dimostrativo sto usando gli stili di preventivo CSS-Tricks per dimostrare come possiamo duplicare il contenuto dalle aree della pagina. Questi sembrano eccellenti nei post di blog o articoli online in cui si desidera enfatizzare determinate frasi o frasi.
I blockquotes sono un altro interessante meccanismo di progettazione che può apparire alla grande su quasi tutte le pagine. Questi non riguardano il contenuto del post, ma in genere citano qualcun altro. Le virgolette possono provenire da clienti passati, colleghi o, in realtà, chiunque sia onesto. Codrops ha recentemente pubblicato un articolo sulla costruzione di citazioni di blocco moderne che copre una serie di grandi idee per i web designer.
Manovrare con CSS3
Il codice HTML è molto standard e tipico di ciò che ti aspetteresti su qualsiasi pagina web. Le aree di interesse più complesse risiedono nel foglio di stile CSS in cui possiamo applicare effetti di transizione e tonnellate di altre fantastiche proprietà CSS3. Dovremmo iniziare dando una sbirciata alla struttura della pagina del documento.
Il .wrapper classe dovrebbe essere fornita su qualsiasi contenitore all'interno di un altro contenitore. Ad esempio, la nostra barra di navigazione estende l'intera larghezza della pagina, ma tutto il contenuto all'interno è contenuto in un div wrapper. L'esterno #topnav container usa una serie di proprietà CSS3 accoppiate al selettore di colori rgba (). Questo è specifico per gli sviluppatori web interessati a utilizzare la trasparenza alfa all'interno di tonalità di colore.
Possiamo vedere questo effetto non solo sullo sfondo, ma anche sull'ombra del riquadro. Questo effetto va bene quando si utilizza una navigazione statica fissa che scorre lungo la pagina e segue il visitatore.
L'intestazione della pagina utilizza una serie di proprietà animate quando passi il mouse sopra il link di ancoraggio. Questo vale anche per i numerosi elementi di navigazione che utilizzano anche trasparenza alfa. Alcuni browser meno recenti non supportano gli stili tipici dei prefissi dei produttori, ma esistono soluzioni per tutti i browser.
Lo stile dell'intestazione si adatta così bene perché possiamo aggiustare la barra di navigazione a un'altezza impostata e quindi utilizzare il altezza della linea proprietà per posizionare il testo centrato verticalmente. Quindi, in questo scenario, mentre ridimensioniamo la finestra del browser, il nostro logo della pagina galleggia sempre al centro. Quindi, una volta che la navigazione scende, ridimensioniamo l'altezza della linea in modo che tutto si adatti di conseguenza. Gli effetti di animazione CSS3 offrono un'esperienza di frontend più piacevole per l'utente.
Tendenze reattive
Gran parte del contenuto del corpo è già in grado di gestire contenuti sensibili ai dispositivi mobili. Negli ultimi anni ci sono stati molti articoli scritti sul responsive web design. Copiare la tua tipografia per piattaforme desktop e mobili è probabilmente una delle migliori idee che potresti seguire. Ciò consente a chiunque di accedere alle tue informazioni da qualsiasi dispositivo con accesso a Internet.
Nota come ho incluso gli effetti di transizione sia sugli elementi dell'elenco che sui link di ancoraggio. Inoltre stiamo selezionando tutte le proprietà che dovrebbero animare nel tempo, il che non è necessario, ma sembra fantastico. Quando nav scende sotto l'intestazione, tutti i margini e l'interlinea si regolano automaticamente usando le transizioni animate! Naturalmente, solo i visitatori che utilizzano browser Web moderni che supportano le transizioni CSS3 vedranno questi effetti. Ma vale la pena tenere per quanto riguarda un'esperienza utente di successo.
In realtà ho impostato due diverse query multimediali per quando lo schermo raggiunge 2 aree diverse. Innanzitutto quando rilasciamo un po 'sotto 800px, i collegamenti di navigazione rimuovono alcuni dei loro margini. Questo contrae i collegamenti più vicini, risparmiando spazio e impedendo loro di cadere troppo rapidamente. Quindi, dopo essere passati sotto 700px, il nav passerà sotto l'intestazione e ci adegueremo ai nuovi valori di altezza della linea.
Questo design reattivo potrebbe essere gestito in diversi modi. Puoi scegliere di nascondere semplicemente i collegamenti nav e tenerli legati su un link di attivazione per gli utenti mobili. Ritengo che questo metodo sia più adatto a mantenere tutti gli stili tipografici in questione senza sacrificare l'usabilità. L'intera area di intestazione è matura per la tipografia adattata unica e sarà certamente un punto di attenzione per gli utenti.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Spero che questo tutorial possa fornire uno sguardo più approfondito sulle pagine web di styling usando CSS3. La tipografia è ancora la sfaccettatura # 1 più importante per qualsiasi layout. Internet consente alle persone di inviare informazioni digitali in tutto il mondo in brevissimo tempo. I web designer stanno facendo il lavoro di messaggeri e corrieri con un'estetica più piacevole.
Se ti piace la pagina demo sentiti libero di scaricare anche una copia del mio codice sorgente. È possibile utilizzare questo codice senza licenze come di dominio pubblico. Sentiti libero di modificare e copiare questi stili per qualsiasi progetto, commerciale o altro. L'aggiunta di più risorse online può fornire solo un ulteriore passaggio per i nuovi progettisti che si spostano sul campo. Inoltre, se avete domande o commenti, vi preghiamo di condividere con noi nell'area di discussione post.