7 fantastiche tecniche CSS3 che dovresti provare

L'evoluzione dei CSS (Cascading Style Sheets) con l'HTML è stata incredibile. Ci sono un sacco di funzionalità come Flexbox, Griglia CSS e proprietà personalizzate CSS introdotte di recente.

Il suo continuo avanzamento e l'enorme potenziale sono ciò che affascina gli sviluppatori per provare nuove tecniche CSS e superare i limiti di ciò che può fare. La combinazione di entrambe le tecnologie HTML 5 e CSS3 è, senza dubbio, un flash-killer.

Non c'è da stupirsi che un piano CSS ben eseguito possa quasi controllare qualsiasi aspetto del design e portare a una migliore esperienza utente, il che è assolutamente necessario. Dopotutto, i visitatori hanno determinate aspettative quando visualizzano il tuo sito tramite un laptop, desktop, tablet o qualsiasi altro mezzo.

Ma quali sono le tecniche CSS di tendenza? Non è una domanda ovvia che passa per la mente quando parliamo di progettare un sito Web attraente e facile da usare.

Questo è il motivo per cui abbiamo escogitato alcune delle nuove tecniche CSS e suggerimenti per padroneggiare le tue abilità di progettazione web. Ognuno include alcune spiegazioni e frammenti di codice di esempio.

Quindi andiamo subito a questo!

1. Allineare verticalmente con Flexbox

Gli sviluppatori precedenti incontravano molte difficoltà nell'allineare un testo o qualsiasi altro elemento verticalmente al centro. Ma ora, dopo l'introduzione della nuova specifica CSS3 Flexbox , le cose sono diventate molto più semplici.

La proprietà display: flex offre agli utenti un modo semplice per allineare qualsiasi testo o elemento al centro. Ecco il codice di esempio!

HTML:

[xhtml]
<div class="align-vertically">
Centrato verticalmente!
</div>
[/xhtml]

CSS:

[css]
.align-verticalmente {
sfondo: #FFA500;
colore: #hhh;
display: flessibile;
allineare-elementi: centro;
altezza: 200px;
}
[/css]

Nel codice CSS sopra, display: flex descrive il layout Flexbox per l'elemento, mentre align-items: center; è responsabile della centratura verticale del testo.

RISULTATO:

2. Griglia CSS reattiva

Non rendere la tua griglia un'eccezione, rendila anche reattiva, come tutto il resto nel tuo design.

Ci sono tanti modi in cui puoi rendere la tua griglia reattiva con CSS Grid. E la parte migliore del suo utilizzo è che sarai in grado di creare una griglia più flessibile che ti dia l'aspetto desiderato, indipendentemente dalle dimensioni del dispositivo.

Oltre a questo, la griglia CSS ti consente anche di lavorare con dimensioni di colonna disuguali e uguali. È un grande pezzo di tecnologia ricco di opzioni che danno agli utenti la libertà di avere il controllo sui loro progetti.

Puoi utilizzare vari punti di interruzione, l'altezza di più dimensioni ed eseguire altri posizionamenti, come mostrato nell'esempio seguente.

HTML:

[xhtml]
<div class="griglia">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
[/xhtml]

CSS:

[css]
.griglia
{
visualizzazione: griglia;
righe-modello-griglia: repeat(5, 1fr);
colonne grid-auto: calc((100vh – 3em) / 4);
grid-auto-flow: colonna;
gap di griglia: 1em;
altezza: 100vh;
}
.elemento-griglia:nth-child(3n)
{
colore di sfondo: viola;
}
.grid-item:nth-child(3n + 2)
{
colore di sfondo: rosa;
}
[/css]

L'unità di frazione (fr) utilizzata nel codice CSS di cui sopra è l'unità flessibile che separa lo spazio aperto secondo le tue linee guida. Ogni istruzione fr è per la colonna, quindi puoi sommare gli spazi vuoti e preparare la griglia.

RISULTATO:

3. Animazioni di testo

Potresti aver creato animazioni di sfondo con CSS, ma ora influenza anche il modo in cui gli utenti interagiscono e interagiscono con gli elementi di testo di un sito web. Dalle regolazioni del passaggio del mouse al far fluttuare le parole nell'aria, CCS3 ha reso tutto possibile.

