Categoria: 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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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à […]

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 […]

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à […]