Autore: Cristina

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

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

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