20 tutorial CSS che non hai mai saputo potrebbero essere così semplici

Sono finiti i tempi in cui un sito web parlava solo di testo. Ora l’apprendimento dell’HTML non è sufficiente perché i CSS (Cascading Style Sheets) sono diventati lo standard per la creazione di fantastiche esperienze online. Alimenta l’aspetto generale di un sito Web e lo rende attraente per gli utenti. Quando ho iniziato (8 anni fa), mi è stato detto di imparare sia HTML che CSS; poiché queste erano le lingue obbligatorie per lo sviluppo di pagine web. Ora mi rendo conto che imparare i CSS di allora mi è sembrato un compito scoraggiante per me. Tuttavia, con una guida adeguata, sono riuscito a ingurgitarlo in un paio di giorni.

Internet si è evoluto così rapidamente che quasi tutto è disponibile e l’apprendimento di qualcosa di nuovo è diventato questione di pochi clic. Questo è il caso dei CSS, dove diversi designer e sviluppatori hanno messo insieme lezioni gratuite per aiutarti ad apprendere le basi dei CSS così come le tecniche più avanzate per migliorare le tue abilità. Ma scegliere un buon tutorial dal lotto non è sempre così facile.

Quindi, vuoi imparare i CSS? Buone notizie: ci sono un sacco di risorse online gratuite là fuori, che coprono da principianti a livelli avanzati. Ho raccolto questi 20 tutorial CSS per aiutarti a iniziare. Sono in inglese ma con Google Translate con un click si ottiene una traduzione in italiano comprensibilissima.

Introduzione ai CSS – Mozilla Developer Network (MDN)

css di mdn

Questa è la guida completa alla soluzione per tutti coloro che non vedono l’ora di imparare i CSS. Gli sviluppatori possono iniziare a padroneggiare il linguaggio dalle basi ai concetti avanzati come cascata, ereditarietà, debugging, ecc.

Tutto su “float”

tutto su galleggianti

L’allineamento è parte integrante del design. Quindi, gli sviluppatori devono prendersene cura. Questo è uno dei tutorial più precisi sull’apprendimento del concetto di float nei CSS. È una proprietà di posizionamento che può essere assegnata a sinistra o a destra.

Transizioni e animazioni

transizioni rimbalzanti

Un elemento web che si modifica al passaggio del mouse non è nuovo. Potresti aver riscontrato questo effetto mentre trascini il cursore sui pulsanti di chiamata ai pulsanti di azione. Tale effetto è ottenuto tramite una proprietà di transizione nei CSS. Indica al browser quali aspetti di un elemento deve animare se le sue proprietà cambiano. Questo è un incredibile tutorial per aggiungere animazioni e transizioni in CSS.

Considerazioni sull’altezza delle colonne nei CSS

considerazioni sull'altezza delle colonne

Lynda è una grande risorsa per gli sviluppatori e questo tutorial spiega come personalizzare la dimensione delle colonne del tuo sito web. Ciò consente ai browser di calcolare diverse altezze degli elementi.

Navigazione in dissolvenza a schermo intero

navigazione in dissolvenza su larga scala

Questo semplice tutorial mostra come è possibile ottenere l’effetto di una navigazione sbiadita senza scrivere una singola riga di JavaScript.

Introduzione a Griglie CSS

Getting Started with CSS Grids e1490705541439

Le griglie sono parte integrante di un sito Web che potrebbero non essere viste fisicamente, ma sono sempre presente. Con questo tutorial, puoi iniziare a creare rapidamente le tue griglie.

Crea un menu a effetto in CSS3

Creating a Stunning Menu in CSS3 e1490705625524

La barra di navigazione svolge un ruolo importante nella definizione dell’esperienza utente di un sito web. Esistono diverse tecniche per caricare il menu del tuo sito ma fare tutto con i CSS è una mossa intelligente. Questo semplice tutorial ti aiuta a raggiungere l’obiettivo senza ulteriori problemi.

Effetto bordo “cucito” nei CSS

Stiched Look e1490705676456

Questo tutorial ti aiuterà a creare un blocco rettangolare arrotondato con un aspetto “cucito” (o tratteggiato). Scoprirai come costruirlo guardando CodePen.

Gettng Clever with CSS3 Shadows e1490705728947

Le ombre aggiungono un aspetto vivace al design del tuo sito e migliorano l’esperienza utente. Questo tutorial coprirà ogni opzione a tua disposizione durante la progettazione di vari tipi di ombre.

Vetrina dei prodotti con CSS3

Product Showcase with CSS3 e1490705774361

Se stai costruendo un sito Web per mostrare un prodotto, visualizzarlo correttamente è fondamentale. Dovrebbe essere fatto con le giuste proprietà stilistiche. Questo tutorial completo ti aiuterà a costruire uno di questi layout da zero.

