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.

FormBucket - Bygg webskjemaer uten programmering

Det er lett nok å lage HTML-skjemaer, men håndtering av brukerinngang er en mye større oppgave. Hvis du ikke liker koding på backend, kan dette løses med FormBucket .Nå kan du bygge webskjemaer på frontenden mens du sender alle formdataene til FormBucket's backend - ingen programmering kreves . Netts

(Tekniske og design tips)

Finansiell rådgivning: 8 ting du bør vite innen 30

For mange mennesker, å være i "20-noe" tankegangen er en unnskyldning for å gjøre morsomme (noen ganger dårlige) økonomiske beslutninger. Mens å slå 30 ikke nødvendigvis er signifikant, sosialt sett, forventes vi å ha vår sammenkomst i denne alderen. Mange mennesker vil likestille det for å nå den neste milepælen i livet, som å bli gift og starte en familie.Disse milepæle

(Tekniske og design tips)