CSS

In questa lezione realizzeremo un menù responsive utilizzando html5 e css3. In particolare ad una risoluzione minore o uguale di 768 pixel si vedrà quello che spesso viene definitivo humburger menù, rappresentato da 3 barre orizzontali in un unico quadrato. Ad un risoluzione maggiore di 768 pixel invece si vedrà la navbar regolarmente. Menù responsive … Leggi tutto

La proprietà opacity nei CSS specifica la trasparenza di un elemento. Questa proprietà può assumere un valore tra 0,0 e 1,0, estremi inclusi. Più basso è il valore e più trasparente sarà l’elemento a cui è applicata. Opacity su un’immagine – primo esempio In questo primo esempio vedremo l’effetto opacity su un’immagine. Supponiamo di avere … Leggi tutto

In questa lezione parleremo dei CSS ed in particolare delle media query attraverso alcuni esempi pratici, utili per capirne bene il funzionamento. Ricordiamo che la media query è una tecnica CSS che permette di creare siti web responsive. Primo esempio – CSS media query In questo primo esempio visualizziamo, nella versione desktop, un semplice box … Leggi tutto

In questa lezione vedremo come aggiungere le icons CSS nei nostri siti web e dare anche una formattazione opportuna con i fogli di stile. Ci sono vari metodi per inserire delle icone nei siti web, ma una pratica molto comune è quella di utilizzare una libreria esterna. Una delle più utilizzate è la libreria Font … Leggi tutto

Oggi parleremo di float e clear nei CSS e faremo degli esempi su come utilizzare assieme queste due proprietà. Esempi d’uso float e clear Facciamo un esempio in riferimento all’esempio con i float affrontato nella lezione precedente: float css. Modifichiamo il codice html inserendo del testo, mentre nel codice CSS togliamo la larghezza e l’altezza … Leggi tutto

In questa lezione creiamo un layout utilizzando i float in modo da comprenderne meglio il funzionamento. Fino a qualche anno fa i layout con i float erano ampiamente utilizzati e tutt’ora se ne continua a fare uso in molte strutture. In particolar modo impareremo ad allineare gli elementi utilizzando float left e right e ad … Leggi tutto

In questa lezione studieremo gli pseudo-elementi before e after dei CSS, utilizzati per aggiungere elementi che non sono presenti nel codice html. In dettaglio before inserisce un contenuto prima dell’elemento individuato dal selettore selezionato, mentre after inserisce un contenuto dopo l’elemento. Nel selettore individuato da ::before o ::after si specifica la proprietà content che serve … Leggi tutto

In questa lezione studieremo la proprietà float dei CSS. Questa proprietà consente di rimuovere un elemento dal suo normale flusso e quindi di poterlo spostare a destra oppure a sinistra. Se ad un elemento assegniamo la proprietà float, automaticamente diventa un block a cui poter assegnare larghezza, bordi, margini, ecc. Proprietà float CSS La proprietà … Leggi tutto

Il position sticky nei CSS consente di posizionare l’elemento secondo il normale flusso del documento (a differenza di fixed), quando poi scorriamo la pagina, la sua posizione rimane fissa rispetto allo scorrimento. Ma spieghiamo in dettaglio il funzionamento attraverso un esempio pratico. Position sticky esempio Per capire il funzionamento riprendiamo l’esempio di fixed nel quale … Leggi tutto

In questo articolo vedremo come creare un’opacità con rgba. Abbiamo già visto, nella lezione precedente, come utilizzare opacity. Abbiamo anche notato che l’effetto opacità, oltre allo sfondo, viene applicato anche al testo contenuto in un elemento che ha un’opacity. Quindi vediamo come evitare questo effetto, qualora non si voglia applicare, con l’utilizzo di rgba. Opacità … Leggi tutto

Le media queries CSS sono delle regole di stile che permettono di adattare i siti web ai diversi dispositivi, dai desktop ai mobile. Quindi ad esempio si possono impostare delle regole di stile che sono valide per i computer desktop ed altre invece per i tablet oppure per gli smartphone, ecc. Le media queries hanno … Leggi tutto

In questa lezione vedremo come utilizzare la proprietà text shadow dei CSS, utile per dare un effetto ombra ad un testo. Esempi pratici Text shadow Vediamo dunque degli esempi pratici di utilizzo di questa proprietà e quali valori possono essere indicati. distanza orizzontale e verticale La posizione orizzontale e verticale dell’ombreggiatura che rappresentano il primo … Leggi tutto

In questa lezione studieremo come utilizzare first child nei CSS. In particolare possiamo definire la pseudo classe first child come il primo elemento di ciascun gruppo di elementi. First child – primo esempio In questo primo esempio realizziamo un elenco puntato e decidiamo ad esempio di colorare solo il primo list item di colore verde. … Leggi tutto

In questa lezione vedremo come utilizzare gli pseudo-elementi first letter e first line. Questi pseudo-elementi nei CSS si utilizzano per stilizzare la prima lettera di una determinata frase oppure un’intera riga. Facciamo degli esempi pratici utilizzando questi elementi. First letter e first line – primo esempio In questo esempio utilizzeremo first letter per ingrandire la … Leggi tutto

La proprietà order permette di decidere l’ordine di allineamento degli elementi, cioè l’ordine in cui viene mostrato un box contenitore rispetto agli altri definiti nello stesso contenitore padre. Order possibili valori Si specifica dunque un valore numerico che indica l’ordine di apparizione, cioè l’elemento che deve essere visualizzato per primo. Se ci sono dunque 3 … Leggi tutto

La proprietà align self consente di specificare per un singolo box l’allineamento sull’asse perpendicolare, cioè sull’asse y. In definitiva questa proprietà sostituisce l’allineamento impostato dalla proprietà align-items impostato nel contenitore genitore, se presente. Align self valori possibili Questa proprietà consente dunque di impostare i seguenti valori: flex-start, flex-end, center, baseline, auto e stretch. Align self … Leggi tutto