beállítások
CSS3 effekt létrehozás a könnyedén
Webes tippek, trükkök | 2011/06/29 | írta: ADMIN

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?

Egy blog fejlesztőknek és grafikusoknak

0
Bár sajnos a PrettyLoader oldalt már nem frissítik mégis hét év több mint 100 laoder design-ját lehet megtekinteni ...
2
Egy új oldal indításakor igen nagy szerepet játszik az, hogy a Google jól térképezze fel az oldalunkat és pontosan ...
0
A Google már pár év óta nyilvánosságra hozza az évvégén, hogy mik is voltak azok a kifejezések, amik az adott évben ...

Hírek a web világából

A netezés károsítja a környezetünket

Vajon belegondoltunk abba, hogy a világhálón töltött idő hány százalékát töltjük el ésszerű tevékenységekkel ...

A Microsoft hátráltatja a többi böngészőt

A Windows RT, vagy az új operációs rendszer tabletes verziójának felhasználói számára is elérhetővé kellene tenni ...

Honlap referencia kereső

Cégünk által készített weblapokat eddig ennyien látták:
45 284 705
ebből a mai napon 27 305 látogató volt

Miért a TotalStudio?

Nálunk Ön az első
Az Ön elképzelései és a mi kreativitásunk illetve szaktudásunk a garancia arra, hogy honlapja vagy grafikai megjelenése olyan legyen amilyenre mindig is vágyott.

Több éves tapasztalat
Cégünk munkatársai több mint kilenc éve foglalkoznak webfejlesztéssel, informatikával és szerverüzemeltetéssel, ezen idő alatt mindenre felkészültünk!

Verhetetlen minőség
Munkánkban nem ismerünk kompromisszumot! Mindig a legmagasabb minőségre törekszünk. A magunkkal szemben támasztott maximalizmus és a legújabb technológiák használata garantálja, ügyfeleink elégedettségét.

Gyorsaság és megbízhatóság
Nálunk nem kell heteket várni, hiszen honlapja akár öt munkanapon belül is elkészülhet a szerződés aláírásától, de a gyorsaság soha nem megy a minőség rovására!

Csatlakozzon Facebook-on

Sablon ajánlatunk

Sablon ajánlatunk

Az oldalt a Total Studio Kft. üzemelteti. Minden jog fenntartva.
Honlapkészítés, tárhely, domain, banner, webdesign, grafika