no.hideout-lastation.com
Opprett reduserte verktøytips i ren CSS med Wenk
Med et så merkelig navn, ville du ikke forvente mye fra Wenk, et gratis CSS-verktøytipsbibliotek . Likevel er det en av de minste biblioteker du kan få til å måle under 1KB når du gzipped.
Wenk bruker rent CSS med data-* attributter for å lage live verktøytips som du kan restylle og plassere til din smak. Best av alt, det er et helt gratis bibliotek med kildekoden tilgjengelig på GitHub.
Disse lette verktøytipsene er super enkle å legge til på nettstedet ditt. Du trenger bare Wenk.css filen lagt til i sidens overskrift, som du kan laste ned fra GitHub repo.Eller du kan til og med legge til CDN-filen som er vert på GitHubs CDN. Her er koden for det:
Eller, hvis du er en npm / bower-fan, kan du installere denne pakken fra terminalen .
Standard verktøytip-koder har ikke mye tilpassede data. De lar deg velge posisjon og bredde, men du må manuelt endre CSS hvis du vil at de skal utformes annerledes.
For eksempel vil du kanskje ha en CSS-pil lagt til verktøytipset som vises over verktøytipselementet. Dette er ganske enkelt å lage, men du må skure Wenk-stilarket for å finne den eksakte CSS-klassen for å utvide.
Her er et eksempel på noen standardkode for Wenk-verktøytips:
Vink til høyre! Den viktigste Wenk-destinasjonssiden inneholder levende demoer som du kan teste ved å svinge. Dette er de mest grunnleggende verktøytipsene du får, men de er perfekte for et bibliotek som veier mindre enn en kilobyte.
En viktig ting å vurdere er nettleserstøtte . Alle versjoner av Chrome og Firefox skal fungere fint . Samme med Opera 12+ og Opera Mini v8 +. Men IE8 og IE10 synes å ha problemer med å gjøre disse verktøytipsene. Heldigvis går markedsandelen raskt, men det er noe å vurdere før du bruker.
Jeg er fortsatt overrasket over hvor mye du kan gjøre med så få KBer. Wenk-biblioteket er et testament til moderne frontendutvikling, og det viser at litt kan gå langt.Du kan grave gjennom hele kilden på GitHub, sammen med live demoer og kodestykker for å sette opp og lage disse verktøytipsene for ditt eget nettsted.
30 Cool CSS Animasjoner du må se
Vi har tidligere publisert de kreative teksteffektene du kan lage med CSS, og mange andre kule ting du ikke trodde var muligens å gjøre med CSS. Denne samlingen fokuserer imidlertid på de mange tingene du kan animere med CSS, og mange av disse kreasjonene får deg til å heve et øyenbryn eller to.Fra å
Sass Best Practices: Tips og verktøy for utviklere
Mye som hvordan jQuery revolusjonerte vanilje JavaScript, har Sass revolusjonert vanilje CSS . De fleste utviklere som lærer Sass, er enige om at de aldri vil gå tilbake. Mange er også enige om at det største problemet med nye utviklere er slik de bruker Sass, ikke Sass selv.Jeg har slettet nettet og samlet denne artikkelen av beste praksis for å skrive ut utvidbar og gjenbrukbar Sass-kode . For
