Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Transzformációk és átmenetek /Átmenetek (transition)

Transzformációk és átmenetek

Átmenetek (transition)

Megjegyzés

Az átmenetek leírását a CSS Transitions dokumentum tartalmazza. Az alábbiakban ezek közül néhány, gyakrabban használt funkciót mutatunk be.

A transition tulajdonság segítségével időben dinamikusan változtathatjuk meg elemeink stílusát azok állapotváltozásai között.

Paraméterek és értékek:

A transition tulajdonság értékei nem öröklődnek.

A tulajdonságot egyszerűen tesztelhetjük például a :hover látszólag osztályt alkalmazva.

Példa - Átmenet példa

Interaktív példa
Magyarázat

A példában a :hover látszólagos osztályt használtuk ki az átmenet bemutatására. Látjuk, hogya figure elemnél definiáltuk, hogy melyik tulajdonságra milyen értékek vonatkozzanak.

A figure:hover szelektornál adtuk meg, hogy milyen tulajdonsága legyen a figure elemnek, ha fölévisszük az egeret. Ebben az esetben megnöveltük a doboz szélességét, még egy háttérképet állítottunk be, és megváltozott a háttér és előtér színe is, miközben a doboz elfordult.

Gyakorlat

Készíts egy tetszőleges menüt, ahol ha a menüpont fölé visszük az egeret, valamilyen átmenetet tapasztalunk!

Kapcsolódó akadálymentességi elvek

Az átmenetek készítése során akár azt is elérhetjük, hogy a tartalom felvillanjon. Ezzel azonban óvatosan bánjunk, mert az epilepsziás felhasználókból rohamot válthat ki.

A WCAG 2.0 szabvány 2.3-as irányelve kimondja:

2.3 Irányelv: Epilepsziás rohamok okozásának elkerülése: Ne tervezzen olyan tartalmat, amiről ismert, hogy rohamokat okozhat

Ha betartjuk a legszigorúbb teljesítési feltételt, miszerint a weboldalak nem jelenítenek meg olyan tartalmat, ami három alkalomnál többször villan fel egy másodperc alatt, akkor megfelelően jártunk el.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.