Munka a CSS3 kapacitáseszközökkel

() translation by (you can also view the original English article)

A CSS3 az egyik legkirályabb új webes technológia, amit a webfejlesztők most elérhetnek. Rengeteg funkciója közül néhánynak a használatával lehetséges reprodukálni azokat a hatásokat, amiket korábban talán Photoshoppal csináltál. A CSS kód sokkal jobban karban tarthatóbb, gyorsabban betöltődik, és követi a legújabb trendeket. Olvass tovább, hogy az általad is elérhető kapacitáseszközökről tanulj, és hogy megtudd, hogyan lehet őket kombinálni egy végső grafikai hatás létrehozásában.

A CSS3-nak rengeteg funkciója van, de néhányat kötelező megtanulni, ha Photoshop-szerű hatásokat szeretnél reprodukálni. Én ezeket az én "kapacitáseszközeimnek" hívom. A következők tartoznak bele.

Szegélysugár
Doboz árnyékok
Szöveg árnyékok
Színátmenetek
Többszörös háttér

Ezen funkciók mindegyike segíthet lecserélni néhányat azok közül a képek közül, amiket esetleg a Photoshopban készítettél még régebben. Ezekkel a weboldalak készítése sokkal kezelhetőbbé válik, mivel megváltoztathatsz egy tulajdonságot pusztán azáltal, hogy módosítod a CSS fájlodat – ahelyett, hogy megszerkesztenél egy képet Photoshopban. Valamint a weboldalad is gyorsabban fog betöltődni, mivel a képek sokkal több sávszélességet használnak. Fedezzük fel ezeket a funkciókat egyesével.

#1. kapacitáseszköz: Szegélysugár

Böngészőtámogatás:

Safari: 3.2+
Firefox: 3.0+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Mostanra már valószínűleg vagy milliószor hallottál a szegélysugárról. Nagyon könnyű használni és az összes modern böngésző támogatja. Ha még nem tudnád, a border radius a lekerekített sarkok létrehozásának módja a CSS-sel – nem szükséges hozzá kép! Vessünk egy pillantást a szintaxisára.

1
2	-webkit-border-radius: size;
3	-moz-border-radius: size;
4	border-radius: size;

Itt a három szintaxis, amit használnod kell. Az első a Webkit-alapú böngészőkhöz van, mint a Safari és a Chrome; a második a Mozilla-alapúakhoz, mint a Firefox; és a harmadik a nem előjelölt változat, azon böngészők számára, amik támogatják, beleértve az IE9-et, az Operát és a Safari 5-öt.

Egy 10 pixeles border radius alkalmazása egy diven a következőt eredményezi:

Oké, ez könnyű! Térjünk át a következő kapacitáseszközre.

#2. kapacitáseszköz: Doboz árnyékok

Böngészőtámogatás:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

A doboz árnyékok egy másik jól támogatott funkció. A szintaxisuk valahogy így néz ki:

1
2	-webkit-box-shadow: offset_x offset_y blur_radius color;
3	-moz-box-shadow: offset_x offset_y blur_radius color;
4	box-shadow: offset_x offset_y blur_radius color;

Ismét előjelölőket használunk a Webkit és a Mozilla számára. A box-shadow tulajdonság első és második paramétere a bal felső saroktól számított offszet helyzete az elemnek. Egy pozitív érték beállítása ezen tulajdonságoknak az árnyékot jobbra és lefelé mozgatja az elemtől, míg egy negatív érték balra és felfelé. A blur_radius az a méretű elmosás, amit hozzá akarsz adni az árnyékodhoz (milyen éles vagy elmosódott legyen). Végezetül az utolsó paraméter a szín, amit az árnyéknak szeretnél megadni. Egy árnyék hozzáadása az előzőleg lekerekített divünkhöz nagyon szép hatást kelt.

1
2	-webkit-box-shadow: 5px 5px 10px #555;
3	-moz-box-shadow: 5px 5px 10px #555;
4	box-shadow: 5px 5px 10px #555;

A CSS doboz árnyékok másik ügyes funkciója az inset kulcsszó. Amikor az inset kulcsszó jelen van, az árnyék a doboz külseje helyett belül fog megjelenni. Ez egy szép, benyomott hatást kelt, különösen a gombok esetén. Így nézne ki a divünk egy inset árnyékkal.

1
2	-webkit-box-shadow: 0 0 20px #333 inset;
3	-moz-box-shadow: 0 0 20px #333 inset;
4	box-shadow: 0 0 20px #333 inset;

