Măşti CSS pentru diverse butoane


WebDesignBox.ro a publicat ieri un foarte bine scris material despre Crearea şi aplicarea măştilor CSS. Punctul de pornire este o problemă specifică celor care dezvoltă situri cu ajutorul CSS şi au pretenţia de a permite vizitatorilor să schimbe designul după bunul plac, cel puţin schema de culoare. O soluţie este folosirea mai multor style-sheet-uri care să fie schimbate de vizitatori. Aşa ceva am folosit la situl partener Catholica.ro, unde – observaţi partea unde scrie Instrumente şi sunt şapte pătrate de şapte culori diferite – un vizitator poate să schime rapid schema de culori a sitului. Dar… şi aici vine ideea alternativă frumos explică de WebDesignBox… pentru aceasta a trebuit să creez de exemplu şapte imagini cu gradient pentru header-ul paginii! Există însă şi alte soluţii, mai practice…

img

În mod normal, dacă de exemplu dorim să avem butoane care la mouse-over să schimbe gradientul, vom crea atâtea imagini câte culori dorim să folosim. Dacă vrem să avem albastru şi roşu va trebui să facem deci două seturi de butoane, adică patru imagini în total:

img1

Dar se poate şi altcumva: creând o mască cu gradient ce poate fi apoi aplicată peste orice culoare. Aceasta înseamnă că vom avea doar două imagini (gradient şi gradient răsturnat pentru mouse-over) oricâte culori am dori! Dacă doriţi să aveţi şapte culori pentru sit, în loc de 14 butoane trebuie să pregătiţi doar 2. Asta da reducere de muncă… Şi eleganţă în implementarea CSS-ului.

img2

Recomand deci cu căldură articolul original pentru explicaţii detaliate dar şi pentru demonstraţii live ale soluţiei propuse:

http://www.webdesignbox.ro/crearea-si-aplicarea-mastilor-css

Imaginile din articol sunt © WebDesignBox.ro.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

1 comentariu


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *