Nemanja Srećković

Tek skoro sam primetio da nam CSS3 specifikacija izmedju ostalog donosi i HSL model boja. Kompletan CSS Color Module Level 3 imate ovde. Imali smo od ranije color: rgb(255,0,0), sad imamo i color: rgba(255,0,0,1), koji nam dodaje i opacity na boju.

color: rgb(255,0,0); color: rgba(255,0,0,1)

E sad, zasto je HSL bitan, prosto HSL je “prirodan model boja”, nema potreba da skacete u photoshop (ili gde vec) po nove #hex vrednosti, ili rgb vrednosti, jednostavno “podesavate”, dok ne dobijete zeljenu boju.

Evo ga primer sa w3 sajta, …

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* green */
* { color: hsl(120, 100%, 25%) } /* dark green */
* { color: hsl(120, 100%, 75%) } /* light green */
* { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */

HSL je skracenica za hue-saturation-lightness, namestite zeljenu vrednost (hue) i jednostavno podesavate zasicenje i svetlinu boje. ql.

Wappalyzer je odličan dodatak, add-on, za Firefox koji Vam izlistava softver koji je koriščen na sajtu koji ste upravo posetili. On jednostavno analizira stranicu tražeci poznate šablone u HTML kodu, i tako prepoznaje (manje više uspešno) šta se sve koristi, recimo koji CMS, wiki itd. Možete ga pronaći na firefox-ovoj stranici za dodatke. Probajte!

Primetio sam da imam naviku kad god sam u fazi “razvoja” css/html šablona prema dobijenom (ili kreiranom) PSD/PNG, da intezivno koristim Add user style sheet opciju kod Web developer dodatak za Firefox.

Naime meni lično najlakši način da se izborim sa IE/FF i slicnim dilemama je da ubacim: #ime_sloja {background-color:#00FF33;} za razlicite slojeve “nosece konstrukcije” samog šablona. Tako da tačno vizuelno mogu da primetim razliku između istih, a pritom ne moram stalno da dodajem dodatni stil na stranicu ili atribute u podrazumevani stil.

Zgodan način da se na brzaka proveri dal je sve “onoliko koliko treba da bude” ili se nešto pomerilo (šteta sto ne radi zajedno sa IE Tab dodatkom za FF ).

Stiže nam odličan alat od ekipe Sitepoint.com -a, odlična “Dust-Me Selectors” ekstenzija za Firefox (od verzije 1.5 pa naviše) koja će utvrditi koje selektore iz CSS ne koristimo. Ekstenzija će da pregleda sve selektore u CSS fajlu koji data stranica koristi i pošto vi pregledate sve HTML strane ekstenzija će da napravi listu selektora koji se ne koriste. Odlično!

Ovo mnogo pomaže kada radite (ili još bolje, nastavite tuđi rad) na nekom velikom projektu, i kada je tu stotine ako ne i hiljade linija CSS koda. U poslednjih par meseci sam imao prilike da radim na par većih projekata nego što sam navikao i ova mala alatka bi mi mnogo olakšala posao.

Jedna mala napomena, inline CSS kao i CSS iz blokova u samom HTML fajlu za sada nisu podržani, kao i još par sitnica

Uglavnom solidna alatka, više o tome možete pročitati i na sitepoint blogu.

Upravo sam naleteo da odličan link, na ovoj stranici možete pronaći kompletan spisak svih tagova u HTML-u, u tabeli je uključen i HTML 5.0 kao i XHTML 2.0, …

Na ovoj stranici imate 30tak odličnih html email šablona.

Skoro sam pokrenuo na DPT-u sličnu temu o stilizovanju select taga, a sad sam želeo da podelim sa vama interesantan link (u trenutku dosade naravno) o stilizovanju ovog taga u Safariju 3. Odličan tekst! Imate i ovde par odličnih (idete na tekstove levo i desno, dosta dobrih), iskreno na Safari nikada nisam obracao paznju (makar ne ovoliko u detalje) ali na zadnjih par projekata sam imao takve zahteve.

Promena: koji trip ladno mi je izrenderovao select u naslovu, ups.