A doboz árnyékok utolsó funkciója, amit érdemes megemlíteni, a többszörös árnyék ugyanazon az elemen. Ez nagyon hasznos, és azáltal válthatsz ki extra tageket a HTML-edből, hogy további árnyékot fűzöl hozzá. Csak annyit kell tenned, hogy több árnyékot kell létrehoznod, és vesszővel. Íme egy példa:

1
2	-webkit-box-shadow: 0 0 20px #333 inset,
3	20px 15px 30px yellow,
4	-20px 15px 30px lime,
5	-20px -15px 30px blue,
6	20px -15px 30px red;
7
8	-moz-box-shadow: 0 0 20px #333 inset,
9	20px 15px 30px yellow,
10	-20px 15px 30px lime,
11	-20px -15px 30px blue,
12	20px -15px 30px red;
13
14	box-shadow: 0 0 20px #333 inset,
15	20px 15px 30px yellow,
16	-20px 15px 30px lime,
17	-20px -15px 30px blue,
18	20px -15px 30px red;

#3. kapacitáseszköz: Szövegárnyékok

Böngészőtámogatás:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: Remélhetőleg hamarosan!

A szövegárnyékok olyanok, mint a dobozárnyékok, kivéve, hogy csak a szövegeknek adnak árnyékot a teljes elem helyett. Szerencsére a szövegárnyékhoz nincs szükség előjelölőkre.

1
2	text-shadow: offset_x offset_y blur_radius color;

A szövegárnyék tulajdonságai ugyanazok, mint a dobozárnyékoknál, kivéve, hogy nincs inset szövegárnyék támogatás. Íme egy demó, ami az egyébként láthatatlan szöveget láthatóvá teszi az oldalon.

1
2	color: #fff /* text color to white */
3	text-shadow: 0 0 50px #333;

Ez a következő hatást hozza létre:

Ahogy a doboz árnyékoknál, itt is lehetséges több szövegárnyékot létrehozni, vesszővel elválasztva. Íme egy példa, ami lángoló szöveghatást hoz létre.

1
2	text-shadow: 0 0 4px #ccc,
3	0 -5px 4px #ff3,
4	2px -10px 6px #fd3,
5	-2px -15px 11px #f80,
6	2px -18px 18px #f20;

A szövegárnyékok elképesztő hatásokat hozhatnak létre, és mások hatásait is nagyon szépen kiegészíthetik.

#4. kapacitáseszköz: Színátmenetek

Böngészőtámogatás:

Safari: 4+
Firefox: 3.6+
Chrome: 5+
Opera: Remélhetőleg hamarosan!
Internet Explorer: Remélhetőleg hamarosan!

A színátmenetek az egyik leghasznosabb elérhető funkciók a számodra, ha szemet gyönyörködtető hatásokat szeretnél létrehozni. Bár még mindig nem elérhető a teljes böngészőtámogatás, még mindig megadhatsz egy tartalék hátteret a támogatás nélküli böngészők számára. Emlékezz: A weboldalaknak nem szükséges ugyanúgy kinéznie minden böngészőn. Kétféle színátmenetet tudsz létrehozni: egyenes és körkörös átmenetet. Ahogy azt már jól sejted, az egyenes átmenet egy egyenes vonal mentén mozog, míg a körkörös kör alakban. A színátmenetek bárhol használhatóak, ahol korábban egy képet használtál erre, például háttérnek, szegély képnek, vagy listaelemnek.

A webfejlesztők balszerencséjére két különféle szintaxis van: egy a Mozillának és egy másik a Webkitnek.

Webkit szintaxis

A Safari és a Chrome ugyanazt a Webkit renderelő motort használja, így mindig ugyanaz a szintaxisuk. A színátmenet szintaxisuk nagyon egyszerű:

1
2	-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

A Webkit ugyanazt a szintaxist használja a vonalas és körkörös színátmenet esetén. Csak változtasd meg a type paramétert a köztük való váltáshoz.

Mozilla szintaxis

A Firefox külön szintaxist használ a vonalas és körkörös színátmenethez, és mindkettő nagyon különbözik Webkiter versenytársuktól.

1
2	-moz-linear-gradient( [<point> \|\| <angle>,]? <stop>, <stop> [, <stop>]*)
3	-moz-radial-gradient( [<position> \|\| <angle>,]? [<shape> \|\| <size>,]? <stop>, <stop>[, <stop>]*)

Nézzük meg külön-külön ezeket a szintaxisokat.

