Legg Emoji-støtte til ditt nettsted med Emoji CSS

Emojis har tatt over digitale samtaler, og disse søte, små ikonene gjennomsyret raskt internettkulturen med et slag. De er nå en daglig del av våre liv, og du kan finne dem overalt fra desktop apps til WordPress.

Og hvis du noen gang har ønsket egendefinerte emojis på nettstedet ditt, er Emoji CSS det perfekte biblioteket å bruke.

Disse rene CSS-ikonene genereres med bakgrunnsbilder, slik at hver emoji har sin egen PNG-fil . Disse bildefilene er retina-klare, slik at de ser bra ut på alle skjermer.

Du kan også demo disse emojiene ved å inkludere den røde CSS-filen til nettstedet ditt. Filen refererer til selvbehandlede bilder på GitHub, slik at du ikke trenger å være vert for noe lokalt for å komme i gang.

På Emoji CSS-hjemmesiden finner du alle bildekodeklassene sammen med en prøve-demoutdrag . Når du har lagt til Emoji CSS-filen i dokumentet, er alt du trenger å gjøre, å legge til et element med .em- klassen, sammen med hvilken klasse som helst gjelder det spesifikke ikonet du vil vise.

Så for eksempel denne koden:

vil legge til 100 emoji direkte inn i nettstedets innhold. Du har godt over 200 forskjellige emojier å velge mellom, og prosjektet er åpen kildekode, så det er tilgjengelig for oppdateringer .

Best av alle Emoji CSS hjemmeside er super enkel å bruke. Bare klikk på et ikon, og du kopierer automatisk kildekoden til utklippstavlen slik at du kan lime den rett inn i HTML-en din.

Jeg vil være den første til å innrømme at ikke alle nettsteder vil ha nytte av dette Emoji-biblioteket, men sosiale nettverk og kommentarer støttede nettsteder kan forbedre brukerengasjementet ved å legge til emoji-støtte . Og med Emoji CSS-biblioteket, er dette praktisk talt en to-trinns prosess for å emoji opp nettstedet ditt.

Tre måter å lage HTML-dokumenter på fly

Å lage HTML-dokumenter på farten, med eller uten JavaScript, er noen ganger nødvendig. Hvorvidt målet er å vise en bekreftelsesside eller en iframe som inneholder en hel side, hvis dokumentet er enkelt nok, kan det enkelt settes sammen og serveres med enten data-nettadresser eller JavaScript .Men hvordan går det med det? Jeg

(Tekniske og design tips)

9 beste verktøy for å optimalisere animerte GIF-er

Animerte GIFer, men fascinerende og nyttige for å vise animasjoner, bruker mye mer båndbredde enn JPG, PNG og andre bildeformater. På nettsteder som viser GIFs mye betyr dette at lastetiden som kreves, er lengre, dvs. at nettsiden ser ut til å ta lengre tid for å fullføre.Heldigvis finnes det mange animerende GIF-optimalisatorer som kan bidra til å komprimere og optimalisere GIF, og minimere størrelsene deres. Dette

(Tekniske og design tips)