Menu     

CSS3 effekt létrehozás a könnyedén

A CSS3 lassan de biztosan elérkezik, a böngészők közül már csak az Internet Explorer széria áll hadilábon az új szabványrendszerrel, amely komoly grafikai megtakarítást hoz el számunkra. Most egy olyan eszközzel ismerkedünk, amely egyszerű grafikus felületen keresztül generál nekünk CSS3-as kódot így nem kell nekünk soronként megírni egy lekerekített áttetsző színátmenetes doboz CSS kódját.
Ahogy azt a bevezetőben is említettük egy végtelenül egyszerű eszközről van szó, ami a CSS3 Generator nevet kapta egyértelműen. A javascript alapokon fekvő oldalon csúszkák és színválasztók segítségével állítgathatunk be dolgokat, amiket aztán a program CSS3 nyelvre fordít és a kapott css állományt máris bepakolhatjuk a saját Style Sheet-ünkbe. A designért Eric Hoffman felet míg a programozást Peter Funk hajtotta végre, most ismerkedjünk meg a rendszerükkel.



Az oldal bal oldalán maguk a kezelőfelületek helyezkednek el míg a jobb oldalon az előnézet, ami természetesen azonnal változik, ha mi valamit változatunk.
Legfelül található egy edit basics gomb, amivel az egész doboz kezdeti állapotát állíthatjuk be ezek után lehetőségünk van a következők állítására:

border-radius: a doboz lekerekítésének mértéke. A + gombra kattintva megadhatjuk, hogy melyik sarok mennyire kerekedjen le.

box-shadow: a doboz árnyékvetésének mérete. A + gombra kattintva megadhatjuk milyen irányba vetítődjön az árnyék milyen messze legyen a doboztól milyen színű legyen illetve, hogy mennyire legyen mosott.

background-gradient: a háttér szín átmenetét állíthatjuk be. A + gomb megnyomásával megadhatjuk hogy milyen irányba menjen a színátmenet

opacity: a doboz áttetszőségét állíthatjuk.

Végül de nem utolsó sorban kiválaszthatjuk, hogy az Internet Explorer kicsit azért próbálja megjeleníteni ezeket az effekteket. A bekapcsolásával a kód egy kicsit nagyobb lesz, de legalább az IE rajongók némileg élvezik majd az amúgy igen komoly grafika szimplán programozott megjelenését.

Generáljuk le a kódot és rakjuk be a saját css-ünkbe és már kész is. Ugye, hogy egyszerű volt?

CSS3 effekt létrehozás a könnyedén

#totalstudio