Crearea si aplicarea mastilor CSS

Pentru designeri, crearea si aplicarea mastilor (masks) reprezinta, spre exemplu, o metoda foarte des intalnita in modificarea regiunilor vizibile ale unei imagini. In acest articol voi incerca sa extind conceptul specific editoarelor grafice prin adaptarea acestuia la realizarea si implementarea mastilor CSS.

Ideea a venit in urma imposibilitatii temporare de a schimba intreaga paleta de culori a unei aplicatii web in functie de culoarea aleasa de utilizator. In acest moment probabil multi dintre voi se vor gandi la celebrul "Alternate Style Sheets" prin intermediul caruia, cu ajutorul unui script JavaScript, se poate comuta intre mai multe stiluri CSS. De acord, metoda are o aplicabilitate foarte mare... de la schimbarea fonturilor, culorilor, pana la schimbarea intregului layout. Problema intervine in momentul in care aducem in discutie eternii si fascinantii gradienti, omniprezenti in curentul Web 2.0In figura de mai sus sunt prezentate 2 nuante diferite ale aceluiasi "buton": link-ul albastru e inclus in CSS-ul default iar link-ul rosu in CSS-ul alternativ urmand ca, utilizand metoda "Alternate Style Sheets" mentionata anterior, sa-i oferim utilizatorului posibilitatea de a comuta intre cele 2 stiluri. In mod normal, ar trebui create urmatoarele 2 imagini (blue_bgrd.png si red_bgrd.png) cu dimensiunea 182x70px pe care le vom folosi ca background:... utilizand urmatorul CSS default:

a {
	display: block;
	width: 182px;
	height: 35px;
	font: bold 12px Verdana, sans-serif;
	text-align: center;
	text-decoration: none;
	line-height: 34px;
	color: #FFF;
	background: #0099FF url(blue_bgrd.png) no-repeat;
	}
 
a:hover {
	background-position: left bottom;
	}

a {
	display: block;
	width: 182px;
	height: 35px;
	font: bold 12px Verdana, sans-serif;
	text-align: center;
	text-decoration: none;
	line-height: 34px;
	color: #FFF;
	background: #D73030 url(red_bgrd.png) no-repeat;
	}
 
a:hover {
	background-position: left bottom;
	}

• in loc de 1 stil alternativ avem 5 stiluri alternative. Rezulta un numar total de 6 (5 + 1 default) background-uri si implicit o risipa atat din punct de vedere al timpului necesar crearii / exportarii imaginilor din editorul grafic cat si din punct de vedere al timpului necesar download-ului imaginilor la schimbarea stilurilor de catre utilizator.
• facem abstractie de exemplul anterior (schimbarea stilurilor folosind "Alternate Style Sheets") si ne intoarcem la ideea de baza a acestui articol: cum schimbam intreaga paleta de culori (inclusiv gradienti, bullet-uri, etc.) a unui layout in functie de preferintele utilizatorului (sau, de ce nu, in functie de cerintele clientului) si cum putem optimiza timpii de incarcare a unei pagini din acest punct de vedere ?!

Solutia acestor probleme consta in crearea si aplicarea mastilor CSS.

Gradienti

Fie ca este vorba despre un background fix (exemplul dreptunghiurilor cu colturile rotunjite din figura 1) sau unul repetitiv (exemplul gradientilor verticali sau orizontali), acestia se pot implementa folosind transparenta PNG-urilor ca masca pentru elementele stilizate din CSS. In continuare, voi incerca sa obtin prin intermediul acestei metode 2 "butoane" identice cu cele din figura 1.

Atat in prima etapa a acestui proces cat si in restul articolului voi utiliza Fireworks-ul ca editor grafic (cei care folosesc Photoshop-ul n-ar trebui sa aiba probleme in privinta adaptarii)

