Már tudjuk, hogyan kell alapjaiból felépíteni egy weboldalt, tisztában vagyunk a galériaépítés rejtelmeivel is, viszont néha elveszünk az interneten terjedő információk rengetegében. Habár már a Websuliban is volt szó a CSS3 Generator nevű programról, amelyben például megismerkedhettünk a kerekített sarkokkal, ámde most megpróbálkozunk azzal, hogy egy kicsit összefoglaljuk, mit várhatunk a CSS3-tól, hogyan szebbítsük meg még jobban a Websuli által létrehozott oldalunkat, illetve a jQuery JavaScript-könyvtár újdonságait is bemutatjuk.
A kerekített sarok és ami mögötte van
Az utóbbi években a lekerekített sarkú dobozok reneszánszukat élik – szinte nincs olyan honlap, ahol ne lenne néhány kerekített sarkú ez, illetve az. Régebben a webdizájnerek különféle praktikákkal igyekeztek megoldani a dolgot, akadt olyan is, aki készített egy alap, nem kerekített sarkú dobozt, aztán abba ügyeskedte bele a Photoshopban levágott sarkokat, ámde szerencsénkre nekünk már egy apró kódrészlettel sikerülhet megoldani a problémát.
-moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;
Ebben az esetben a kódunk szerint az összes sarok 20 pixeles kerekítést kap. Hogyha egyesével szeretnénk kerekíteni a sarkokat, akkor rendelkezésünkre áll egy shorthand verzió is:
-moz-border-radius: 10px 20px 5px 0; -webkit-border-radius: 10px 20px 5px 0; -khtml-border-radius: 10px 20px 5px 0; border-radius: 10px 20px 5px 0;
Ez esetben a bal felső saroktól indulunk és úgy járjuk körbe a dobozunkat, tehát 10 pixeles kerekítést kap a bal felső sarok, 20 pixelest a jobb felső, ötöt a jobb alsó és nullát a bal alsó.
Fontos tudni, hogy a legtöbb iOS-alkalmazás azt támogatja, ha kiírjuk az összes sarkot külön-külön. Ha tehát iOS-re fejlesztünk alkalmazást, akkor elég a -webkit-es border-radius, a teljes kiírás pedig ez lesz (itt is ugyanúgy bal fentről indulunk a sarkok definiálása esetében):
-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 20px;
Átlátszóság
Két megoldás is van az átlátszóságra:
- a background-ban az rgba kulcsszó:
background: rgba(249,83,0,.5); --> itt a négy szám: piros, zöld, kék színek egyensúlya és az „alpha transparency”, amelynek az értékét pont után adjuk meg; a .5 a félig átlátszót jelenti, a 0 a teljesent, az 1 pedig az egyáltalán nem átlátszót. Ennek alapján a .8 már közelebb áll az átlátszatalnsághoz, a .1 pedig szinte alig látszik.
- és egy új kulcsszó, az opacity:
opacity: .5;
Itt nem adunk meg rgba-színt, csak az átlátszóság kulcsszava használatos. Vigyázzunk arra, hogy csak az egyik megoldás szerepeljen, mert ha mindkettő szerepel, akkor befolyásolják egymást és sokkal átlátszóbb lesz, mint ahogy akartuk egyáltalán.
Árnyékolás
Kétféle árnyékot lehet CSS-ben készíteni, a legáltalánosabb egy doboz árnyéka (ez box-shadow). A dobozárnyékot a böngészők (majdhogynem) legújabb típusai tudják megjeleníteni, de szerencsénkre ügyes programozóknak sikerült az IE régebbi verziói által támogatott dobozárnyékot készíteniük. A kód nagyon egyszerű:
-moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; filter: progid:DXImageTransform.Microsoft.Shadow (color='#888', Direction=145, Strength=3);
Ahol a legutolsó sor az IE összes verziója által támogatott dobozárnyék.
A számok magyarázata: balról az árnyék nagysága, fentről az árnyék nagysága, az árnyék lágysága (ez a szám kihagyható, a lenti példában ki is hagytuk) és az árnyék színe (természetesen rgba alakban is megadhatjuk, azaz itt is használhatjuk a fent említett átlátszóságot). Az 5px, amely esetünkben az árnyék lágysága; annyit jelent, hogy ennyire lesz az árnyékunk elmosva – minél nagyobb a szám, annál elmosottabb lesz az árnyék.
Az is megoldható, ha nem a dobozunk jobb sarka mögött szeretnénk árnyékolni, hanem épp fordítva: a bal felső sarok fölött; erre szolgál az inset kulcsszó, tehát:
-webkit-box-shadow: inset 5px 5px #000;
Több árnyék is lehet egy doboz esetében, ha vesszővel elválasztjuk őket egymástól.
A második árnyékolási fajta, ha a szövegünket árnyékoljuk, erre való a text-shadow, ami ugyanúgy épül fel, mint a box-shadow. Ennél csak egy árnyék lehet, illetve az inset elemet sem szabad használni.
h2 {font: 20px Sans Serif;
text-shadow: 3px 3px 10px #000;
}
A betűk árnyékosításával rengeteg remek dolgot lehet végezni, például fényt vagy mélyítést is adhatunk a szövegünknek. Lássuk például a fénylő szöveget:
text-shadow: 0px 0px 100px #FC0;
Iniciálé készítése
Ez esetben pszeudoosztályokkal fogunk dolgozni, azaz érdemes megérteni a boxmodellt, amely a CSS egyik alapja. Eszerint az egész honlap szülő és gyermek elemből épül fel. A könnyebb megértéshez telepítsük a böngészőnkbe a Dom Inspector nevű Firefox-addont, amely a kiválasztott honlap esetében megmutatja, hogy mik a szülő (azaz parent) és mik a gyermek (azaz child) elemek. Példánkban az iniciáléhoz a szövegünk első elemét kell kijelölni:
.sima:first-letter
{
font: 60px Georgia;
float: left;
padding: 10px;
}
De a first-letter helyett kijelölhettük volna a szöveg akármelyik másik részét is, tehát ha a szülő elem negyedik gyerekével akarunk valamit csinálni, akkor a first-letter helyére nth-child(4)-et kellett volna írnunk, de ez ugyanúgy lehetett volna az első (first-child) vagy az utolsó (last-child) child elem is.
Grádiensek, avagy színátmenetek
Kétféle színátmenetet használhatunk a CSS3-ban, lineárist és radiálist (kör alakú színátmenet), azonban a hétköznapi kódolásban a lineárist alkalmazzuk az esetek kilencven százalékában, illetve a radiális színátmenetet egyáltalán nem támogatja az Internet Explorer egyik kiadása sem, míg a lineárist igen. A Firefox színátmeneteinek meghatározása eltér a többi böngésző által alkalmazott „webkites” megoldástól, így mind a kettőt definiálnunk kell.
Az alap színátmenet kódja:
{
background-image: -webkit-gradient(
linear,
left bottom,
right top,
from(rgb(209,209,209)), to(rgb(194,188,189)))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(209,209,209) 40%,
rgb(194,188,189) 70%
);
filter: progid:DXImageTransform.Microsoft.gradient
(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(GradientType=0,startColorstr='#d1d1d1', endColorstr='#c2bcbd')";
}
A legfelső kód a Chrome és Safari böngészők felhasználóinak szól, az alatta levő kód a Firefox-felhasználókat célozza, a százalékok azt jelentik, hogy mekkora helyet fognak elfoglalni a színek az adott dobozból vagy háttérből. Mennél nagyobb közöttük az átfedés, annál mosottabb lesz a színátmenet közöttük.
