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 classe display: flex per abilitare la modalità layout flexbox. IL justify-content la proprietà è impostata su center per centrare orizzontalmente l'elemento figlio all'interno del contenitore. IL align-items la proprietà è impostata su center 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 classe display: grid per abilitare la modalità layout griglia. IL grid-template-columns la proprietà è impostata su repeat(2, 1fr) per creare due colonne di uguale larghezza. IL gap 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. IL transition la proprietà è impostata su background-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!
  • 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, il spin l'animazione viene applicata per ruotare la scatola. IL animation-fill-mode la proprietà è impostata su forwards 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!
  • 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 il background-color proprietà di un elemento pulsante, utilizzando il var() 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 ed blue.png, che vengono caricati utilizzando il file background-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. IL background-position proprietà viene utilizzata per controllare il posizionamento di ogni immagine. IL background-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;
    }

    Risultato

    Douglas Karr

    Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

    Articoli Correlati

    Torna a pulsante in alto
    Chiudi

    Blocco annunci rilevato

    Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.