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.

7 ottimi modi per ottenere il tuo curriculum notato

Questo articolo fa parte della serie " Ace Your Interview " - dove condividiamo consigli e trucchi che puoi utilizzare offline e online per aggirare il lavoro dei tuoi sogni. Clicca qui per vedere più articoli della stessa serie Ottenere il tuo curriculum notato è il primo passo verso un impiego di successo, e può definire il percorso del resto delle fasi di reclutamento. C

(Consigli tecnici e di design)

WhatsApp lancia 3 nuove funzionalità: album, filtri e scorciatoie per le risposte

Se sei un utente iOS di WhatsApp, ti consigliamo di controllare l'app per un nuovo aggiornamento poiché l'applicazione di chat ha ricevuto tre nuove funzionalità e due di queste sono centrate attorno alle foto . Nuovi filtri La prima novità che arriverà su WhatsApp è "filtri", qualcosa che era sorprendentemente assente dall'app fino a questo punto. Com

(Consigli tecnici e di design)