Vonalas színátmenet

Az egyszerűség kedvéért itt a Webkit szinatxis a vonalas színátmenethez.

1
2	-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)

A Firefox szintaxis így néz ki.

1
2	-moz-linear-gradient(angle start_x start_y, stop, stop...)

A Webkit szintaxisban a start_x és start_y paraméterek határozzák meg a színátmenet kezdőhelyét, az end_x és end_y pedig a végét. Használhatod bármelyik szabványos CSS dimenzió értéket ezekhez a pozíció paraméterekhez, beleértve a százalékot és az olyan kulcsszavakat értékként, mint a left, top, bottom, right és a center. A megállítások révén meghatározhatsz konkrét színeket, amiket a színátmenet bizonyos pontjain szeretnél használni. Annyi színmegállításod lehet, amennyit csak szeretnél, de legalább kettőnek lennie kell: egy kezdő és egy végszínnek. További színmegállításokért használhatod a color-stop() függvényt, ami egy pozíciót ad meg százalékos vagy egy 0 és 1 közötti decimális értékként, valamint egy színt is. Például: color-stop(50%, black) egy fekete színmegállítást hoz létre pontosan a színátmenet felénél. Léteznek kényelmes funkciók a 0% és a 100%, azaz a kezdő és végszínek megadására a kényelmesen használható from() és to() függvényekkel. Ezeknek csak a színt kell megadnod.

A Firefox szintaxisa sokkal kevésbé előremutató, és sokféle módon érhető el ugyanaz a cél. Az egyetlen állandó dolog a szintaxisban a színmegállítás, ami csak egy szín, amit egy százalékban megadott helyzet követ. A kezdő és végpozíciónál lehagyhatod a 0%-ot és a 100%-ot, és ha bármelyik másik színmegállítónál lehagyod a pozíciót, akkor egyenlően elosztva rakja ki őket a színátmenet során. Eltérően a Webkit szintaxistól, a Firefoxénak nincs végső pozíciója, csak egy kezdőpozíciója és egy szöge. A színátmenet a kezdő pozícióból indul ki a megadott szögben. Ha lehagyod a szöget, akkor függőlegesen fog indulni attól a ponttól. Ha elhagyod a kezdőpontot is, akkor a színátmenet felülről lefelé fog tartani. Ez a szintaxis egy kissé zavaró és kevésbé rugalmas, mint a Webkit egyszerű szintaxisa, ezért legegyszerűbb egy példával megtanulni.

Íme egy egyszerű CSS színátmenet használat közben. Ez a színátmenet a bal felső sarokból a bal alsó sarokig tart (más szavakkal felülről lefelé), pirosból fehérbe.

1
2	-webkit-gradient(linear, left top, left bottom, from(red), to(white));
3	-moz-linear-gradient(red, white)

Ezt beállítva egy div background tulajdonságának a következő eredményt kapjuk:

Hozzáadva egy színmegállítást és megváltoztatva a színátmenet szögét egy másik hatást kaphatunk.

1
2	-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
3	-moz-linear-gradient(left top, red, white, red);

Vonalas színátmenetek

Itt a vonalas színátmenet Webkit szintaxisa.

1
2	-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius,
3	outer_circle_center_x outer_circle_center_y, outer_circle_radius,
4	stop, stop...)

A Firefox szintaxisa valahogy így fest.

1
2	-moz-radial-gradient(center_x center_y, shape size, stop, stop...)

A Webkit szintaxisa egy kicsit bonyolultabb, mint a vonalas színátmeneté, de ugyanazok az elvek érvényesek rá. A körkörös színátmenetnek két köre van a Webkitben: egy kezdő- és egy végköre. Meghatározhatod ezen körök közepének X és Y pozícióját, valamint a sugarukat. Végül meg kell adnod a színmegállítókat ugyanolyan módon, mint a vonalas színátmeneteknél.

A Firefox szintaxisa a körkörös színátmenetre hasonlít a vonalasra, kivéve, hogy a színmegállítások kimaradhatnak. Hasonlóképp adhatod meg a színátmenet közepének X és Y pozícióját, mint a Webkit szintaxis esetén, de a Firefoxban nincs külső kör. Ehelyett meghatározhatsz egy alakzatot és a színátmenet méretét. Az alakzat lehet kör vagy ellipszis, mely utóbbi jelenleg nem hozható létre Webkittel. A méret rengeteg féle kulcsszót elfogad, de a pixelt nem – pedig azt vártad volna. Többet megtudhatsz ezekről az állandókról a Mozilla Developer Centeren. Ebben a bemutatóban mi csak az alapértelmezetteket fogjuk használni. Ismétlésképp, ha elhagyod a közepének X és Y pozícióját, akkor azt feltételezi, hogy az objektum közepét szeretnéd kitölteni színátmenettel. Ha kihagyod az alakzatot és a méretet, a színátmenet azt fogja feltételezni, hogy egy körről van szó és kitölti a teljes dobozt.

