I 20 migliori tutorial CSS3 per migliorare le tue capacità di sviluppo web

I fogli di stile a cascata (CSS) stanno diventando più di un semplice linguaggio per lo styling del web. Sta lentamente diventando un linguaggio pienamente capace in grado di gestire aspetti dinamici del design. In molti modi, i CSS possono sostituire i tradizionali HTML e JavaScript per ottenere l'interattività e l'autodipendenza da librerie esterne e frammenti di codice. Tutti gli stili che vediamo oggi sul web sono direttamente tramite CSS. Poiché lo standard continua a crescere e migliorare, rimanere al passo con le cose è più importante che mai. I browser Web hanno reso il CSS, in modo molto simile all'HTML, il che a volte può significare che i browser più vecchi non sono in grado di supportare nuove funzionalità.

Iniziare con lo sviluppo web front-end e il web design è sicuramente diventato più facile negli ultimi anni. Vediamo molti più tutorial, guide e corsi a cui iscriversi. Ma alla fine, ciò che si riduce è la volontà di lavorare con le competenze appena apprese e applicarle in progetti di vita reale. CSS è uno di quei linguaggi di scripting che richiedono all'utente di utilizzare modelli e opzioni di layout specifici da applicare a linguaggi come JavaScript e HTML. Quando si crea un nuovo sito Web con HTML e CSS, è meglio lavorare passo dopo passo per applicare pienamente ciò che si sta imparando.

Il nostro obiettivo oggi è quello di coprire i tutorial CSS3 più importanti e moderni dei principali sviluppatori e designer front-end. Tutti i tutorial qui sono basati sugli standard più recenti per aiutarti a diventare un web design migliore. Alla fine del post, menzioneremo anche un paio di risorse di apprendimento CSS3 per un ulteriore apprendimento. Come ogni linguaggio di programmazione, per capire meglio qualcosa, è meglio che ci permettiamo di fare del codice ripetitivo, sia attraverso una piattaforma online dinamica o all'interno dei nostri editor di codice personali.

Modificare le immagini nei CSS

L'uso delle immagini nel web design ha perfettamente senso, ma la storia diventa più tecnica di così. Sebbene sia divertente utilizzare le foto di tuo gradimento nei tuoi progetti web, a volte ci sono cose che dobbiamo prendere in considerazione. La dimensione del file immagine è appropriata per il nostro progetto? Possiamo aggiungere filtri tramite CSS piuttosto che tramite app esterne come Photoshop? Cosa possiamo davvero fare con i CSS per migliorare l'aspetto delle nostre foto? Una Kravets ci accompagna in un viaggio di 15 minuti. In esso, parla della modifica delle immagini CSS e di come possiamo trasformare i CSS in modo che agiscano più come una piattaforma software di modifica delle immagini autonoma, piuttosto che solo un modo per manipolare gli aspetti del design.

Utilizzo dei CSS moderni per creare una griglia di immagini reattiva

Continuando con il tema delle immagini, ecco George Martsoukos. Ci presenta un semplice tutorial leggero su come utilizzare le moderne funzioni CSS3 per creare griglie di immagini reattive. Le griglie di immagini (o talvolta chiamate gallerie) riguardano la visualizzazione di contenuti visivi nel contesto di una griglia. Questo tipo di griglie diventa utile a coloro che condividono la propria fotografia o utilizzano una griglia di immagini come un modo per espandere gli elementi del proprio portfolio. In questo tutorial, George ci illustra il processo per garantire che le griglie che creiamo siano ugualmente reattive alle applicazioni desktop e mobili.

Impara il layout CSS

