CSS - suggerimenti: una guida per principianti

Ciao a tutti, futuri designer web! Oggi esploreremo il meraviglioso mondo dei suggerimenti CSS. Come il tuo amico insegnante di informatica del vicinato, sono entusiasta di guidarti in questo viaggio. Non preoccuparti se non hai mai scritto una riga di codice prima - inizieremo dalle basi e piano piano ci affonderemo di più. Allora, prenditi una tazza di caffè (o tè, se è la tua cosa), e cominciamo!

Cos'è un suggerimento?

Prima di immergerci nella creazione di suggerimenti, capiremo cos'è. Immagina di passare sopra un'icona su un sito web, e improvvisamente appare una piccola casella con alcune informazioni extra. Questo è un suggerimento! Sono come piccoli aiutanti che forniscono contesto aggiuntivo senza ingombrare il tuo contenuto principale.

Creare suggerimenti

Iniziamo creando un semplice suggerimento. Avremo bisogno di un po' di HTML e CSS per questo. Non preoccuparti se non capisci tutto subito - lo analizzeremo passo dopo passo.

<div class="tooltip">Passa sopra di me!
<span class="tooltiptext">Questo è un suggerimento</span>
</div>

Ora, aggiungiamo un po' di CSS per farlo funzionare:

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px tratteggiato nero;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: nero;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

Ecco una spiegazione dettagliata:

1. Abbiamo impostato il contenitore principale su position: relative così possiamo posizionare il suggerimento rispetto ad esso.
2. Il testo del suggerimento è nascosto per impostazione predefinita con visibility: hidden.
3. Utilizziamo position: absolute per posizionare il suggerimento.
4. La pseudo-classe :hover rende il suggerimento visibile quando passiamo sopra il contenitore.

Posizionare i suggerimenti

Ora che sappiamo come creare un semplice suggerimento, esploriamo diversi modi per posizionarli. Possiamo piazzare i suggerimenti in alto, in basso, a destra o a sinistra di un elemento.

Suggerimento in alto

Abbiamo già visto un suggerimento in alto nel nostro primo esempio. Ecco un promemoria:

.tooltip .tooltiptext {
bottom: 125%;
left: 50%;
margin-left: -60px;
}

Suggerimento in basso

Per creare un suggerimento in basso, dobbiamo solo cambiare poche righe:

.tooltip .tooltiptext {
top: 125%;
left: 50%;
margin-left: -60px;
}

Suggerimento a destra

Per un suggerimento a destra, adjustiamo la posizione così:

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

Suggerimento a sinistra

E per un suggerimento a sinistra:

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

Freccie nei suggerimenti

Ora, aggiungiamo un po' di pepe ai nostri suggerimenti con frecce! Questi piccoli triangoli rendono i nostri suggerimenti più professionali e aiutano a indicare esattamente l'elemento che li descrive.

Freccia in alto

Per aggiungere una freccia al nostro suggerimento in alto, useremo il pseudo-elemento ::after:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solido;
border-color: nero transparente transparente transparente;
}

Questo crea un piccolo triangolo che punta verso il basso dal nostro suggerimento.

Freccia in basso

Per una freccia in basso, useremo CSS simile ma cambieremo la posizione e i colori dei bordi:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solido;
border-color: trasparente trasparente nero trasparente;
}

Freccia a destra

Per una freccia a destra:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solido;
border-color: trasparente nero trasparente trasparente;
}

Freccia a sinistra

E per una freccia a sinistra:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solido;
border-color: trasparente trasparente trasparente nero;
}

Suggerimenti con animazione di fadeIn

Vuoi aggiungere un po' di animazione fluida ai tuoi suggerimenti? Facciamoli fadeIn!

.tooltip .tooltiptext {
opacità: 0;
transizione: opacità 0.3s;
}

.tooltip:hover .tooltiptext {
opacità: 1;
}

Questo CSS farà fadeIn il tuo suggerimento in modo fluido in 0.3 secondi quando passi sopra l'elemento.

Vantaggi dei suggerimenti

Ora che abbiamo imparato a creare e stilizzare i suggerimenti, parliamo di perché sono così fantastici:

1. Risparmio di spazio: I suggerimenti ti permettono di fornire informazioni extra senza ingombrare il tuo contenuto principale.
2. User-friendly: Offrono chiarimenti istantanei proprio dove l'utente ne ha bisogno.
3. Miglioramento dell'UX: I suggerimenti possono guidare gli utenti attraverso la tua interfaccia, rendendo la navigazione più facile.
4. Flessibilità: Come abbiamo visto, i suggerimenti possono essere posizionati e stilizzati in vari modi per adattarsi al tuo design.

Metodi dei suggerimenti

Ecco una tabella comoda che riassume i diversi metodi dei suggerimenti che abbiamo coperto:

Metodo	Descrizione
Suggerimento in alto	Appare sopra l'elemento
Suggerimento in basso	Appare sotto l'elemento
Suggerimento a destra	Appare a destra dell'elemento
Suggerimento a sinistra	Appare a sinistra dell'elemento
Freccia nei suggerimenti	Aggiunge una freccia al suggerimento
Suggerimento con fadeIn	Aggiunge un'animazione di fadeIn

Ecco fatto, ragazzi! Ora sei equipaggiato con le conoscenze per creare stylish, informative tooltips per i tuoi progetti web. Ricorda, la pratica fa la perfezione, quindi non aver paura di sperimentare con diversi stili e posizioni. Chi lo sa? Potresti creare la prossima grande cosa nel design dei suggerimenti!

Buon coding, e possa i tuoi suggerimenti sempre essere utili e mai fastidiosi!

Credits: Image by storyset