1
2	-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
3	-moz-radial-gradient(white, red)

Ha ezt a színátmenetet egy div hátterére alkalmazzuk, valami ilyesmit fogunk kapni.

#5. kapacitáseszköz: Többszörös háttér

Böngészőtámogatás:

Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Többszörös háttérrel könnyű összetett hatásokat létrehozni CSS-ben anélkül, hogy további jelölőket kellene létrehoznod a HTML-edben. A támogatás itt azt jelenti, hogy az elemeknek lehet többszörös színátmenete és kép háttere a szokványos háttérszín mellett. Nincs különbség a többszörös és a sima háttér szintaxisa között – csak válaszd el őket vesszővel és már kész is!

Íme egy példa egy divre színátmenetes háttérrel és egy szépen textúrázott hatással, ami képet használ:

1
2	background: url(noise.png), -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
3	background: url(noise.png), -moz-linear-gradient(#999, #333);

Duplán adtuk meg, mivel ahogy tanult, eltérő színátmenet szintaxisa van minden böngészőnek. Ez a következő hatást hozza létre:

A kapacitás kombinálása: Egy elképesztő CSS3 gomb készítése

Most, hogy öt nagy kapacitású eszköz áll rendelkezésünkre, kombináljuk őket, hogy egy még elképesztőbb hatást hozzunk lére.

Rengeteg különböző típusú gomb van, amit kiválaszthatsz megtervezésre. Hogy egyszerűbb legyen, utánozzunk valami olyasmit, ami már létezik – a Mac OS X gombstílusát.

Ehhez a demóhoz most elkészítjük a saját HTML kódunkat. Ez tényleg elég egyszerű, csak két DIV és némi szöveg.

1
2	<div class="panel">
3	<div class="button">Button</div>
4	</div>

Most már nekifoghatunk az alap CSS-ünknek. Először is stilizáljuk a panelt.


.panel {
    background: -webkit-gradient(linear, left top, left bottom, from(#bbbcbb), to(#959695));
    background: -moz-linear-gradient(#bbbcbb, #959695);
    background-color: #b7b9b7;
    width: 100px;
}

A panel csak egy szép tárolója a gombjainknak. Színátmenetes a tetejétől az aljáig, két szép szürke színnel. Azon böngészők számára, amik nem támogatják a színátmeneteket, egy tartalék háttérszín van megadva.

Most vessünk egy pillantást a tényleges gombra.


.button {
    display: inline-block;
    margin: 20px;

    padding: 3px 6px;
    font-family: 'Lucida Grande', Arial, sans-serif;
    font-size: 13px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    border: 1px solid rgba(0, 0, 0, 0.6);

    background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d));
    background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
    background-color: #c0c2c0;

    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;

    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px;

    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
}

Tisztes mennyiségű kód van itt, és használjuk az összes, fentebb leírt kapacitáseszközt, kivéve a többszörös hátteret. Van pár rész ebben a kódban, amit egyesével végigveszünk. Az első két sor csak némi egyszerű layout információ. A display: inline-block beállítja a gombnak, hogy automatikusan illeszkedjen a tartalomhoz, nem számít, mennyi szöveget teszünk a gombba. A következő rész némi betűtípus információt ad a gombhoz. Végül a harmadik részben használjuk az első kapacitáseszközünket: a szegélysugarat. Ebben az esetben a kedves kis gombunknak adunk egy szép 3px-es lekerekítést. Azután adunk egy szegélyt a gombnak. Vegyük észre, hogy itt rgba színt használunk. Ez lehetővé teszi számunkra, hogy a szín részben áttetsző legyen, szép, szürkés színt hozunk létre vele. A következő kódrészletben beállítjuk a gomb háttérszínét. Adunk egy színátmenetes, illetve egy egyszínű tartalék hátteret azon böngészők számára, amik nem támogatják még a színátmeneteket. Ezután a szövegárnyékot használjuk, hogy a szövegnek enyhe bevésést adjunk a gombra. Ismét rgba színt használunk, hogy részleges átlátszóságot adjunk fehérbe a szövegárnyéknak. Az utolsó kódrészlet egy dobozárnyékot hoz létre. Ez nem igazán néz ki árnyéknak, inkább egy második szegélynek tűnik, de enyhe kiemelést ad a gomb aljának, amitől a háttérbe vésettnek néz ki és illik a szegély színéhez. Hasznos ezt a trükköt ismerni, ha valaha is szeretnél többszörös szegélynek látszó kinézetet – én gyakran használom. Végül a CSS kód utolsó része egy ügyes trükk, ami megakadályozza a szöveg kijelölését Webkit alapú böngészőkben és Firefox alatt, és a kurzort az alapértelmezett nyíllá alakítja a szövegkijelölő kurzor helyett.

Idáig ez a kód ilyesmit csinált a gombunkból:

Oké, szóval nem rossz eddig! Adjunk a gombhoz egy kis benyomódott hatást.

1
2	.button:active {
3	background: #B5B5B5;
4	-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
5	black 0px 1px 3px inset,
6	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
7
8	-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
9	black 0px 1px 3px inset,
10	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
11
12	box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
13	black 0px 1px 3px inset,
14	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
15
16	text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;
17	}

Amikor a gombot lenyomják, sok dolgot megváltoztatunk. Először is, a hátteret egyszínűvé tesszük, eltávolítjuk a korábban beállított színátmenetet. Azt azért tesszük, mert benyomódott hatást szeretnénk a doboz árnyékkal egy színátmenet helyett. Ezután beállítjuk az árnyékot – vagy inkább több árnyékot. Az első árnyék a listában ugyanaz, amit a normál állapotnál használtunk: a gomb alsó részének kiemelése. A második és harmadik árnyék teszi a gombunkat benyomódott kinézetűvé. Az első ezek közül egy fekete inset árnyék a felső 1 pixelen, 3 pixelnyi elmosással – egy takaros, sötét kinézetű árnyék. Az utolsó árnyék szintén fekete, de enyhén átlátszó, ami az alsó 5 pixelre van beállítva, 12 pixeles elmosással. Ez egy sötétebb kinézetet ad a gomb alsó részének, amikor benyomódik. Az utolsó dolog, amit meg kell tennünk, hogy amikor a gomb lenyomódik, egyszerűen csak lecsökkentjük a szövegárnyék átlátszóságát egy kicsit, így nem mered ki előre.

Ez az! Elkészült a gombunk. Így néz ki a lenyomott változat:

Konklúzió

A képek lecserélésének CSS3-ra sok előnye van. Webfejlesztőként megkönnyíti a munkádat, mivel nem kell minden egyes alkalommal megnyitnod a Photoshopot, ha változást kell eszközölnöd a felhasználói felületeden. A weboldalad vagy webalkalmazásod gyorsabban betöltődik, mivel nem kell letölteni annyi nagy képet. Lehetővé teszi számodra egy sokkal gazdagabb, interaktívabb és kívánatosabb felhasználói élmény létrehozását, ami miatt a későbbiekben is vissza fognak térni ide.

Adok neked egy kis inspirációt, hogy milyen dolgokat lehet megcsinálni CSS3-mal. Ezek nem feltétlenül valós világbeli példák, de megmutatják, mire lehet jutni egy kis munkával.

Tiszta CSS3-mal készült iPhone

Az első demó, amit Jeff Batterton készített, egy iPhone, pusztán CSS3-mal – egy képet sem használ. Nagyon lenyűgöző, hasznosítja a CSS színátmeneteket, szövegárnyékokat, dobozárnyékokat, áttűnéseket és átalakításokat. Sajnos jelenleg csak az olyan Webkit alapú böngészőkön néz ki megfelelően, mint a Safari és a Chrome. Akár a te feladatod is lehet, hogy a demó Firefox alatt is működjön!

Tisztán CSS3 iOS ikonok

Egy másik demó, talán még elképesztőbb, amit Louis Harboe készített. Ez néhány iOS ikon újraalkotása tisztán CSS-ben, méghozzá nagyon valósághű! Ez a demó is csak Webkit alapú böngészőkön működik. Ha szeretnél többet megtudni arról, hogy ezeket az ikonokat hogyan alkották újra, vedd az irányt Louis Harboe blogja felé, ahol leírja a folyamatot.

Remélem tetszett ez a cikk! Nyugodtan keress fel a Twitteren, vagy írd le a gondolataidat hozzászólásként!