I siti Web che non hanno molti elementi allettanti per coinvolgere i propri utenti possono trarre il meglio da questa caratteristica. Eccone un piccolo esempio.

HTML:

[xhtml]
<div class="Menu">
<ul class="Menu-list" data-offset="10">
<li class="Menu-list-item" data-offset="20" onclick>
ABITARE
<span class="Maschera"><span>IN DIRETTA</span></span>
<span class="Maschera"><span>IN DIRETTA</span></span>
</li>
<li class="Menu-list-item" data-offset="16" onclick>
RIDERE
<span class="Maschera"><span>RISATE</span></span>
<span class="Maschera"><span>RISATE</span></span>
</li>
<li class="Menu-list-item" data-offset="12" onclick>
AMORE
<span class="Maschera"><span>AMORE</span></span>
<span class="Maschera"><span>AMORE</span></span>
</ul>
</div>
[/xhtml]

CSS:

[css]
$ prospettiva: 60 rem;
$ dimensione del carattere: 5,25 rem;
$ posizione divisa: 50%;
$spessore: 3px;
$ diviso in colori: #FF2C75;
%impostazioni-font {
famiglia di caratteri: "Comic Sans MS", system-ui, sans-serif;
stile del carattere: normale;
font-weight: normale;
-webkit-font-smoothing: antialias;
-webkit-font-kerning: normale;
-webkit-regolazione della dimensione del testo: 100%;
}
html,
corpo {
larghezza: 100vw;
altezza: 100vh;
}
corpo {
@extend %font-impostazioni;
sfondo: gradiente lineare (45 gradi, #02001F, #008080);
stile di trasformazione: preservare-3d;
trasforma: prospettiva($prospettiva);
posizione: fissa;
display: flessibile;
allineare-elementi: centro;
giustificare-contenuto: centro;
}
.Elenco-menu {
dimensione carattere: $ dimensione carattere;
altezza della linea: 1,2;
trasformazione del testo: maiuscolo;
allineamento testo: centro;
display: flessibile;
direzione flessibile: colonna;
allineare-elementi: centro;
trasformare: ruotareX(-10 gradi) ruotareY(20 gradi); // sovrascritto da JS
}
.Voce-elenco-menu {
posizione: relativa;
colore: trasparente;
cursore: puntatore;
&::prima {
contenuto: ";
blocco di visualizzazione;
posizione: assoluta;
in alto: $split-posizione;
a sinistra: -10%;
a destra: -10%;
altezza: $spessore;
raggio di confine: $split-spessore;
margin-top: -($split-spessore / 2);
sfondo: $colore diviso;
trasformare: scale(0);
transizione: trasforma .8s cubic-bezier(.16,1.08,.38,.98);
indice z: 1;
}
}
.Maschera {
blocco di visualizzazione;
posizione: assoluta;
overflow: nascosto;
colore: $ diviso in colori;
superiore: 0;
altezza: $split-posizione;
transizione: tutti .8s cubic-bezier(.16,1.08,.38,.98);
span { display: blocco; }
}
.Maschera + .Maschera {
in alto: $ posizione divisa – 0,1;
altezza: 100 – $split-posizione + 0,1;
span {trasforma: translateY(-$split-position); }
}
.Voce-elenco-menu:passa il mouse,
.Voce-elenco-menu:attivo {
.Maschera { colore: #FFF; trasforma: skewX(12deg) translateX(5px); }
.Mask + .Mask {trasforma: skewX(12deg) translateX(-5px); }
&::prima di { trasformare: scale(1); }
}
[/css]

In questo modo, puoi anche creare diversi elementi di testo dinamici per il tuo sito web. Non è divertente?

RISULTATO:

4. Disposizione delle colonne

Di solito, i layout basati su colonne vengono creati utilizzando Javascript, che è piuttosto complicato e richiede tempo. Ma CSS ha creato un modo per facilitare il compito di sviluppatori e web designer.

Di seguito è riportata la regola della colonna CSS attraverso la quale puoi creare un layout basato su colonne per il tuo sito web.

HTML:

[xhtml]
<div class="contenitore">
Posiziona un componente contenitore per iniziare a creare il formato. A volte potresti essere in grado di sbarazzarti del contenitore in un secondo momento, ma ottenere il componente contenitore semplifica la gestione su diversi browser Web per la maggior parte dei layout a larghezza fissa. Definisce quanto sarà ampio il contenuto della pagina web, nonché eventuali margini esterni e spazi interni.
</div>
[/xhtml]

CSS:

[css]
.container {
/* Vecchio Chrome, Safari e Opera */
-conteggio-colonne-webkit: 3;
-spazio-colonna-webkit: 40px;
-stile-regola-colonna-webkit: solido;
-larghezza-regola-colonna-webkit: 4px;
-webkit-colonna-regola-colore: arancione;
/* Vecchio Firefox */
-moz-conteggio-colonne: 3;
-moz-spazio-colonna: 40px;
-moz-colonna-stile-regola: solido;
-moz-colonna-larghezza-regola: 4px;
-moz-colonna-regola-colore: arancione;
/* Sintassi standard */
conteggio colonne: 3;
spazio tra le colonne: 40px;
stile colonna-regola: solido;
larghezza-regola-colonna: 4px;
colonna-regola-colore: arancione;
}
[/css]

RISULTATO:

5. Orientamento dello schermo

Molte persone pensano che l'orientamento dello schermo e l'orientamento del dispositivo funzionino entrambi per lo stesso scopo. Ma non è così. L'orientamento dello schermo è leggermente diverso dal dispositivo.

Anche se un dispositivo non è in grado di rilevare il proprio orientamento, uno schermo può sempre farlo. E se anche il dispositivo è in grado di farlo, allora è bene avere il controllo sull'orientamento dello schermo in modo da poter mantenere o modificare l'interfaccia del tuo sito web.

Esistono 2 modi in cui è possibile gestire l'orientamento dello schermo; CSS o Javascript. Ma è facile quando lo fai con CSS Orientation Media Query. Poiché consente al contenuto di regolare il proprio formato, indipendentemente dal fatto che la finestra del browser sia in modalità orizzontale o verticale. Per capire meglio, diamo un'occhiata al seguente esempio.

HTML:

[xhtml]
<ul id="barra degli strumenti">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<p>Se vuoi che una barra dei pulsanti si allunghi lungo la dimensione di visualizzazione più lunga del dispositivo. Puoi farlo in modo rapido e automatico utilizzando una query multimediale.</p>
[/xhtml]

zzzz

CSS:

[css]
/* Per prima cosa definiamo alcuni stili comuni */

html, corpo {
larghezza: 100%;
altezza: 100%;
}

corpo {
bordo: 1px nero pieno;

-dimensioni-scatola-moz: bordo-scatola;
formato scatola: bordo-scatola;
}

P {
carattere : 1em sans-serif;
margine : 0;
imbottitura: .5em;
}

ul {
stile elenco: nessuno;

carattere: 1em monospazio;
margine : 0;
imbottitura: .5em;

-dimensioni-scatola-moz: bordo-scatola;
formato scatola: bordo-scatola;

sfondo: nero;
}

li {
display: blocco in linea;
margine : 0;
imbottitura: 0,5 em;
sfondo: bianco;
}
/* Per il ritratto, vogliamo la barra degli strumenti in alto */

@schermo multimediale e (orientamento: verticale) {
#barra degli strumenti {
larghezza: 100%;
}
}

/* Per orizzontale, vogliamo la barra degli strumenti a sinistra */

@schermo multimediale e (orientamento: orizzontale) {
#barra degli strumenti {
posizione: fissa;
larghezza: 2,65 em;
altezza: 100%;
}

P {
margine sinistro: 2em;
}

li + li {
margine superiore: .5em;
}
}
[/css]

