no.hideout-lastation.com
Paradis For Designere Og Utviklere


Lage animert verktøytips enkelt med Hint.css

Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie.

Tooltip er en fin måte å vise ekstra informasjon på et nettsted uten å ta ekstra plass . Verktøytipset vises vanligvis på musepekeren, og det er sannsynligvis hundrevis av jQuery-plugins for å inkludere fancy verktøytips på nettstedet ditt.

Noen vanlige ulemper med å bruke jQuery-plugin er imidlertid at det kommer med et sett ubrukelige alternativer, og oppblåst med koder som reduserer ytelsen på nettstedet.

Så i dag skal vi se på et alternativ for å lage verktøytips. Med en rekke nye funksjoner i CSS3, er det nå mulig å lage en sammenlignbar, fancy verktøykode bare ved hjelp av CSS. La oss komme i gang.

Bruke Hint.css

I dette innlegget kommer vi ikke til å bygge den fra bunnen av. Vi bruker Hint.css. Hint.css er en samling av klasser og stilregler, slik at vi kan lage et enkelt verktøytips raskere. For å bruke, legg ganske enkelt stilarket til HTML-dokumentet ditt, eller kopier alle stilregler til ditt eget stilark.

Nå, i dokumentteksten, pakk brikken du vil sette inn et verktøytips med et inlineelement, som å bruke et spennings- eller ankerelement. Og legg til verktøytipsinnholdet med data-hint attributtet, slik som det.

 across the globe are filled with freelance contractors all tendering for a limited amount of jobs. Men fordi freelance markedsplasser over hele verden er fylt med frilans entreprenører alle tilbud om en begrenset antall jobber. 

Teknisk er dette alt du trenger. Hvis du forhåndsviser dokumentet ditt i nettleseren og ruller over musen, bør du se verktøytipset dukker opp.

Dette verktøytipset vises med pseudo-element, og bruker CSS3-overgang for det animerte trekket.

Gi det en anelse

Med mindre du bruker et ankerelement som leveres med karakteristiske stiler som standard, er det ingen indikasjon på at det bestemte ordet vil vise et verktøytips som det du ser på skjermbildet ovenfor, og dermed vil brukerne mest sannsynlig være clueless.

Så, for bedre brukeropplevelse, kan vi legge til noen ekstra stiler for å gi den en indikator, for eksempel:

 span [data-hint] {border-bottom: 1px dotted #aaa; } span [data-hint]: svever {markør: pointer; } 

Disse stilene vil gi spenningselementet med data-hint attributt en prikket kantbunn. Du kan justere stilene for å møte designkravet.

Tooltip Direction

Vi kan vise verktøytipset i fire forskjellige retninger: topp, bunn, høyre og venstre ved hjelp av de angitte klassene.

Venstre

 markeds 

Ikke sant

 markeds 

Topp

 markeds 

Bunn

 markeds 

Eller fortsett å vise Tooltip

 markeds 

Endelig tanke

Med mer avanserte egenskaper i CSS3, i dag, er vi ikke lenger bare avhengige av JavaScript eller jQuery for å lage et fancy brukergrensesnitt, for eksempel å lage en Tooltip, og ved hjelp av Hint.css, kan vi lage en i snap. Men som sagt tidligere i dette innlegget, tillater denne teknikken oss bare å lage et enkelt tekstbasert verktøytips .

Hvis du vil lage et mer avansert verktøytips, si et verktøytips med bilde eller vise verktøylippet ved museklikk i stedet for musepekeren, bruk JavaScript eller jQuery er fortsatt den beste måten å gå.

Finn Pantone Color Hex-koder med denne gratisappen

Finn Pantone Color Hex-koder med denne gratisappen

Pantone-fargevalgssystemet definerer spesifikke verdier for farger laget av Pantone. Disse fargene brukes mest for fysisk dekorasjon og utskrift, men de kan også fungere digitalt .Likevel er det en tøff jobb som matcher den eksakte hex-koden for hver Pantone-farge. Og takket være denne gratis web-appen kan du finne heksekoder ved å klikke på en knapp.Dett

(Tekniske og design tips)

Slik debuger du nettsiden i iPad

Slik debuger du nettsiden i iPad

Med tusenvis av mobile brukere i dag, er det nødvendig å bygge nettsteder som kan vises på mobilenheter. Heldigvis har vi mange verktøy og muligheter for feilsøking av nettsteder på mobile plattformer . Du kan bruke Adobe Edge Inspect, Google Chrome Emulation eller XIP.io for å nevne noen.Hvis du utvikler utelukkende i et OS X- og IOS-miljø, trenger du kanskje ikke disse tredjepartsverktøyene. Apple h

(Tekniske og design tips)