CSS biblioteke koje olakšavaju posao web dizajnerima
CSS je jednostavan jezik za dodavanje stila i opisivanje web dokumenata (na primer: boje, font, slike). Za brže, bolje i lakše ukrašavanje web sajtova, web dizajneri koriste najrazličitije biblioteke, a neke od njih ćemo vam predstaviti ovde. CSS biblioteke koje vam predstavljamo u mnogome će olakšati i animirati rad na vašim sadašnjim i budućim projektima. Pogledajte koje CSS biblioteke mogu biti od pomoći.
Imagehover.css
Imagehover.css je css biblioteka za dodavanje hover efekta na slici. Na svom sajtu korisnicima nude 40 besplatnih klasa sa različitim hover efektima. Takođe se ponose činjenicom da njihova biblioteka zauzima samo 19 kilobajt-a. U ponudi je i proširenje sa još 216 klasa, za čije korišćenje je potrebna doplata.
Da bi ste koristili ovu biblioteku potrebno je:
- #1 preuzeti fajl i isti uključiti u folder gde se nalazi vaš web projekat,
- #2 uključiti link gde se biblioteka nalazi u zaglavlju dokumenta,
<head>
<link rel=„stylesheet“ href=„css/imagehover.min.css“>
</head>
- #3 i na kraju dodati željenu klasu na sliku kojoj želite dodati hover efekat.
Spinners.css
Spinner.css predstavlja kolekciju html i css animacija u vidu rotirajućih slika. Ova biblioteka je namenjena za animaciju sajta dok se stranica učitava. Može se korstiti na mestima gde je potrebno signalizirati korisniku da se sadržaj učitava.
Da biste koristili ovu biblioteku potrebno je da:
- kliknete na animaciju koju želite da koristite,
- iskopirate html i css kod,
- i na kraju, kod zalepiti na web projekat.
Hamburgers.css
Hamburgers.css predstavlja skup css animiranih “hamburger“ ikonica. “Hamburger“ ikonice svoju primenu su našle kod kreiranja mobilnih responsivnih navigacionih menija. Ukoliko želite da koristite ovu biblioteku potrebno je da:
- #1 preuzmete i instalirate biblioteku,
<head>
<link rel=“stylesheet“ href=“dist/hamburgers.css“>
</head>
- #2 dodate kod da bi ste kreirali hamburger meni
<button class=”hamburger hamburger—collapse is-active” type=”button”>
<span class=”hamburger-box”>
<span class=”hamburger-inner”><span>
</span>
</button>
Hue.css
Hue.css biblioteka koristi se kao gradijent za pozadinu sadržaja. Na njihovom sajtu možete videti na delu primenu ovog sjajnog paketa, sa velikim brojem kombinacija sjajno uklopljenih osenčenja u pozadini elemenata, koji korisniku daju iluziju da se radi o 3D elementima.
Za korišćenje ove biblioteke potrebno je:
- preuzeti fajl sa sajta,
- dodati preuzeti fajl unutar foldera vašeg projekta,
- pozvati fajl unutar “head“ tagova,
- pozovati klasu koju želite da koristite na elementu.
Tipograf
Tipograf je mala i jednostavna css baza tipografija koja olakšava dizajn i upotrebu na web sadržajima, i koristi PostCSS, Less i SCSS. Ponose se činjenicom da je tipograf mali paket koji je veoma prilagodljiv dizajnerima i programerima.
Za instalaciju, najlakši način je iskopirati njihov CDN link unutar link taga vašeg projekta.
<link rel=„stylesheet“ href=„https://unpkg.com/tipograf/dist/tipograf.css“>
Animate.css
Animate.css je CSS biblioteka za dodavanje animacija. Pomoću nje možete animirati vaš sadržaj sa gomilom zabavnih animacija koje možete brzo i jednostavno uključiti u vaš projekat. Ova sjajna biblioteka kreirana je od strane Danijela Edena.
Preporučujemo da ovu biblioteku u vaš projekat uključite preko CDN linka tako što ćete:
- #1 iskopirani link zalepiti unutar head taga,
<head>
<link rel=„stylesheet“ href=„https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css“>
</head>
- #2 dodati klasu animated na element koji želite da animirate,
- #3 i za kraj, potrebno je dodati jednu od ponuđenih klasa.
Buttons.css
Buttons.css je sjajna css biblioteka za kreiranje dugmeta na sajtu, izrađena sa sass i kompas frejmvorcima. Uskoro stiže i najavljena druga verzija ove biblioteke. Možete se prijaviti na njihov newsletter kako bi ostali u dodiru sa najnovijim informacijama vezanim za ovu biblioteku.
Da bi ste koristili ovu CSS biblioteku ispratite sledeće korake:
- preuzmite dokument i dodajte fajlove na vaš web sajt.
- dodajte css u zaglavlju vaše web stranice.
- kreirajte dugme u vašem html kodu.
Internet sadrži brojne CSS biblioteke, koje imaju slične ili savsim različite primene od gore pomenutih CSS biblioteka. Ovo je samo mali deo svega onoga što možete pronaći na Internetu. Na vama je da odaberete one koje ćete najbolje prilagoditi svome radu za brz i efikasan dizajn web stranica, ili da programirate sami svoje “templejete” kako bi bili autentični i jedinstveni.
Ukoliko znate za još neke interesantne css biblioteke (sigurni smo da ih ima) za koje smatrate da smo ih neopravdano izostavili, ili ukoliko imate komentar na već objavljene biblioteke, slobodno nam se možete obratiti u komentarima.
