De cand se discuta despre specificatia CSS3, dezvoltatorii au inceput sa-si doreasca din ce in ce mai multe optimizari ale acestuia. Printre acestea se afla si posibilitatea de a incarca variabile pentru limitarea codului repetitiv.

Pana acum credeam ca sunt doar zvonuri, dar se pare ca acestea incep sa se materializeze. Am citit recent acest articol care m-a pus pe ganduri. Se pare ca mai nou CSS3 stie sa intepreteze o proprietate numita currentColor.

Cum functioneaza? Iata un exemplu:

div {
	color: #f00;
	border: 5px solid currentColor;
}

Vestea buna este ca proprietatea este mostenita, asa ca pentru elementele descendente, nu mai trebuie definita odata valoarea lui color.

table {
	color: #C2C2C2;
}

td {
	border: 1px solid currentColor;
}

Din pacate, se pare ca nu toate declaratiile suporta aceasta “variabila”. Am incercat sa o folosesc intr-un box-shadow si a refuzat sa functioneze pe Chrome. In Firefox a fost ok.

Din pacate, in forma in care se afla acum, aceasta asa zisa variabila nu este foarte utila (cel putin eu nu-i vad utilitatea). Ce ma bucura pe mine este ca se fac pasi in aceasta directie. Se va lucra probabil la imbunatatirea acestor aspecte pana cand vor deveni cu adevarat utile.

In acest articol vom vorbi despre cateva efecte pe care le putem obtine folosind proprietatea text-shadow. Desi face parte teoretic din specificatia CSS3, proprietatea text-shadow este suportata mai demult de majoritatea browserelor de pe piata (dovada ca nu are nevoie de prefixe de genul -moz sau -webkit).

Bineinteles ca Internet Explorer nu suporta inca aceasta specificatie. Nu am instalat inca versiunea 9 a acestui browser, dar am auzit ca desi suporta proprietatea box-shadow, inca nu stie sa interpreteze text-shadow. Nici nu am de gand sa instalez browser-ul doar ca sa vad daca merge. Cand se va intampla acest lucru, am sa revin cu un update sa va anunt.

Dar inainte sa vedem ce putem face cu text-shadow, sa vedem cum functioneaza:

	text-shadow: 1px 1px 2px #DEDEDE;
	text-shadow: x-offset y-offset blur #color;

Sa vedem deci, cateva din efectele pe care le putem obtine folosind aceasta proprietate:

Primul este acela de  text embosat sau “ingropat”. Acesta se obtine in doua moduri, in functie de culorile cu care lucram. Daca textul este inchis la culoare, efectul se obtine prin adaugarea unui shadow de culoare foarte deschisa (chiar alba) in partea de jos. Codul arata asa:

	text-shadow: 0px 1px 1px #eee;
	background-color: #228B22;
	color: #333;

Iar rezultatul va arata asa:

Daca, in schimb, textul este de culoare deschisa acelasi efect poate fi obtinut aplicand un shadow de culoare inchisa in partea de sus a textului:

	text-shadow: 0px -1px 1px #111;
	background-color: #eee;
	color: #339C33;

Rezultat:

Dar cum facem daca vrem sa obtinem exact efectul invers? Daca vrem ca textul sa apara putin ridicat fata de restul continutului? In acest caz trebuie sa tinem minte ca ochiul uman tinde sa perceapa lumina ca venind din partea din stanga sus. Asta inseamna ca va trebui sa aplicam o umbra departata in jos si in dreapta fata de obiect.

Codul arata asa:

	text-shadow: 1px 1px 2px #000;
	background-color: #eee;
	color: #339C33;

Si va produce un rezultat care apare asa:

Bun, am vazut cateva efecte pe care le putem obtine cu jucand-u-ne cu offset-ul lui text-shadow. Dar sa ne concentram putin asupra valorii de blur. Ce putem face cu ea? Pai, sa va dau un exemplu.

Sa zicem ca vrem sa avem un text discret undeva in header-ul site-ului (sau in orice alta parte). Putem sa folosim un text de aceeasi culoare cu background-ul, pe care sa-l punem un evidenta cu o umbra fara offset, dar cu un blur mare. Sa vedem codul:

	color: #fff;
	text-shadow: 0px 0px 20px #000;

Iar rezultatul va arata asa:

Acestea sunt cateva din efectele care se pot obtine cu ajutorul lui text-shadow. Daca aveti idei pentru alte efecte interesante obtinute cu aceasta proprietate, va astept cu sugestii.

Vezi Demo

Cu ceva timp in urma, va aratam o metoda foarte utila de a include orice font direct in browser fara a mai fi nevoie sa folsim imagini. Articolul il puteti gasi aici.

Ceea ce m-a nemultumit la articolul respectiv a fost faptul ca bucata de cod era pur exemplificativa. Cei dintre voi care au testat in mai multe browsere au observat ca nu toate afisau in mod corect font-ul. Acest lucru se intampla pentru ca nu toate browserele randeaza in acelasi fel font-urile.

Unele se inteleg bine cu formatul .ttf, altele cu .svg sau chiar .eot. Dar pentru a scrie un astfel de cod, dureaza mult si trebuie sa fii atent sa nu-ti scape vreun detaliu.

Din fericire, cei de la Font Squirrel vin in intampinarea designerilor si dezvoltatorilor. Ei ne pun la dispozitie un “@font-face generator” care ia un font si nu numai ca scrie codul complet pentru embed, dar face si conversia in toate formatele necesare.

Ce trebuie sa faceti? Pai, mergeti pe un site care pune la dispozitie font-uri si alegeti ce vi se potriveste. Mergeti la http://www.fontsquirrel.com/fontface/generator si incarcati font-ul. Eu nu m-am obosit sa schimb nicio setare pentru ca pareau sa-mi satisfaca nevoile asa cum erau, dar daca va simtiti creativi…