Elegante menu a discesa per Impostazioni utente

Stylish User Setting Menu e1490705831626

Treehouse  è il punto di riferimento per esercitazioni, articoli e video per imparare i CSS. Qui puoi imparare a creare un menu delle impostazioni utente personalizzato in CSS3.

Triangoli CSS

CSS Triangles e1490705870967

Questo è un tutorial passo-passo interattivo per creare triangoli animati con CSS.

CSS3 Buttons e1490705929387

In questo tutorial CSS, approfondisci i dettagli sulla creazione di pulsanti in CSS3.

Creazione di caselle di controllo e pulsanti di scelta personalizzati

Custom Checkboxes and Radio Buttons e1490706004884

Questo non è un normale tutorial per creare caselle di controllo e pulsanti di opzione personalizzati. Invece, imposta i selettori predefiniti per renderli invisibili configurando la loro opacità a zero e quindi li sostituisce con la grafica. Ciò consentirà di alternare la grafica tra le versioni selezionate e deselezionate.

Esercitazione CSS reattiva a una pagina

One Page Responsive CSS Tutorial e1490706051410

Questa spiega come creare un semplice tutorial reattivo di una pagina in CSS3. Imparerai sia perché e come usarlo acquisendo una conoscenza di base dei CSS.

CSS Flexbox Grid

CSS Flexbox Grid e1490706107392

Flexbox è una delle modalità di layout in CSS che ha guadagnato molta popolarità. Questo tutorial si propone di fornire una conoscenza di base di CSS Flexbox e dimostrare come è possibile utilizzarlo nelle tue pagine web.

Tipografia fluida

Fluid Typography e1490706151228

A seconda delle dimensioni dello schermo, puoi regolare la dimensione del carattere e altre proprietà correlate per creare un effetto fluido per il testo del tuo sito web. Questo tutorial spiegherà come modificare le unità viewport e calc() per aiutarti a raggiungere tale effetto.

Lettore video in CSS3

Video Player in CSS e1490706192419

I video svolgono un ruolo fondamentale nel migliorare la leggibilità dei contenuti del tuo sito. Non commercializza solo un prodotto ma garantisce anche un migliore coinvolgimento dell’utente. Questo è un tutorial dettagliato che spiega il processo di codifica di un lettore video con CSS3.

Nascondere cose con i CSS

Hiding Things with CSS e1490706234353Impostare i valori di opacity0visibilityhidden e  display a nonesono alcuni dei modi per nascondere un elemento nei CSS. Questo tutorial fa esattamente la stessa cosa, cioè ti guida a rendere le cose invisibili con i CSS.

SVG Christmas icona illuminata e animato con CSS

SVG Animated Icon e1490706270175

Animare SVG per creare bellissime icone è un effetto sorprendente nei CSS. Questo video dimostra come creare un’icona ispiratrice per le luci di Natale nei CSS. Puoi leggerlo e crearne uno per te stesso.

In chiusura!

Sono certo che questi tutorial ti aiuteranno a migliorare non solo le competenze di base ma anche a fornire un apprendimento avanzato. Per una migliore comprensione, ogni tutorial offre diversi concetti che forniscono esempi visivi e basati su codice. Quale di questi ti è piaciuto di più?

fonte: https://creativemarket.com/blog/easy-css-tutorials


Se vuoi sostenerci, puoi farlo acquistando qualsiasi cosa dai diversi link di affiliazione che abbiamo nel nostro sito o partendo da qui oppure alcune di queste distribuzioni GNU/Linux che sono disponibili sul nostro negozio online, quelle mancanti possono essere comunque richieste, e su cui trovi anche PC, NAS e il ns ServerOne. Se ti senti generoso, puoi anche donarmi solo 1€ o più se vuoi con PayPal e aiutarmi a continuare a pubblicare più contenuti come questo. Grazie!

Hai dubbi o problemi? Ti aiutiamo noi!

Se vuoi rimanere sempre aggiornato, iscriviti al nostro canale Telegram.
Se vuoi ricevere supporto per qualsiasi dubbio o problema, iscriviti alla nostra community Facebook o gruppo Telegram.
Cosa ne pensi? Fateci sapere i vostri pensieri nei commenti qui sotto.
Ti piace quello che leggi? Per favore condividilo con gli altri.
Amazon Music
Scopri le ultime offerte per dischi ssd su Acquista su Amazon
Scopri le ultime offerte per memorie RAM DDR su Acquista su Amazon
Scopri le ultime offerte per Chromebook su Acquista su Amazon
Scopri le ultime offerte per Raspberry su Acquista su Amazon

Potrebbero interessarti anche...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.