CSS Átlátszóság, médiatípusok

Elérkeztünk az utolsó CSS leckénkhez, melyben az átlátszóságot és a különböző médiatípusokat foglyuk megnézni. Kezdünk is neki...
Tehát az átlátszóság. Sokszor lehet szükségünk arra, hogy egy elem átlátszó legyen. Kétféleképpen tudjuk ezt megoldani. Az egyik az opacity tulajdonsággal lehetséges:

elem{
opacity:0.5; 
filter:alpha(opacity:40) /*Internet Explorer*/
}


Tehát ez azt jelenti, hogy az elem 50%-ban átlátszó lesz. Ha egy böngészőnek nem csúfolható programon (Internet Explorer) is meg szeretnénk nyitni az oldalt, akkor a filter:alpha(opacity:x) tulajdonságot használjuk.

A másik mód, pedig a szín megadásánál az rgba(r,g,b,a) használata. Ez a hagyományos piros, zöld, kék színmodellhez hozzáad egy alfa csatornát is, ami az átlátszóságot jelenti. Tehát:

elem{
background-color:rgba(255,255,255,0.5);
}


Az első szám a piros, a második a zöld, a harmadik pedig a kék. Az utolsó pedig azt jelenti, hogy hány százalékban legyen átlátszó (itt 50%).
Ez azért más, mint az opacity-s megoldás, mert míg az opacity az elemen belül mindent átlátszóvá tesz, addig az rgba csak a hátteret (vagy amire beállítjuk). Tehát pl. ha akarunk egy dobozt, aminek a háttere átlátszó, de van benne szöveg is, akkor az opacity-vel a szöveg is átlátszó lesz, az rgba-val a beállított szín.

---

A mai második témánk a médiatípusok.
Manapság már egyre több oldalt nyitnak meg okostelefonon vagy más eszközökön. A CSS lehetőséget nyújt arra, hogy a különböző eszközökön másképpen legyen formázva az oldal. A következőképpen tehetjük meg:

@media megjelenítő_típus
  {
  p {font-family:verdana,sans-serif;font-size:14px;}
  }


A kapcsos zárójelek között megadott formázás a megadott megjelenítőtípusban fog látszani.

all	Minden médiatípusra (alapértelmezett)
aural	Felolvasóprogramokhoz, szintetizátorokhoz
braille	Braille (vakírás) visszajelző eszközök
embossed	Braille (vakírás) nyomtatókhoz
handheld	Kézi eszközökhöz (okostelefon...)
print	Nyomtatókhoz
projection	Prezentációkhoz
screen	Számítógépekhez
tv	televíziókhoz

A CSS tanulását ezzel lezártuk. Legalábbis a W3-as tananyagot, mert ugye a tanulásnak sosincs vége. A W3 ajánlata szerint a következő, amit meg kéne tanulnunk a JavaScript. Úgy gondoltam, hogy a JavaScriptet majd csak jövőre, 2012-ben kezdjük el. Tartunk egy hét szünetet, utána pedig a már megszerzett tudásunkkal készítünk weboldalakat.  Tehát a téli szünetig (dec. 21)  minden héten elkészítünk egy weboldalt lépésről lépésre (tehát kettőt :D). A  szünet után pedig nekiállunk a JavaScriptnek. Ha bármilyen kérés van az elkészítendő weboldalakhoz, csak írjatok kommentet.