Uvod u svet CSS varalica
Web dizajn predstavlja kompleksnu veštinu u savremenom, tehnološki naprednom svetu. Jedan od ključnih koncepata u web dizajnu i razvoju jesu Kaskadni stilski listovi, poznatiji kao CSS.
Bez obzira da li kreirate novu web stranicu ili unapređujete izgled i doživljaj već postojeće objave na blogu, CSS vam može pružiti značajnu pomoć. CSS se koristi za detaljno podešavanje i prilagođavanje izgleda web stranice, sa ciljem da se posetiocima omogući bolji i prijatniji način pregledanja sadržaja.
Ipak, specifikacije CSS-a se konstantno razvijaju kako bi zadovoljile zahteve modernog dizajna. Stoga, web programerima i dizajnerima može biti izazovno da upamte sve detalje i prate najnovije promene.
Iz tog razloga, pripremili smo listu nekih od najboljih CSS varalica, koje vam mogu poslužiti kao brzi referentni vodiči kako biste osvežili svoje znanje i bili u toku sa najnovijim trendovima.
Evo nekih od najkorisnijih resursa:
htmlcheatsheet.com: Ova web stranica predstavlja još jedan izvrstan izvor informacija o CSS-u. Ona obuhvata osnovne koncepte, kao što su sintaksa, interni i eksterni stilovi, inline stil, model kutije, i druge ključne teme.
Pored toga, pokriva i selektore, svojstva, birač boja, pozadinu, preglede, gradijente, senke okvira, generatore dugmadi, senke teksta, generatore fontova, transformacije, okvire/konture, radijuse ivica, medijske upite, CSS reset i još mnogo toga. Na stranici se nalaze i video snimci sa uputstvima za primenu ovih koncepata u vašim projektima.
Univerzitet Stanford: CSS varalica Univerziteta Stanford je lako razumljiva i jednostavna za praćenje, a možete je besplatno preuzeti. Sadrži informacije o kaskadnim stilskim listovima, sa fokusom na svojstva fonta, pozadine i boja, tekstualna svojstva i svojstva klasifikacije.
Ova varalica, koja se prostire na dve stranice, takođe obuhvata detaljno svojstva kutije, pomažući vam da dizajnirate sa profesionalnom veštinom.
WebsiteSetup: Ovo je jedna od najobimnijih CSS varalica koju možete pronaći na internetu. Sadrži 29 stranica i organizovana je u nekoliko odeljaka koji pokrivaju pasuse, fontove, okvire, pozadine, kolone, tekst, pozicioniranje mreže, boje i još mnogo toga. Autor je takođe uključio sve CSS oznake/div elemente.
Možete je pregledati online ili besplatno preuzeti u formatu za štampu. Ovaj resurs je koristan za svakog dizajnera, posebno za početnike.
Codecademy: Codecademy nudi odličnu CSS varalicu koja služi kao brzi vodič za razjašnjavanje koncepata. Obuhvata različite CSS teme, uključujući sintaksu i selektore sa vizuelnim pravilima, prikaz i pozicioniranje, model okvira, tipografiju i boje.
Možete je koristiti za podešavanje veličine fonta, boje pozadine, neprozirnosti, težine fonta, poravnanja teksta, URL-ova resursa, ključnih reči imena boja i još mnogo toga. Takođe je možete preuzeti na svoj uređaj ili sačuvati kao obeleživač u svom pretraživaču.
Hostinger: Bez obzira da li ste profesionalni dizajner ili početnik, ova sveobuhvatna varalica može vam pomoći da se prisetite ključnih koncepata. Sadrži osnove CSS-a, kao i napredne teme, a možete je preuzeti u PDF formatu.
Varalica obuhvata uobičajena CSS svojstva i vrednosti kao što su okvir, model kutije, prelazi, font i boja. Kustoska je i pažljivo strukturirana kako bi se obezbedio dobar pregled pre preuzimanja.
lesliefranke.com: Ako preferirate varalice na jednoj stranici, ovo je resurs za vas. Teme su predstavljene sa minimalističkim dizajnom, koristeći belu pozadinu, crni tekst i braon akcente. Pokriva sintaksu, model kutije, opšte koncepte, okvir, poziciju, pozadinu, font, listu i tekst.
Dodatno, autor je uključio i neke stenografske izraze, pseudo selektore, komentare, tipove medija i jedinice za vašu lakšu upotrebu.
devhints: Ova stranica je odlična za profesionalne dizajnere koji traže CSS varalice iz različitih oblasti. Sve je dizajnirano kako bi se olakšalo razumevanje sadržaja, koristeći suptilne boje. Sadrži informacije o selektorima, kombinacijama, pseudo-klasama, varijacijama pseudo-klasa, svojstvima fontova sa primerima.
Takođe možete pronaći informacije o pozadini, animacijama sa primerima, događajima i još mnogo toga.
dgiiit.github.io: S obzirom na to da su početnici često preplavljeni velikom količinom informacija, ova varalica može biti od velike pomoći. Na ovoj lako čitljivoj, jednostraničnoj CSS varalici, možete pronaći osnovne CSS oznake i koncepte. Dizajnirana je sa svetlo plavim bojama i belom pozadinom, i sadrži ključne informacije za brzo podsećanje.
Ovde ćete pronaći CSS oznake za selektore, tekst, okvire, model kutije, pozicioniranje, ivice i liste, kao i druge relevantne teme.
OverAPI.com: Ova stranica je dobar resurs za varalice, uključujući i CSS. Možete koristiti dugme za pretragu da pronađete određenu stavku koja vas zanima ili samo pregledati stranicu kako biste brzo stekli uvid u osnove tokom dizajniranja. Koristi umirujuće boje, kao što su zelena, plava i siva, sa belim tekstom koji nije naporan za oči.
CSS teme koje ovde možete pronaći su model kutije, selektori, stil, elementi, CSS3 okvir, animacija, stranica, resursi i druge razne teme.
Lighthouselabs: Ukoliko preferirate sveobuhvatne varalice koje možete koristiti kao referencu kada se zaglavite sa konceptom, ova CSS varalica je pravi izbor za vas. Počinje sa osnovnom CSS terminologijom, kao što su vrednosti, svojstva i selektori, pružajući detaljne informacije sa primerima za svaki termin.
Pored toga, naći ćete i druge termine kao što su model kutije, kod za tekst i font, kod za pozadinu, kod za okvir i flexbox.
Zaključak
Nadamo se da će vam ovi resursi CSS varalica biti od pomoći kada god budete trebali da se podsetite CSS termina i kodova, bilo da želite da osvežite znanje ili ste nešto zaboravili tokom dizajna. Svi su kreirani sa ciljem da olakšaju proces web dizajna. Preporučujemo da ih sačuvate u pretraživaču ili na svom uređaju, kako bi vam bili pri ruci kada god zatrebaju.