Creazione di descrizioni comandi animate facilmente con Hint.css

Questo articolo fa parte della nostra "serie di tutorial HTML5 / CSS3", dedicata a farti diventare un designer e / o uno sviluppatore migliori. Clicca qui per vedere più articoli della stessa serie.

Tooltip è un ottimo modo per visualizzare informazioni aggiuntive su un sito Web senza occupare spazio . Il tooltip appare generalmente al passaggio del mouse, e ci sono probabilmente centinaia di plugin jQuery per includere tooltip fantasiosi sul tuo sito web.

Tuttavia, alcuni aspetti negativi comuni dell'uso del plug-in jQuery sono che vengono forniti con una serie di opzioni inutili e gonfiati di codici che rallentano le prestazioni del sito Web.

Quindi, oggi, daremo un'occhiata a un'alternativa alla creazione di suggerimenti. Con un sacco di nuove funzionalità in CSS3, è ora possibile creare un tooltip di fantasia comparabile solo usando CSS. Iniziamo.

Utilizzando Hint.css

In questo post, non lo creeremo da zero. Useremo Hint.css. Hint.css è una raccolta di classi e regole di stile, che ci consente di creare un semplice tooltip più rapidamente. Per utilizzare, è sufficiente aggiungere il foglio di stile al documento HTML o copiare tutte le regole di stile nel proprio foglio di stile.

Ora, nel testo del documento, avvolgere il pezzo in cui si desidera inserire un suggerimento con un elemento in linea, come l'uso di un elemento span o ancora. E aggiungi il contenuto del tooltip con l'attributo data-hint, in questo modo.

 across the globe are filled with freelance contractors all tendering for a limited amount of jobs. Tuttavia, poiché i mercati freelance in tutto il mondo sono pieni di appaltatori freelance, tutti i bandi di gara per un numero limitato di posti di lavoro. 

Tecnicamente, questo è tutto ciò che ti serve. Se visualizzi l'anteprima del documento nel browser e scorri il mouse, dovresti vedere il suggerimento visualizzato.

Questo tooltip viene visualizzato con lo pseudo-elemento e utilizzando la transizione CSS3 per lo spostamento animato.

Dagli un indizio

A meno che tu non stia usando un elemento di ancoraggio che viene fornito con stili distintivi per impostazione predefinita, non ci sono indicazioni che dimostrino che la parola specifica mostrerà una descrizione del comando simile a quella che vedi nello screenshot qui sopra e, quindi, probabilmente gli utenti non avranno la certezza.

Quindi, per una migliore esperienza utente, possiamo aggiungere alcuni stili extra per dargli un indicatore, ad esempio:

 span [data-hint] {border-bottom: 1px punteggiato #aaa; } span [data-hint]: hover {cursor: pointer; } 

Questi stili daranno all'elemento span l'attributo data-hint un fondo tratteggiato. È possibile regolare gli stili per soddisfare i requisiti di progettazione.

Direzione del tooltip

Possiamo mostrare il suggerimento in quattro direzioni diverse: superiore, inferiore, destra e sinistra usando le classi fornite.

Sinistra

 mercati 

Destra

 mercati 

Superiore

 mercati 

Parte inferiore

 mercati 

O continua a mostrare il suggerimento

 mercati 

Pensiero finale

Con le proprietà più avanzate in CSS3, oggi non ci basiamo più solo su JavaScript o jQuery per creare un'interfaccia utente di fantasia, come la creazione di una descrizione comando e l'utilizzo di Hint.css, possiamo crearne uno in un attimo. Ma come affermato all'inizio di questo post, questa tecnica ci consente solo di creare un semplice suggerimento basato sul testo .

Se vuoi creare un suggerimento più avanzato, ad esempio un suggerimento con l'immagine o mostrare il suggerimento al clic del mouse piuttosto che al passaggio del mouse, usare JavaScript o jQuery è ancora il modo migliore per andare.

30 gallerie di alberi che ti tolgono il respiro

I tunnel degli alberi sono uno dei fenomeni curiosi e belli della natura . Per definizione, un tunnel ad albero è descritto come una strada o una strada che presenta filari di alberi coltivati ​​su entrambi i lati. Gli alberi in qualche modo formano un baldacchino sopra la testa che dà l'effetto di un tunnel.Alcun

(Consigli tecnici e di design)

20 sveglie intelligenti per gli sleepyheads

Le persone di solito hanno un rapporto di amore-odio con le sveglie. Da un lato, tutti amano e hanno bisogno di sveglie per svegliarli al momento desiderato, tuttavia, quando questi poveri dispositivi fanno il loro lavoro e svegliano le persone da un sonno dolce, vogliono rompere loro.L'era delle sveglie retrò con solo un brutto suono fastidioso è scomparsa, e molti altri gadget intelligenti per la casa, anche le sveglie stanno diventando intelligenti.

(Consigli tecnici e di design)