Lag Single-Element Spinners og Loaders med CSSPIN

Du kan bygge noen fantastiske ting med CSS3, fra egendefinerte inputfelter til dropdowns og til og med vektorgrafikk . Disse teknikkene overtar raskt JavaScript, noe som gjør det enklere for utviklere å lage bedre brukeropplevelser.

En av de vanskeligste tingene å bygge er en loading spinner animasjon, men moderne CSS animasjon gjør det ganske enkelt.

For å spare tid å bygge fra grunnen, kan du bruke et bibliotek som CSSPIN med tonnevis av forhåndsdefinerte tilpassede spinnere . Alle disse animasjonene er gratis å klone og helt åpen, så du har full tilgang til å redigere koden som du ønsker.

Det er en bris å sette opp en spinner med dette biblioteket. Du kopierer bare CSS-biblioteket til siden din, og legger til de egendefinerte HTML-elementene uansett hvor du vil at de skal vises.

Disse tilpassede spinnere bruker bare ett HTML-element for å lage animasjonseffekten. Dette er stort fordi grafikk- og animasjonseffekten blir gjort rent gjennom CSS-klasser .

Og siden du har tilgang til kildekoden, kan du erstatte former, farger, størrelser og animasjonshastigheter som passer best for dine prosjekter.

Bare vær oppmerksom på at koden bruker MINDRE syntaks, så du må være kjent med det preprocessing-språket for å gjøre noen større endringer.

Men du kan finne mange enkle CSS-eksempler på hoveddemosiden, sammen med enkle instruksjoner på GitHub-siden.

Hvis du er kjent med npm eller Bower, er det alternative metoder for å installere biblioteket.

Uansett hvordan du får det installert, er dette et flott CSS animasjonsbibliotek for å jobbe med. Det er ment å være fullt modulær med god plass til nye spinnere, nye animasjoner og tilpasninger fra andre utviklere.

For å lære mer og bla gjennom all dokumentasjon, sjekk ut CSSPIN-repo på GitHub . Skaperen gjorde også en liten oppsettvideo som du kan se nedenfor.

Slik løser du ødelagt Windows-system med System File Checker

Det kommer en tid i alle Windows-brukerens liv når deres dyrebare maskin blir skadet uansett grunn. Når det skjer, kommer brukeren til å løse problemer som BSOD, feilmeldinger og jevne krasjer.Mens de fleste ville tenke på å omformatere og reinstallere sin kopi av Windows, viser det seg at det er enda en måte at operativsystemet ditt kan reddes . Nevnt

(Tekniske og design tips)

Grid.css - Et minimalt grid system for webutviklere

Større frontendrammer som Bootstrap kommer med egne gridoppsett . Men de kommer også med mye bagasje i form av forhåndsdefinerte sideelementer og JavaScript-komponenter.Hvis du leter etter et mye mindre og strømlinjeformet rutenettet, vil du elske Grid.css .Dette gratis open source-biblioteket kommer med det tradisjonelle 12-kol-grid-systemet som du kan strukturere for ethvert oppsett. CS

(Tekniske og design tips)