Category Archives: html

HTML

CSS3 nam donosi HSL model boja

Posted on by

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.

Add user style sheet, Web developer, prilikom razvoja

Posted on by

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 ).

Očistite CSS stilove: Dust-Me Selectors

Posted on by

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.