Marketing Content
Funzionalità CSS3 di cui potresti non essere a conoscenza: Flexbox, layout a griglia, proprietà personalizzate, transizioni, animazioni e sfondi multipli
Fogli di stile (CSS) continuano ad evolversi e le ultime versioni potrebbero avere alcune funzionalità di cui potresti anche non essere a conoscenza. Ecco alcuni dei principali miglioramenti e metodologie introdotti con CSS3, insieme a esempi di codice:
- Layout scatola flessibile (Flexbox): una modalità di layout che consente di creare layout flessibili e reattivi per le pagine web. Con flexbox, puoi allineare e distribuire facilmente gli elementi all'interno di un contenitore. n questo esempio, il
.container
usi di classedisplay: flex
per abilitare la modalità layout flexbox. ILjustify-content
la proprietà è impostata sucenter
per centrare orizzontalmente l'elemento figlio all'interno del contenitore. ILalign-items
la proprietà è impostata sucenter
per centrare verticalmente l'elemento figlio. IL.item
class imposta il colore di sfondo e la spaziatura interna per l'elemento figlio.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Risultato
Elemento centrato
- Layout della griglia: un'altra modalità di layout che consente di creare layout complessi basati su griglia per le pagine web. Con la griglia, puoi specificare righe e colonne, quindi posizionare gli elementi all'interno di celle specifiche della griglia. In questo esempio, il
.grid-container
usi di classedisplay: grid
per abilitare la modalità layout griglia. ILgrid-template-columns
la proprietà è impostata surepeat(2, 1fr)
per creare due colonne di uguale larghezza. ILgap
imposta la spaziatura tra le celle della griglia. IL.grid-item
class imposta il colore di sfondo e la spaziatura interna per gli elementi della griglia.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Risultato
Articolo 1
Articolo 2
Articolo 3
Articolo 4
- transizioni: I CSS3 hanno introdotto una serie di nuove proprietà e tecniche per creare transizioni nelle pagine web. Ad esempio, il
transition
La proprietà può essere utilizzata per animare le modifiche nelle proprietà CSS nel tempo. In questo esempio, il.box
class imposta la larghezza, l'altezza e il colore di sfondo iniziale dell'elemento. ILtransition
la proprietà è impostata subackground-color 0.5s ease
per animare le modifiche alla proprietà del colore di sfondo in mezzo secondo con una funzione di temporizzazione facilitata. IL.box:hover
class cambia il colore di sfondo dell'elemento quando il puntatore del mouse si trova sopra di esso, attivando l'animazione di transizione.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Risultato
Librarsi
Qui!
Qui!
- Animazioni: I CSS3 hanno introdotto una serie di nuove proprietà e tecniche per la creazione di animazioni nelle pagine web. In questo esempio, abbiamo aggiunto un'animazione utilizzando il
animation
proprietà. Abbiamo definito a@keyframes
regola per l'animazione, che specifica che la casella deve ruotare da 0 gradi a 90 gradi per una durata di 0.5 secondi. Quando la scatola viene spostata sopra, ilspin
l'animazione viene applicata per ruotare la scatola. ILanimation-fill-mode
la proprietà è impostata suforwards
per garantire che lo stato finale dell'animazione venga mantenuto al termine.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Risultato
Librarsi
Qui!
Qui!
- Proprietà personalizzate CSS: Conosciuto anche come Variabili CSS, le proprietà personalizzate sono state introdotte in CSS3. Ti consentono di definire e utilizzare le tue proprietà personalizzate in CSS, che possono essere utilizzate per archiviare e riutilizzare i valori in tutti i tuoi fogli di stile. Le variabili CSS sono identificate da un nome che inizia con due trattini, ad esempio
--my-variable
. In questo esempio, definiamo una variabile CSS chiamata –primary-color e le assegniamo un valore di#007bff
, che è un colore blu comunemente usato come colore primario in molti design. Abbiamo usato questa variabile per impostare ilbackground-color
proprietà di un elemento pulsante, utilizzando ilvar()
funzione e passando il nome della variabile. Questo utilizzerà il valore della variabile come colore di sfondo per il pulsante.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Sfondi multipli: I CSS3 ti consentono di specificare più immagini di sfondo per un elemento, con la possibilità di controllarne il posizionamento e l'ordine di sovrapposizione. Lo sfondo è composto da due immagini,
red.png
edblue.png
, che vengono caricati utilizzando il filebackground-image
proprietà. La prima immagine,red.png
, è posizionato nell'angolo in basso a destra dell'elemento, mentre la seconda immagine,blue.png
, è posizionato nell'angolo in alto a sinistra dell'elemento. ILbackground-position
proprietà viene utilizzata per controllare il posizionamento di ogni immagine. ILbackground-repeat
La proprietà viene utilizzata per controllare come si ripetono le immagini. La prima immagine,red.png
, è impostato per non ripetere (no-repeat
), mentre la seconda immagine,blue.png
, è impostato per ripetere (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}