Il web design è tutto sui layout. Creiamo un layout e poi utilizziamo altri elementi e funzioni disponibili per modellarlo, per costruirci sopra. Ed è risaputo che gran parte dei layout di web design dipendono totalmente dai CSS. L'apprendimento dei CSS ci consente di saperne di più sui layout dei siti Web e sul loro funzionamento. Ma se non hai già la conoscenza, Mikito Takada ha scritto un libro online diviso in 5 diversi capitoli su come creare layout con CSS3, correttamente. Parla del posizionamento e anche dell'allineamento di diversi elementi della scatola per iniziare a creare gli elementi della griglia, approfondisce il posizionamento e le funzionalità disponibili in questo momento. Dedica gli ultimi due capitoli a Flexbox (funzione CSS). C'è anche un articolo sui migliori suggerimenti e trucchi di stile CSS dal suo viaggio di essere un web designer.

Note di aggiornamento CSS

Note e guide di stile sono la forza trainante per molti dei web designer. È abbastanza essenziale ricordarsi di mettere da parte le nostre risorse note preferite per un più facile riferimento futuro. E per quanto riguarda CSS3, CSS Refresh Notes è tra i preferiti della comunità GitHub; centinaia di stelle e un sacco di contributi della community su come espandere questa risorsa per essere il migliore che ci sia. CSS Refresh Notes si concentra sugli aspetti più cruciali dello sviluppo CSS3. Consente inoltre ai progettisti di attingere rapidamente alle note di riferimento per la maggior parte delle funzionalità CSS3. Che si tratti di posizionamento o selettori con cui hai bisogno di aiuto, forse query multimediali per il design reattivo o come utilizzare al meglio SVG all'interno dei tuoi modelli di progettazione CSS3, queste note torneranno utili anche se non ti senti subito così.

Variabili: la spina dorsale dell'architettura CSS

I preprocessori sono davvero decollati negli ultimi anni, semplici framework e set di strumenti che consentono ai progettisti di estendere le funzionalità di base di CSS3 con cose come mixin, funzioni e variabili. Il tipo di funzionalità che di solito ti aspetteresti di vedere in un linguaggio di programmazione hardcoded come JavaScript. Probabilmente, tutti dovrebbero essere esperti in CSS3 per essere in grado di codificare senza problemi senza utilizzare preprocessori. Tuttavia, cose come il tempo di sviluppo rimangono importanti. Le variabili aiutano a usare CSS3 in un ambiente più dinamico. Ecco perché Karen Menezes ha messo insieme uno dei contenuti più estesi su questo argomento che tu abbia mai trovato.

Progettare un layout di pagina del prodotto con Flexbox

Flexbox è una nuova modalità di layout CSS3 volta ad aiutare i progettisti a ottimizzare al meglio i loro progetti per vari dispositivi. La nuova funzione è ancora abbastanza nuova e estranea a molti, ma l'uso di Flexbox sta diventando sempre più popolare in campi come l'eCommerce. Questo tutorial CSS3 proviene dal team di Shopify, dove stanno facendo un rapporto su come sono riusciti a creare uno dei loro nuovissimi modelli Shopify con l'aiuto di Flexbox, che cosa ha richiesto il processo e come appariva il risultato finale. Conoscendo la reputazione di Shopify nel mercato dell'eCommerce e avendo seguito noi stessi il tutorial, questa potrebbe essere una delle guide più utili per aiutarti a capire di più su Flexbox e su come puoi iniziare a utilizzarlo nei tuoi progetti web.

Tutto quello che so sulla tipografia web reattiva con CSS

Quando le persone pensano al web design reattivo, per la maggior parte del tempo pensano di trasformare un sito web standard in qualcosa che funzioni bene con i dispositivi mobili. Non è una falsa comprensione, ma c'è sicuramente dell'altro. Zell Liew ha scritto un brillante articolo su come lavorare con la tipografia web reattiva e cosa comporta stabilire una solida base per i tuoi modelli tipografici su tutti i tipi di dispositivi. Inutile dire che anche la sezione dei commenti dei tutorial è diventata di immenso aiuto. Tutto questo grazie al contributo aggiuntivo di altri web designer della community.

Presentazione CSS più semplice