Veti obtine la final o arhiva cu un demo complet si cu toate resursele de care aveti nevoie. Ceea ce va intereseaza de fapt este fisierul stylesheet.css unde veti gasi codul pentru embed. El ar trebui sa arate asa:

@font-face {
    font-family: 'ElderGodsBBRegular';
    src: url('eldergodsbb-webfont.eot');
    src: url('eldergodsbb-webfont.eot?iefix') format('eot'),
         url('eldergodsbb-webfont.woff') format('woff'),
         url('eldergodsbb-webfont.ttf') format('truetype'),
         url('eldergodsbb-webfont.svg#webfontKD3Yq3Hs') format('svg');
    font-weight: normal;
    font-style: normal;
}

Nu uitati sa includeti si font-ul in toate formatele. Degeaba avem codul daca nu ii dam si fisierele sursa.

Gata. Asta este tot ce aveti de facut. Si de aceasta data exemplul va merge in orice browser. Apropos, pentru cei care au incercat exemplul precedent si au intampinat probleme, codul de mai sus foloseste acelasi font.

Asa ca este de ajuns sa luati arhiva pe care v-am pus-o la dispozitie si extrageti font-ul in toate formatele. Dupa aceea inlocuiti numai apelul @font-face din codul vostru si ar trebui sa mearga. Succes.

Descarca Demo

In acest articol vom discuta despre o facilitate controversata pe care CSS3 urmeaza sa ne-o aduca. Am citit un articol la un moment dat in care autorul spunea ca nu stie daca sa numeasca sau nu aceasta proprietate inutila.

Eu o voi trata oricum, dupa care veti vedea si de ce. Proprietatea resize, caci despre ea vorbim, este facuta sa permita utilizatorului sa redimensioneze un element din pagina, cum ar fi un div sau un textarea. In principiu cred ca se aplica oricarui elemend de tip block.

Sintaxa arata asa:

resize: none|both|horizontal|vertical;

/* Mai in detaliu */

resize: none; // Nu permite redimensionare
resize: both; // Permite redimensionarea pe ambele axe
resize: horizontal; // Permite redimensionarea doar pe orizontala
resize: vertical; // Permite redimensionarea doar pe verticala

Dupa cum vedeti, proprietatea este destul de simpla si sintaxa este usor de inteles. Din pacate, in momentul acesta nu este suportata decat de Safari si Google Chrome (adica motorul Webkit).

De asemenea, se pare ca aceasta proprietate este trecuta in specificatia CSS3 ca fiind “incerta” si nu se stie daca va ajunge in versiunea oficiala. Deci, dupa toate acestea, de ce mai discutam despre ea? La ce ar putea fi ea utila vreodata?

Raspunsul depinde foarte mult de perspectiva din care privim lucrurile. Proprietatea resize nu este neaparat utila prin ceea ce permite ea utilizatorului, ci mai degraba prin ceea ce nu permite.

Unele browsere, cum ar fi Google Chrome permit implicit redimensionarea elementului textarea. Acest lucru nu este intotdeauna benefic, mai ales ca in unele situatii ne poate strica design-ul. Putem sa folosim in mod creativ proprietatea resize pentru a impiedica utilizatorul sa mai faca acest lucru:

textarea {
	resize: none;
}

Astfel, daca setam explicit faptul ca nu permitem redimensionarea elementului, acesta este blocat (la fel ca in celalalte browsere).

Vezi Demo

In felul acesta, privind din perspectiva potrivita putem folosi o proprietate aparent inutila in avantajul nostru.

In acest articol vom vorbi despre modul in care putem sa folosim fonturi non-standard in paginile web. Cu totii stim ca atunci cand alegem fontul pentru un proiect, trebuie sa avem grija ca acesta sa fie unul care se gaseste pe toate (sau majoritatea) calculatoarelor. Mai mult, de cele mai multe ori, desi folosim un font precum Arial tot trecem si familia generala sans-serif in eventualitatea ca ar exista vreun calculator care sa nu aiba acest font instalat.

CSS vine in ajutorul nostru si ne permite sa importam  orice font dintr-o locatie de pe disc. Astfel, nu mai avem nevoie sa ne limitam la cele cateva fonturi “web safe” si nu mai trebuie sa folosim imagini pentru titluri mai deosebite. Deci cum functioneaza?

Mai intai trebuie sa identificam fontul pe care dorim sa-l folosim. Eu am ales Elder Gods de pehttp://www.1001freefonts.com. Am folosit urmatorul markup:

<!DOCTYPE html>
<html>
	<head>
		<title>Sa ne jucam cu font-uri</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	</head>
	<body>
		<div id="wrapper">
			<h1>Fonturi diverse cu CSS3</h1>
		</div>
	</body>
</html>

Rezultatul va arata asa:

Acum sa vedem cum arata style.css:

Intr-un articol precedent va prezentam cateva din tag-urile pe care HTML5 le pune la dispozitie pentru structurarea paginii. De asemenea, acolo spuneam ca astept cu nerabdare ca standardul sa fie definitivat si adoptam de toate browser-ele (sau macar majoritatea lor).

Realitatea este ca HTML5 nu este suportat 100% de niciun browser la acest moment (cel putin nu din ce stiu eu). Si chiar daca exista un browser care ofera suport, nu putem dezvolta numai pentru el.

Deci nu putem inca sa dezvoltam website-uri in HTML5. Putem, in schimb, sa dezvoltam site-uri HTML5 ready. Cu alte cuvinte putem sa folosim un markup XHTML care sa poata fi transformat ulterior foarte usor in HTML5.

Bazat pe reprezentarea din articolul trecut, layout-ul XHTML ar trebui sa arate asa: