Web Tervezés - 4. Gyakorlat

CSS III.

Pseudo elemek

Pseudo elemek segítségével az egyes html elemek részeit is külön testre tudjuk szabni.
Nem ugyanaz, mint a pseudo szelektor. A pseudo szelektorral html elemeket tudunk kijelölni. A before és after elemek különlegesek. Segítségükkel nem létező elemeket tudunk elhelyezni a weboldalon.
Első sorban design szempontjából hasznosak. Úgy kell elképzelni, mintha lenne 1-1 div minden elem előtt és után, melyeket testre tudunk szabni.
Design trükkök

Rounded corners

A html elemek sarkainak lekerekítésére a border-radius szabály szolgál.
Mind a négy sarkot külön-külön lehet változtatni. A bal felső sarokból indulva az órajárással megegyező irányba haladva lehet megadni a mértékeket.

Árnyékok

CSS segítségével létre tudunk hozni árnyékokat is. Lehetőség van szöveg és html elem árnyékolásra is.
Egyszerre több árnyék is megadható. Minden árnyéknak van: x és y tengely menti eltolás, homályosítás és szín. Részletes bemutató

Transzformálás

Színezésen, méretezésen és pozícionáláson kívül komolyabb formázásokat is alkalmazhatunk css segítségével.
2D és 3D transzformációkat alkalmazhatunk, egyszerre többet is. Számít a transzformációk sorrendje.
A régi böngészők nem támogatják, illetve némelyik böngészőben prefix-et is meg kell adni. Részletek a linken. 3D transzformálás 2D transzformálás

Áttűnés

Azt már tudjuk, hogy számos lehetőségünk van a html elemek megjelenítésének manipulálására.
Sőt, az elemek bizonyos állapotait is testre tudjuk szabni (pl hover).
A css segítségével ezen állapotok közötti átmenetet is befolyásolhatjuk. Ez alapértelmezetten azonnali átmenet.
Megadhatjuk, hogy egy css tulajdonság milyen sebességgel váltson az állapotok között, sőt még az átmeneti görbét és a késleltetést is megmondhatjuk.
Megjegyzés: javascript segítségével dinamikusan módosított tulajdonságokra is érvényes az áttűnés.
Ez a tulajdonság nem érhető el a régi böngészőkben. Bővebb leírás

Animációk

Az előbbi szabály segítségével két állapot között tudunk megadni egy átmenetet, melynek a részleteit a böngésző automatikusa kitalálja.
Viszont előfordulhat, hogy mi testre akarjuk szabni ennek az átmenetnek a részleteit is.
Erre szolgálnak az animációk, mely folyamán kulcs képkockákat adhatunk meg, hogy egy időpillanatban milyen állapotban legyen az elem.
Ez a tulajdonság nem érhető el a régi böngészőkben. Bővebb leírás

Egyéb

A css még számos egyéb dologra használható, amiről nem volt szó. Például:

HTML5 média elemek

Manapság a flash elavult technológiának számít. Egyre kevesebb támogatást kap.
Viszont a HTML5 fejlődésével egyre több mindent tudunk megcsinálni flash nélkül is, ráadásul egységes felületet használva.
A HTML5-ös audio és video elemeket javascript segítségével vezérelhetjük, így saját kézzel összerakott div-ek/gombok használatával egyedi lejátszót készíthetünk.
Canvas és CSS animációk használatával pedig szinte csak a fantáziánk szab határokat a weboldal design-olásában.