RISULTATO:

6. Elenchi separati da virgole

Non c'è dubbio che gli elenchi puntati sono molto comunemente usati per iscritto per trasmettere qualsiasi informazione in modo più preciso e chiaro. Ma una cosa con cui la maggior parte delle persone lotta è aggiungere virgole su ogni punto degli elenchi.

Con questo frammento di codice menzionato di seguito, puoi facilmente aggiungere virgole al tuo elenco ad eccezione dell'ultimo.

HTML:

[xhtml]
<ul>
<li>Mela</li>
<li>Ananas</li>
<li>Crema di mele </li>
</ul>
[/xhtml]

CSS:

[css]
corpo{
famiglia di caratteri: Arial;
dimensione del carattere: 30px;
}

ul > li:not(:l'ultimo figlio)::dopo {
contenuto: ",";
}
[/css]

RISULTATO:

7. Casella di controllo animata

Bene, la maggior parte delle persone è molto consapevole dello sfondo CSS e delle animazioni del testo. Ma non molti conoscono le animazioni delle caselle di controllo.

Sì, oltre allo sfondo e ai testi, puoi anche rendere visivamente accattivante la sezione della tua casella di controllo. Non è fantastico?

Di seguito è riportato un esempio a cui puoi fare riferimento:

HTML:

[xhtml]
<h1>Caselle di controllo animate utilizzando iconfonts</h1>
<!– Un elenco di caselle di controllo –>
<ul>
<li>
<input type="checkbox" name="one" id="one" />
<label for="one">Crea casella di controllo</label>
</li>
<li>
<input type="casella di controllo" name="due" id="due" />
<label for="two">Assegna etichetta</label>
</li>
<li>
<input type="casella di controllo" name="tre" id="tre" />
<label for="three">Importa iconfont</label>
</li>
<li>
<input type="checkbox" name="four" id="four" />
<label for="four">Iconizza gli pseudo elementi dell'etichetta</label>
</li>
<li>
<input type="checkbox" name="five" id="five" />
<label for="five">Anima la larghezza delle icone</label>
</li>
<li>
<input type="casella di controllo" name="six" id="six" />
<label for="six">Colora le icone</label>
</li>
</ul>
[/xhtml]

CSS:

[css]
@importare
(importa 2 caratteri uno o intestazione e altro per il testo)
h1 {
dimensione del carattere: 15;
imbottitura: 12px;
allineamento testo: centro;
}
ul {
larghezza: 290px;
margine: 0 automatico;
}
tu li {
tipo-stile-elenco: nessuno;
imbottitura: 10px;
}

/*Aggiunta di icone delle caselle di controllo personalizzate*/
etichetta {
posizione: relativa;
riempimento a sinistra: 30px;
dimensione del carattere: 14px;
cursore: puntatore;
}
etichetta:prima, etichetta:dopo {
famiglia di caratteri: FontAwesome;
dimensione del carattere: 21px;
/*assolutamente posizionato*/
posizione: assoluta; superiore: 0; a sinistra: 0;
}
etichetta: prima di {
contenuto: '\f096'; /*deselezionato*/
}
etichetta: dopo {
contenuto: '\f046'; /*controllato*/
/*l'icona selezionata sarà nascosta per impostazione predefinita usando 0 max-width e overflow nascosto*/
larghezza massima: 0;
overflow: nascosto;
opacità: 0,5;
/*Transizioni CSS3 per effetti animati*/
transizione: tutti 0,35s;
}

/*nascondendo le caselle di controllo originali*/
input[type="casella di controllo"] {
display: nessuno;
}
/*quando l'utente seleziona la casella di controllo, l'icona selezionata si animerà in*/
input[type="checkbox"]:controllato + etichetta:dopo {
larghezza massima: 25px; /*un numero arbitrario maggiore della larghezza dell'icona*/
opacità: 1; /*per effetto dissolvenza*/
}

/*aggiungendo alcuni colori per divertimento*/
#una+etichetta:prima, #una+etichetta:dopo {color: hsl(0, 45%, 40%);}
#due+etichetta:prima, #due+etichetta:dopo {colore: hsl(60, 45%, 40%);}
#tre+etichetta:prima, #tre+etichetta:dopo {color: hsl(120, 45%, 40%);}
#quattro+etichetta:prima, #quattro+etichetta:dopo {color: hsl(180, 45%, 40%);}
#cinque+etichetta:prima, #cinque+etichetta:dopo {colore: hsl(240, 45%, 40%);}
#sei+etichetta:prima, #sei+etichetta:dopo {colore: hsl(300, 45%, 40%);}
[/css]

RISULTATO:

Parole di chiusura:

Se andiamo in profondità, le possibilità di CSS e HTML sono infinite. Quindi speriamo che le tecniche sopra implementate ti aiutino ad acquisire alcune conoscenze e ti siano utili nella progettazione di un ottimo sito web.