Una presentazione con CSS3? Dev'essere impossibile! Tali concetti sono generalmente rivolti a linguaggi come JavaScript o jQuery. Questi linguaggi semplificano la creazione di contenuti dinamici in movimento. Ma per quanto riguarda CSS3? Jonathan Snook in realtà non ci promette nulla di nuovo, ma ci sta dando un esempio di come possiamo utilizzare gli effetti di animazione CSS3 per creare esperienze di presentazione senza dover utilizzare risorse esterne, come ad esempio JavaScript. Il suo piccolo tutorial introduttivo alle animazioni CSS3 è l'esempio perfetto di come la creatività abbia la meglio sul dubbio.

Moduli CSS — Risolvere le sfide dei CSS su larga scala

È inevitabile che i CSS crescano oltre i loro limiti attuali, proprio come ha fatto JavaScript. Guardando indietro al passato molto antico dei CSS, abbiamo fatto molta strada dall'essere in grado di manipolare i colori e l'aspetto degli elementi, in questi giorni i CSS forniscono una cassetta degli attrezzi molto più complessa per gli sviluppatori che desiderano risiedere in un unico linguaggio per fare tutto il loro compiti di sviluppo. I moduli CSS servono ad aiutare gli sviluppatori ad allineare meglio il loro codice CSS che può quindi essere ridimensionato quando l'app o il progetto inizia a crescere senza controllo. In questo magnifico tutorial, Tom Cornilliac ci spiega come possiamo combinare diversi fogli di stile e usarli come moduli per i nostri progetti che lanciamo attraverso framework come React. Chi sapeva che importare fogli di stile e accedere alle loro funzioni predefinite sarebbe stato così facile.

Schemi di visualizzazione dei contenuti

Il contenuto è tutto. Anche quei siti che non dispongono delle adeguate capacità di presentazione del sito Web e sono ancora in grado di mantenere un'elevata qualità dei contenuti, di solito sono quelli a cui le persone fanno più riferimento. Buoni esempi di ciò sono siti come Reddit e Hacker News, siti ad alto contenuto di contenuti, senza reali imposizioni all'interno del design dei siti web. I modelli di visualizzazione del contenuto non riguardano i modelli di visualizzazione, ma il modo in cui il design complessivo degli elementi di contenuto interagisce per fornire un'esperienza di navigazione che si integra completamente tra la visualizzazione del contenuto e il contenuto effettivo. Questo tutorial di Dan Mall è una delle guide più concise sui modelli di visualizzazione dei contenuti e il suo rapporto sull'esperienza parla da solo: avendo lavorato con progetti di riprogettazione per siti come TechCrunch, e anche noi dobbiamo ammettere che il nuovo design di TechCrunch è piuttosto elegante!

Animazione di elementi ritagliati in SVG

Le animazioni SVG e CSS3 sono tra gli argomenti più di tendenza nello sviluppo web in questo momento. Ciò è dovuto al fatto che stiamo iniziando ad allontanarci dalla necessità di utilizzare immagini pesanti e file di animazione per visualizzare i nostri contenuti, e invece i designer stanno imparando a imitare quelle animazioni esatte utilizzando le lingue native nel browser. Dennis Gaebel Jr ci offre una panoramica sull'utilizzo del ritaglio CSS per ottenere effetti di animazione straordinari, oltre all'utilizzo di sbalorditive immagini vettoriali.

CSS espressivo

Espressivo è stato un termine coniato nella comunità degli sviluppatori per un po' di tempo. È un termine vagamente mutuato dal concetto di espressività nei linguaggi di programmazione. Un linguaggio di programmazione è generalmente considerato espressivo se ti consente di esprimere naturalmente i tuoi pensieri in un codice facile da capire. In generale, "espressivo" non è una novità, e gli sviluppatori ne hanno parlato per anni prima, ma ogni volta che viene rilasciata una nuova funzionalità in natura, gli sviluppatori e soprattutto i designer impiegano del tempo per adattarsi al loro flusso di lavoro espressivo, quindi a volte i progetti possono diventare disordinati e coinvolti in troppe funzioni che cercano di funzionare tutte in una volta. Espressivo è l'approccio leggero alla scrittura di codice che funziona bene, ha un bell'aspetto ed è facile da mantenere. Usalo come guida di stile e non dimenticare di esprimere la tua gratitudine all'autore; John Polacek.

Animazione in Responsive Design

Come già appreso in tutto l'articolo, animazioni e responsive sono due argomenti molto scottanti per i designer e combinare i due insieme sta diventando sempre più interessante per coloro che desiderano testare veramente i limiti delle moderne capacità di sviluppo web. Val Head ha pubblicato un articolo molto approfondito sull'utilizzo delle animazioni CSS3 all'interno di progetti web reattivi e su come presentare al meglio queste animazioni dove non perdono il loro valore. Occupa l'articolo con diverse dimostrazioni di vetrina da altri siti Web di successo che hanno stabilito le loro animazioni sia su desktop che su dispositivi mobili.

Perché sono entusiasta delle variabili CSS native

Le proprietà personalizzate CSS, note anche come variabili, aiutano gli sviluppatori CSS3 a velocizzare il processo di sviluppo CSS3 abilitando la funzionalità dinamica. I preprocessori lo fanno già da un po', e molti si sono già adattati all'idea di utilizzare un preprocessore in modo permanente, ma inevitabilmente tutte queste funzionalità (disponibili nello standard) troveranno la loro strada nei browser moderni, perché niente è meglio che sviluppare in ambiente nativo, senza doversi preoccupare della manutenzione e dell'affidabilità del software esterno. Ingegnere di Google, Philip Walton ha impiegato del suo tempo prezioso per mettere insieme un lavoro molto approfondito sulla nuova funzione CSS e sul motivo per cui la community dovrebbe abbracciare tale cambiamento e non preoccuparsi di cose stupide come l'aspetto della sintassi.

L'animazione del cuore di Twitter in CSS completo

Twitter è stato su TUTTE le notizie e per molte buone ragioni. Uno di questi motivi è finito perché Twitter ha deciso di cambiare il pulsante "Preferiti" con un'icona "Amore". È una mossa audace ma necessaria per stabilire un'atmosfera più orientata alla comunità intorno al sito. L'annuncio è stato dato su uno degli account ufficiali di Twitter, attraverso un'immagine GIF animata. Ha mostrato una fantastica animazione "heart splash" accompagnata da testo. Nicolas Escoffier, un designer, era interessato a vedere se sarebbe stato in grado di creare un'animazione simile usando solo puro CSS3, e indovinate un po': ci è riuscito e la comunità non potrebbe essere più felice!

Seriamente, usa i caratteri delle icone

SVG sta rendendo il Web un posto migliore. Anche se gli sviluppatori fino ad oggi devono tenere conto del fatto che molti stanno ancora navigando sul Web da versioni obsolete di sistemi operativi mobili e tale intuizione richiede allo sviluppatore di lavorare molto duramente per far funzionare le cose. I caratteri delle icone vengono ancora appresi da altri. Ma questa funzionalità sta diventando molto popolare nei moderni mercati degli sviluppatori in cui gli sviluppatori vogliono creare esperienze senza interruzioni e piacevoli con cui lavorare.

Ingrandimento del prodotto CSS — senza JavaScript

Nell'eCommerce è zoom-in, ma anche ingrandimento che consente ai clienti di ingrandire il prodotto ed esplorarne gli aspetti meno visibili agli occhi. È sicuramente un bell'effetto da avere, ma per molti è essenziale per il successo della propria attività. Michael Weaver è un hacker CSS3 che ha avuto l'idea di creare un widget di ingrandimento senza l'uso di alcun codice JavaScript, un'impresa che ha compiuto con successo, e ora chiunque può sfogliare il suo codice e creare widget simili sui propri siti.

Tabelle davvero reattive utilizzando CSS3 Flexbox

Le tabelle ci aiutano ad allineare le nostre informazioni in modo più amichevole. A volte, un elemento di tabella ben strutturato non appare nemmeno come tale. Ma con l'estensibilità di jQuery, HTML5 e JavaScript, possiamo far sì che le nostre tabelle agiscano più come documenti Excel che altro. Vasan Subramanian ha pubblicato un approfondito tutorial su come utilizzare la funzione Flexbox di CSS3 per creare tabelle sorprendenti e reattive per il tuo prossimo sito Web o progetto di app.

Ottimizza la consegna CSS

L'ultimo tutorial CSS3 riguarderà la velocità e come codificare meglio i nostri fogli di stile per garantire almeno un aumento di velocità oltre l'ordinario. Optimize CSS Delivery è una guida di stile tecnica che mostra come scrivere codice CSS nativo senza compromettere alcuna risorsa. Scrivere CSS dovrebbe essere divertente, ecco di cosa tratta questo tutorial.

Risorse di apprendimento per CSS3 moderni

Senza una base adeguata, imparare dai tutorial a volte può sembrare piuttosto scoraggiante. Ha senso, un tutorial può coprire solo così tanto per un argomento particolare prima che si esaurisca, i tutorial sono per coloro che hanno già costruito qualcosa e desiderano estendere quei progetti con nuove funzionalità, concetti interessanti e altre possibilità ispirate dalla comunità. E per aiutarti a capire meglio i tutorial CSS3 di cui abbiamo parlato nel post, elencheremo alcune risorse davvero fantastiche e gratuite per imparare CSS3 (anche moderni) online.

Il tutorial completo di CSS3

Ancora una volta, sottolineiamo la necessità di mostrare risorse tutorial che ti aiuteranno a imparare tutto sui CSS. Questa risorsa è un tutorial CSS3 completo che parla delle funzionalità CSS3 e dei loro usi nel mondo reale. Questo tutorial ha discusso in modo completo i selettori, i selettori avanzati, i modelli di box, i testi e i caratteri e altre funzionalità, con un sacco di esempi con cui iniziare a giocare. Chiunque inizi lo sviluppo CSS sarà in grado di realizzare rapidamente i propri progressi da pochi semplici progetti.

Tutorial CSS

W3Schools è la casa dello sviluppo front-end per principianti. Questa risorsa ha aiutato milioni e milioni di sviluppatori a comprendere meglio alcune parti di HTML e CSS. Offre anche contenuti didattici gratuiti che non troverai da nessun'altra parte. W3Schools è il luogo di apprendimento CSS perfetto per coloro che sono veramente inesperti con il web e desiderano imparare rapidamente.

HTML e CSS

Non puoi imparare CSS3 o HTML5 da zero e non provare Codecademy. Anche la sezione delle testimonianze è piena di recensioni su come le persone sono state in grado di trovare lavori fantastici e ben pagati dopo aver terminato il loro apprendimento con Codecademy. Molti dei siti di esercitazione insegnano la sintassi diretta tramite esempi di codice. D'altra parte, Codecademy ti "costringe" a giocare con il codice. Questo viene fatto attraverso attività dirette e interattive assegnate dalle persone che stanno dietro ogni corso di apprendimento. Tali piattaforme sono diventate molto popolari e sono ora disponibili per quasi tutti i linguaggi di programmazione. Un modo molto efficace per imparare, senza dubbio.

Impara il layout CSS

Abbiamo già appreso in questo post in precedenza che il layout è il fondamento di CSS3. Ma ora è il momento di prendere davvero questo concetto per un giro. Attingiamo a un esempio futuristico di come funzionano le proprietà del layout CSS3 e cosa possiamo fare con esse. Assegnati qualche giorno per completare questo tutorial. Dopodiché, sarai a un solido livello intermedio di comprensione delle proprietà del layout e del loro utilizzo.

CSS – Imparare il Web

Mozilla Developer Network rimane una delle fonti principali per tutto ciò che riguarda HTML5, CSS3 e JavaScript. Completamente guidato dalla comunità, MDN offre guide di stile per tutte le lingue menzionate, nel modo più adatto al tuo ritmo di apprendimento e alla comprensione generale dei CSS3 in primo luogo.