I 20 migliori tutorial CSS3 per migliorare le tue capacità di sviluppo web
Pubblicato: 2022-05-06Cascading Style Sheets (CSS) sta diventando più di un semplice linguaggio per lo stile del web. Sta lentamente diventando un linguaggio pienamente capace in grado di gestire aspetti dinamici del design. In molti modi, CSS può sostituire HTML e JavaScript tradizionali per ottenere l'interattività e l'auto-dipendenza 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 eseguito il rendering del CSS, proprio come l'HTML, il che a volte può significare che i browser meno recenti non sono in grado di supportare nuove funzionalità.
Negli ultimi anni, iniziare con lo sviluppo web front-end e il web design è diventato più facile. Vediamo molti più tutorial, guide e corsi a cui iscriversi. Ma alla fine, ciò a cui si riduce è la volontà di lavorare con le abilità 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 completamente ciò che viene appreso.
Oggi, il nostro obiettivo è quello di coprire i tutorial CSS3 più importanti e moderni dei principali sviluppatori e designer front-end. Tutti i tutorial qui si basano 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 ulteriori apprendimenti. Come ogni linguaggio di programmazione, per capire meglio qualcosa, dovremmo permetterci di fare un po' di programmazione ripetitiva, sia attraverso una piattaforma online dinamica che all'interno dei nostri editor di codice personali.
Modifica di immagini in 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 di cui dobbiamo tenere conto. La dimensione del file immagine è appropriata per il nostro progetto? Possiamo aggiungere filtri tramite CSS anziché tramite app esterne come Photoshop? Cosa possiamo fare con i CSS per migliorare l'aspetto delle nostre foto? Una Kravets ci porta 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 di CSS moderni per creare una griglia di immagini reattiva
Continuando con il tema delle immagini, ecco George Martsoukos. 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. Questi tipi di griglie diventano utili per coloro che condividono la propria fotografia o utilizzano una griglia di immagini 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.
Note di aggiornamento CSS
Le note e le guide di stile sono la forza trainante per molti dei web designer. Dobbiamo ricordarci di mettere da parte le nostre risorse di note preferite per un riferimento futuro più facile. E per quanto riguarda CSS3, CSS Refresh Notes è tra i preferiti della community di GitHub; centinaia di stelle e un sacco di input della community su come espandere questa risorsa per essere il migliore che c'è. CSS Refresh Notes si concentra sugli aspetti più cruciali dello sviluppo di 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, magari di media query per il design reattivo o di come utilizzare al meglio SVG all'interno dei tuoi modelli di progettazione CSS3, queste note torneranno utili anche se non ti senti così.
Variabili: la spina dorsale dell'architettura CSS
Negli ultimi anni sono decollati i preprocessori, semplici framework e set di strumenti che consentono ai progettisti di estendere le funzionalità CSS3 di base con mixin, funzioni e variabili. Di solito ti aspetteresti di vedere il tipo di funzionalità in un linguaggio di programmazione hardcoded come JavaScript. Probabilmente, tutti dovrebbero essere esperti in CSS3 per programmare senza utilizzare i preprocessori senza intoppi. Tuttavia, cose come il tempo di sviluppo rimangono importanti. Le variabili aiutano a utilizzare CSS3 in un ambiente più dinamico. Ecco perché Karen Menezes ha messo insieme uno dei più ampi contenuti su questo argomento che tu abbia mai trovato.
Progettazione di un layout di pagina di prodotto con Flexbox
Flexbox è una nuova modalità di layout CSS3 volta ad aiutare i designer a ottimizzare al meglio i loro progetti per vari dispositivi. La nuova funzione è ancora abbastanza nuova ed 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 segnalando come sono riusciti a creare uno dei loro nuovi modelli Shopify con l'aiuto di Flexbox, cosa ha richiesto il processo e come appariva il risultato finale. Conoscendo la reputazione di Shopify nel mercato dell'eCommerce e dedicandosi al tutorial noi stessi, questa potrebbe essere una delle guide più utili per aiutarti a capire di più su Flexbox e su come iniziare a utilizzarlo nei tuoi progetti web.
Presentazione CSS più semplice
Una presentazione con CSS3? Dev'essere impossibile! Tali concetti sono solitamente rivolti a linguaggi come JavaScript o jQuery. Questi linguaggi semplificano la creazione di contenuti dinamici in movimento. Ma che dire di CSS3? Jonathan Snook non ci promette nulla di nuovo, ma ci fornisce 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à vinca il dubbio.
Moduli CSS — Risolvere le sfide dei CSS su larga scala
I CSS cresceranno inevitabilmente oltre i suoi attuali limiti, 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, oggi CSS fornisce 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 perdere il controllo. In questo magnifico tutorial, Tom Corniliac 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 facile.
Animazione di elementi ritagliati in SVG
Le animazioni SVG e CSS3 sono tra gli argomenti più di tendenza nello sviluppo web. 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 esatte animazioni usando i linguaggi nativi del browser. Dennis Gaebel Jr ci offre una panoramica dell'utilizzo del ritaglio CSS per ottenere effetti di animazione straordinari e l'utilizzo di straordinarie immagini vettoriali.
CSS espressivo
Espressivo è stato un termine coniato nella comunità degli sviluppatori per un po' di tempo. È un termine vagamente preso in prestito dal concetto di espressività nei linguaggi di programmazione. Un linguaggio di programmazione è generalmente considerato espressivo se ti permette di esprimere naturalmente i tuoi pensieri in un codice di facile comprensione. In generale, 'espressivo' non è niente di nuovo. Gli sviluppatori ne hanno parlato per anni prima. Tuttavia, ogni volta che una nuova funzionalità viene rilasciata in natura, gli sviluppatori e in particolare i designer impiegano del tempo per adattarsi al loro flusso di lavoro espressivo, quindi a volte i progetti possono diventare tutti disordinati e coinvolti in troppe funzioni che cercano di funzionare tutte in una volta. Expressive è l'approccio leggero alla scrittura del 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 nel design reattivo
Come già appreso in tutto l'articolo, le animazioni e il responsive sono due argomenti molto caldi per i designer e combinare i due sta diventando sempre più interessante per coloro che desiderano testare davvero 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 demo vetrina di altri siti Web di successo che hanno stabilito le loro animazioni su desktop e 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 da un po' di tempo. Molti si sono già adattati all'idea di utilizzare un preprocessore in modo permanente. Tuttavia, inevitabilmente tutte queste funzionalità (disponibili nello standard) troveranno la loro strada nei browser moderni. Niente è meglio che sviluppare in ambiente nativo, senza doversi preoccupare della manutenzione e dell'affidabilità del software esterno. Ingegnere di Google, Philip Walton si è preso il suo prezioso tempo per mettere insieme un lavoro molto approfondito sulla nuova funzione CSS e sul perché la comunità dovrebbe abbracciare tale cambiamento e non preoccuparsi di cose stupide come l'aspetto della sintassi.
Animazione del cuore di Twitter in CSS completo
Twitter è stato TUTTO al centro delle notizie e per molte buone ragioni. Uno di questi motivi è che 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à attorno 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 CSS3 puro, e indovina 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 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 sodo per far funzionare le cose. Altri stanno ancora imparando i caratteri delle icone. Ma questa funzionalità sta diventando molto popolare nei moderni mercati degli sviluppatori in cui gli sviluppatori vogliono creare esperienze piacevoli e senza interruzioni con cui lavorare.
Ingrandimento del prodotto CSS — senza JavaScript
Nell'eCommerce, l'ingrandimento e l'ingrandimento consentono ai clienti di ingrandire più da vicino il prodotto ed esplorarne gli aspetti meno visibili. È un effetto interessante 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 utilizzare alcun codice JavaScript, un'impresa che ha compiuto. 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 della tabella ben disegnato non appare nemmeno come tale. Ma con l'estendibilità di jQuery, HTML5 e JavaScript, possiamo fare in modo che le nostre tabelle agiscano più come documenti Excel che altro. Vasan Subramanian ha pubblicato un tutorial approfondito sull'utilizzo della funzione Flexbox di CSS3 per creare tabelle straordinarie 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 le risorse. Scrivere CSS dovrebbe essere divertente, ed è di questo che tratta questo tutorial.
Risorse di apprendimento per i CSS moderni3
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 costruito qualcosa in precedenza e desiderano estendere quei progetti con nuove funzionalità, concetti interessanti e altre possibilità ispirate dalla comunità. E per aiutarti a comprendere meglio i tutorial CSS3 di cui abbiamo parlato nel post, elencheremo alcune risorse davvero fantastiche e gratuite per l'apprendimento dei 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 completo sui CSS3 che parla delle funzionalità dei CSS3 e dei loro usi nel mondo reale. Questo tutorial ha discusso in modo completo i selettori, i selettori avanzati, i modelli di scatole, i testi e i caratteri e altre funzionalità, con un sacco di esempi con cui iniziare a giocare. Chiunque inizi lo sviluppo CSS sarà rapidamente in grado di realizzare i propri progressi da pochi semplici progetti.
Esercitazione CSS
W3Schools è la sede 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 aggiornarsi piuttosto 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 tutorial insegnano la sintassi diretta attraverso esempi di codice. D'altra parte, Codecademy ti "costringe" a giocare con il codice. Questo viene fatto attraverso compiti diretti e interattivi assegnati dalle persone dietro ogni corso di apprendimento. Tali piattaforme sono diventate molto popolari e ora sono 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 è alla base dei CSS3. Ma ora è il momento di prendere in giro questo concetto. 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 principali fonti per tutto ciò che riguarda HTML5, CSS3 e JavaScript. Completamente guidato dalla comunità, l'MDN offre guide di stile per tutte le lingue menzionate, in un modo che è più adatto al tuo ritmo di apprendimento e, in primo luogo, alla comprensione generale dei CSS3.