Pillole di CSS

CSS Grid Layout


Vediamo un esempio di come creare una impostazione di una pagina tramite con la griglia GRID che permette di creare diversi contenitori divisi in colonne e/o righe.


CSS Flex Layout


Vediamo un esempio di come creare una impostazione di una pagina tramite con la griglia GRID che permette di creare diversi contenitori divisi in colonne e/o righe.


Clip-path Property


Con il comando clip-path insieme a shape-inside selezioniamo una parte di una immagine e lasciamo una parte esterna vuota e nella parte ulteriore si può inserire anche il testo come nell'immagine sottostante.



Scrittura di testo


Animazione per scrivere testo in movimento.

The blockchain is a revolutionary tecnology. It is a database of transactions structured in block.
Every block contains the transactions performed into a interval of time set by the administrator of blockchain.
One blockchain contains lot of blocks. One block contains a lot of transactions.

Creare box con contorni linear gradient


Vediamo nel riquadro sotto la parte html ed il relativo codice css.



Nell'immagine sottostante possiamo vedere il risultato.


Unità di misura vw, vh, vmin e vmax

Con il CSS3 sono state introdotte queste nuove unità di misura che si riferiscono alle dimensioni degli oggetti in percentuale alla viewport(dimensione finestra del browser). Questa è molto utile per il responsive design senza utilizzare li media query soprattutto per il font-size ma va bene per tutti gli elementi che hanno il parametro height.
Vediamo qualche esempio:
100 vw = 100% dimensione finestra, se si vuole impostare il 10% impostare 10vw per width o 10 vh per height.
Il parametro vmin permette di selezionare il valore minore per height tra vw o vh mentre vmax assegna alla larghezza width il maggiore tra vh e vw.


Unità di misura em e rem

L'unità di misura em applicata ad un elemento modifica il valore della property indicata rispetto al valore inherited dallo stesso. Vediamo i seguenti esempi :
p { line-height: 1.2em } incrementa del 20% il valore che line-height ha assegnato per la property p.
h1 { font-size: 1.3em } incrementa del 30% il valore che font-size eradita da h1.
Mentre il parametro rem inherit dal root element il valore assegnato all'elemento e lo modifica con i dati inseriti come nell'esempio sottostante:
h1 { font-size: 1.2rem }
dove il font-size ereditato dall'elemento h1 viene incrementato del 20%
L'assegnazione dei valori può essere effettuato anche usando la funzione calc
p { calc(10px + 0.5vh }

BUTTON PER CAMBIARE IL COLORE BACKGROUND PAGINA O BOX

Se vogliamo cambiare il colore standard della pagina web per prima cosa inseriamo un pulsante di tipo button nella pagina web e poi tramite css e javascript vediamo il colore assegnato e di conseguenza cambiamo il parametro css per impostare un nuovo colore. Nel nostro esempio il colore di background è nero e con il click lo facciamo diventare bianco e se premo di nuovo il pulsante ritornerà nero.







CAMBIARE IL COLORE BACKGROUND O TESTO PAGINA O BOX CON COLORE RANDOM

Per selezionare un colore in modo random utilizzamo la funzione math di Javascript. Click mouse sopra il pulsante a lato.
EFFETTO SOTTOLINEATURA MOBILE QUANDO MOUSE PASSA SOPRA OGGETTO

Definire in CSS componente ::after

.nome_classe:after {
content: '';
display: block;
border-bottom: 3px solid rgba(255, 102, 0, 0.692);
width:0;
position: relative;
-webkit-transition: 1s ease;
transition: 1s ease;
}

.nome_classe:hover:after {
width: 100%;
left:0;
-webkit-transition: 1s ease;
transition: 1s ease;
}