1) Fireworks > File > New (PNG32, 185x35px, #0099FF = culoarea de background a link-ului din CSS-ul default de mai sus)2) Rezulta canvas-ul urmator:3) Trasam un dreptunghi de culoare neagra care sa acopere canvas-ul in intregime (182x35px):4) Peste dreptunghiul negru trasam un deptunghi alb cu colturile rotunjite similar celui din figura 1:5) Selectam cele 2 shape-uri si combinam path-urile: "Menu > Modify > Combine Path > Punch". Rezulta urmatorul shape:6) Trasam din nou un dreptunghi alb cu colturile rotunjite (vezi pasul 4) si setam border-ul dupa cum urmeaza: culoare = negru, grosime = 1px, stil = "Pencil > 1-Pixel Soft", opacitate = 35% (stroke options > advanced > ink amount):7) Modificam culoarea acestuia din alb in negru si modul de umplere din solid in gradient vertical (de la negru la negru):8) Setam opacitatea pentru prima culoare a gradientului la 0:9) Ajustam opacitatea pentru a doua culoare pana obtinem un gradient asemanator cu cel al "butonului" albastru din figura 1:10) Modificam culoarea shape-ului obtinut la pasul 5) din negru in alb (* vezi notita de la subsolul articolului) si grupam (CTRL + G) cele 2 obiecte intr-unul singur:11) Marim canvas-ul pe verticala cu inca 35px (acum va avea 182x70px), clonam (CTRL + SHIFT + D) grupul obtinut la pasul 10) si pozitionam clona cu flip vertical sub acesta:12) Stergem culoarea canvas-ului (#0099FF - vezi pasul 1) si obtinem urmatorul rezultat pe care-l voi exporta in format PNG32 ca 'bgrd_mask.png':13) Scriem urmatorul CSS-ul default:

a {
	display: block;
	width: 182px;
	height: 35px;
	font: bold 12px Verdana, sans-serif;
	text-align: center;
	text-decoration: none;
	line-height: 34px;
	color: #FFF;
	background: #0099FF url(bgrd_mask.png) no-repeat;
	}
 
a:hover {
	background-position: left bottom;
	}

a {
	display: block;
	width: 182px;
	height: 35px;
	font: bold 12px Verdana, sans-serif;
	text-align: center;
	text-decoration: none;
	line-height: 34px;
	color: #FFF;
	background: #D73030 url(bgrd_mask.png) no-repeat;
	}
 
a:hover {
	background-position: left bottom;
	}

Bullet-uri si nu numai

OK, am vazut cum pot fi folosite PNG-urile pentru crearea mastilor CSS. O solutie asemanatoare vom folosit si pentru imaginile care nu necesita un numar prea mare de culori (<256). Voi lua ca exemplu un bullet utilizat recent si voi incerca sa creez masca necesara folosind GIF-uri transparente.

1) Fireworks > File > New (GIF, 10x11px, transparent)2) Rezulta canvas-ul urmator (zoom=1600% intrucat imaginea e mult prea mica pentru a observa detaliile):3) Inseram un bitmap gol (Edit > Insert > Empty bitmap), il coloram in alb (* vezi notita de la subsolul articolului) folosind Paint Bucket Tool (G) si iesim din modul bitmap:4) Aducem (CTRL + R) bullet-ul dorit in scena si-l blocam (nu mai poate fi selectat):5) In acest moment nu putem modifica decat bitmap-ul alb obtinut la pasul 3). Il selectam si stergem forma bullet-ului de la pasul 4) folosind Eraser Tool (E). Efectul operatiei nu se observa in timpul stergerii datorita bullet-ului care acopera bitmap-ul. Dupa finalizare deblocam bullet-ul si-l stergem, obtinand urmatorul rezultat:6) Exportam imaginea ca "bgrd_mask.gif" (GIF Exact cu Alpha Transparency) si scriem urmatorul CSS:

a {
	display: block;
	width: 10px;
	height: 11px;
	background: #0099FF url(bgrd_mask.gif) no-repeat;
	font-size: 1px;
	}
 
a:hover {
	background-color: #D73030;
	}