Smecherii de CSS

ClaUdiu · Incepator Data inscrierii: 19/Noi/2007 Mesaje: 83

Omenirea in care traim inclina din ce in ce mai mult inspre superficialitate si individualism. Pe de-o parte, vedem stratul superficial al lumii la MTV si in sutele de top 10-uri care s-au facut pana acum. Pe de alta parte, avem placerea sa remarcam individualismul fiecaruia dintre noi in faptul ca fiecare are propriul lui set de top 10-uri, radical diferit de toate celelalte. Nu este un lucru rau: toti suntem diferiti si e natural sa avem preferinte diferite, nu-i asa?

Acestea fiind spuse, vreau si eu propriul meu top 10 si il vreau legat de CSS. M-am gandit sa pun la un loc metodele CSS pe care le folosesc cel mai des si sa le impartasesc cu voi aici. Desigur, fiecare va putea avea propriul lui top 10 in sectiunea de comentarii.

1. Opacitate
Nu neaaparat inițialul trick pe lista, insa întâiul de care imi aduc aminte. De-a lungul timpului, a rezolvat o multime de probleme legate de rollovere.

.opaque {
opacity: .5; /* Firefox et al */
filter: alpha(opacity=50); /* IE */
}

Este vorba de opacitatea unui obiect. Prin aceste doua reguli poti face un element de DOM cat de opac vrei tu. IE 5/Win nu recunoaste aceste reguli, dar este deja prea vechi ca sa ne mai intereseze. De asemenea, pe orice IE, respectivul element trebuie sa aiba specificat una din proprietatile de dimensiune, fie width, fie height. Aceasta este o consecinta nefolositoare a modului in care IE implementeaza filtrele.

Daca folositi rgb pentru a scrie culori in css, puteti scrie si asa: color: rgba(0,0,255,0.25), unde a vine de la alpha channel.

Ce se poate face? Vedeti http://www.partidulconservator.ro pentru niste rollovere. ALA are un produs prin care putem implementa acelasi efect, in anumite cazuri, prin PNG.

2. Formulare
Stilul meu de a face formuri este inspirat dintr-un articol de pe ALA si este singurul mod pe care il voi folosi de acum incolo. El implica liste:

<ul>
<li>
<label>Name:</label>
<input>
</li>
</ul>

Nu-i asa ca e frumos? Fiecare element al formularului are labelul sau, iar duetul acesta este plasat intr-un container li. Labelurile vor avea mereu urmatoarele reguli:

text-align:right;
float: left;
clear: left;

iar containerul ol/ul va fi setat pe display:block.

Metoda este exemplificata de mine pe itzone. Daca doriti ceva mai in-depth, mergeti la articolul ALA.

Mentionez ca toate meniurile le fac asemanator. De fapt, exista si un articol pe aceasta tema, tot pe itzone.

3. Colour contrast analyzer
Este o extensie pentru Firefox care analizeaza contrastul unei pagini aplicand o formula fiecarui set de colorații font/background setate din css. Daca nu doriti sa instalati extensia, puteti analiza contrastul manual, întrebuințând formula.

Extensia va va spune rata de contrast a fiecarei perechi de nuanțe din pagina voastra, fiind nespus de folositoare pentru a realiza un stylesheet cu contrast ridicat pentru cei ce nu vad bine sau au monitoare proaste si intunecate. Chiar daca nu credeti, diferenta de luminozitate dintre monitorul vostru si cel al userilor siteului vostru poate fi extraordinar de mare, mai ales in cazul LCD versus CRT mai vechi. In plus, unora nu le place ca ecranul lor sa fie prea luminos. Pe LCD-ul meu super-luminos am contrastul si brightnessul la zero 80% din timp.

Un alt exemplu: multe siteuri de content prefera fundale inchise. Caz in care contrastul nu mai este atat de intuitiv. Exista riscul ca textele sa nu poata fi citite. Am incercat o tema de forum in care utilizam verde pe negru, nu o alegere tocmai fericita, insa verdele era colorit ce trebuia folosita din motive de brand. Pe LCDul meu se vedea extraordinar. Pe CRTul amicului meu nu se putea citi nimic, iar Contrast Analizerul m-a convis repede.

O ultima observatie: extensia nu este compatibila cu Firefox 2.0. Din fericire, exista o varianta online. Ea se numeste GrayBit si este un analyzer vizual: va converti indiferent ce pagina in grayscale, pentru ca noi sa putem analiza contrastul.

4. em
Da, em. Em-ul este unitatea de baza pentru a masura pe ecran in mod relativ. Un Em reprezinta latimea standard a literei M pe care browserul o afiseaza (teoretic) cu fontul standard, la marimea standard. Astfel, Em-ul depinde atat de browser/OS cat si de rezolutie/spatiu de randare. Apropo de spatiul de randare, exista un studiu extrem de folositor care elucideaza misterul maximei latimi pe care trebuie sa o aiba siteul nostru pentru a fi vazut perfect (a se citi fara scrollbarul orizontal) de 95% din populatie.

Daca folosim em-ul peste tot putem obtine efecte deosebit de interesante, oferind userilor probabilitatea de a mari textul dupa plac. Din nou, exista un studiu care exemplifica diferentele dintre px si em. Uneori sunt chiar mari, si pentru cineva chiar conteaza.

5. Text
Daca tot suntem la text, css poate face fapte extraordinare in domeniul numit typography. Va puteti alege fontul dupa plac, insa aveti in vedere ca, pe ecran, sans-serif se citeste mai bine decat serif. Stim ca pe foaie este exact invers. Apoi va puteti alege colorație si dimensiunea (in em Razz ). Insa mai sunt si alte lucruri.

De obicei imi includ tot contentul de tip text in tag-uri de paragraf (p) si le stilez astfel:

font: 1.2em/1.8em helvetica sans-serif

Este un shorthand. Prima valoare numerica o reprezinta valoarea font-size, iar a doua line-height. Daca întâia va e cunoscuta cu siguranta, a doua s-ar putea sa puna ceva probleme. Ea se refera la spatiul dintre randuri, foarte folositor pentru a crește lizibilitatea.

Inca un lucru pe care il folosesc des cand vine vorba de text este text-transform. Acest atribut poate lua valorile: none, capitalize,uppercase sau lowercase. Este bine sa precizezi aceste lucruri in css mai degraba decat in html, pentru ca poti altera mult mai repede stilul.

6. Layouturi
O colectie de layouturi de baza a realizat necesara o data ce tabelele au murit definitiv. Din fericire, am dat peste un mic site care face întocmai acest lucru. Prefer sa las exemplele lui Owen Briggs sa vorbeasca, decat sa ofer o lista de linkuri catre diferite modele de layouting.

(c) apt-gaming