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 / Szín- és háttérbeállítás stíluslappal

Tanulási útmutató

Összefoglalás

A leckében áttekintjük a szöveg- és háttérszín beállítási lehetőségeket, majd a háttérkép beállítási módokat vesszük sorba.

Szín- és háttérbeállítás stíluslappal

Ebben a leckében a szín, háttérszín és háttérkép beállítási módjait tekintjük át. Mielőtt ezt megtennénk, érdemes az akadálymentességi szempontokkal is megismerkedni.

Kapcsolódó akadálymentességi elvek

A WCAG 2.0 szabvány 1.4-es irányelve a megkülönböztethetőségről szól.

1.4 Irányelv: Megkülönböztethetőség: Könnyítsük meg a felhasználók számára a tartalom érzékelését (látását és hallását), beleértve az előtér és háttér megkülönböztethetőségét.

1.4.1 Színhasználat: Nem a szín az egyetlen vizuális módja az információ közvetítésének, a tevékenység jelzésének, a válaszadásra ösztönzésnek, vagy a vizuális alkotóelemek megkülönböztetésének. (A szint)

Vagyis ügyeljünk arra, hogy ne csak a szín hordozzon információt, mert a színtévesztő/színvak felhasználók számára ez nem megfelelő.

A színek használatánál ügyelnünk kell arra is, hogy az előtér és háttér között legyen akkora kontrasztkülönbség, hogy a szöveg jól olvasható legyen. Erről szól az 1.4.3-as teljesítési feltétel.

1.4.3 Kontraszt (Minimum): A szöveg és a képként reprezentált szöveg vizuális megjelenítése esetében a kontrasztarány minimum 4,5:1, kivéve az alábbi esetekben: (AA szint)

  • Nagybetű: A nagy betűmérettel szerkesztett szövegek és a nagy betűméretű képként reprezentált szöveg esetében a kontrasztarány minimum 3:1;
  • Járulékosság: Az a szöveg vagy képként reprezentált szöveg nem rendelkezik minimum-kontraszt feltétellel, amely inaktív felhasználói interfész alkotóeleme, vagy csupán dekoráció, vagy egy képen szereplő járulékos szöveg, vagy nem látható.
  • Logó típusok: A logóhoz vagy márkanévhez tartozó szövegek nem rendelkeznek minimum kontraszt feltétellel.

De hogyan tudunk meggyőződni a kontrasztarányról. Ha például a Mozilla Firefox böngészőt használjuk, akkor telepíthetjük a WCAG Contrast checker bővítményt, ami segíti az ellenőrzést.

Szöveg színének beállítása (color)

A szöveg színbeállítása korábban több példánkban is szerepelt, de úgy a helyes, hogy ebben a fejezetben is bemutassuk a color paramétert.

Értékek:

A color tulajdonság értékei öröklődnek. A paraméter használati módját a háttérszínnel együtt mutatjuk be.

Vissza a tartalomjegyzékhez

Háttérszín beállítása (background-color)

A background-color tulajdonsággal az elemeink háttérszínét állíthatjuk be.

Értékek:

A background-color tulajdonság értékei nem öröklődnek.

Példa - Színbeállítások

Interaktív példa
Magyarázat

A példában színkonstanssal (pl. azure, blue), hexadecimális (#0000ff), rgb, rgba és hsl megadással is látunk szín és háttérszín megadást. Fontos látni, hogy a 4. és 5. példában ugyanaz a háttérszín lett beállítva, mint a 3. példában, de ezeknél az átlátszóság értéket is módosítottuk.

Kapcsolódó akadálymentességi elvek

Ügyelni kell a színek és háttérszínek megadásánál arra, hogy eléggé kontrasztosak legyenek ahhoz, hogy a szöveget gyengén látó felhasználók is el tudják olvasni.

A Firefox böngészőbe érdemes telepíteni a WCAG Contrast Checker bővítményt, amellyel meg tudunk győződni arról, hogy a kontrasztarány megfelelő-e az oldalunkon.

Vissza a tartalomjegyzékhez

A háttérkép beállításai

A háttérkép megadása (background-image)

A background-image tulajdonság segítségével háttérképet állíthatunk be elemeinknek.

Értékek:

A background-image tulajdonság értékei nem öröklődnek.

A hátteret alapesetben mozaikszerűen fogja elrendezni a böngészőprogram, de ezt felülbírálhatjuk a később bemutatott módon.

Példa
Forráskód
 body {background-image:url(hatter.png);}

Háttérkép ismétlődése (background-repeat)

A background-repeat tulajdonság segítségével a beállított háttérkép ismétlődési szabályát állíthatjuk be.

Értékek:

Megjegyzés

A tananyag írásának pillanatában a space és round érték böngészőtámogatottsága még elenyésző. És sajnos a böngészők által biztosított fallback sem egységes, a Firefox például repeat értékkel helyettesíti a nem ismert space, illetve round értéket, a Chrome és Safari viszont no-repeat értékkel.

Példa - Háttér ismétlődés beállítások

Interaktív példa
Magyarázat

A fenti példában az összes felsorolt érték hatását látjuk (amennyiben a böngészőprogram támogatja. Sajnos a space és round érték támogatottsága egyelőre nem túl jó.

A háttér pozícionálása (background-position)

Az előbbi példában láthattuk, hogy ha a háttérkép nincs ismételve (no-repeat), akkor csak egyszer jelenik meg, alapesetben a bal felső sarokban. Azonban a háttérkép pozícióját tetszőlegesen megváltoztathatjuk a background-position paraméterrel.

Értékek:

Példa
Interaktív példa
Magyarázat

A fenti példákban igyekeztünk a kulcsszóval, képponttal, százalékkal történő pozícionálásra is példát hozni. Figyeljük meg, hogy a pozícionálásnak akkor is szerepe van, amikor a háttér ismétlődik, hiszen beállíthatjuk azt, hogy a kép milyen pozícióra kerüljön, ahonnan az ismétlődés elkezdődik.

A háttér elhelyezésének viszonyítási helyzete (background-origin)

A background-origin tulajdonság segítségével beállíthatjuk, hogy a background-position értékét mihez képest számoljuk.

Értékek:

Példa
Interaktív példa

A háttérkép rögzítése (background-attachment)

A background-attachment tulajdonsággal rögzíthetjük hátterünket, vagy éppen a tartalommal együtt gördíthetővé tehetjük.

Értékek:

A három érték közti különbséget egy komplex példán tudjuk bemutatni.

Példa
Interaktív példa
Magyarázat

A body elemnél fixed értéket állítottunk be a háttér rögzítéseként. Emiatt, ha a függőleges gördítősávot használjuk, a háttérkép egy helyben marad, nem gördül a tartalommal. Ha a fixed értéket scroll értékre átírjuk, akkor viszont már a háttérkép is gördül a tartalommal.

A helyzet akkor bonyolódik, ha olyan elemeket is elhelyezünk az oldalon, amelyeket önmagukban is lehet gördíteni. A példánkban négy ilyen divet hoztunk létre, korlátoztuk a magasságát és az overflow paraméterrel gördíthetővé tettük.

  • Az első divnél scroll értéket állítottunk be. Emiatt a háttérkép egy helyben marad a gördítésnél.
  • A második div esetén fixed értéket állítottunk be. Itt azt tapasztaltuk, hogy nem jelent meg a háttérkép, hiszen a fixed érték esetén az a viewport bal felső sarkától ismétlődik.
  • A harmadik divnél szintén fixed értéket állítottunk be, de a háttérkép pozícióját beálítottuk úgy, hogy a div területére essen, így már megjelent a háttérkép. Az is észrevehető, hogy ha az egész oldalt gördítjük, akkor a háttérkép más-más szeletét látjuk, mivel az az ablakhoz van rögzítve.
  • A negyedik divnél a local értéket állítottuk be. Azt tapasztaljuk, hogy a háttérkép együtt gördül a tartalommal.

A háttérkép átméretezése (background-size)

A background-size tulajdonság segítségével a héttérképünk méretét állíthatjuk be.

A background-size tulajdonság értékei nem öröklődnek.

Értékek:

Példa
Interaktív példa
Magyarázat

A fenti példában bemutattuk a méretezésre vonatkozó különböző beállításokat. Látható, hogy ha méretnek nagyobbat állítunk be, mint ami a kép fizikai mérete, akkor a felnagyított kép egy részletét fogjuk látni. A többi példa működése a leírás alapján egyértelmű.

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.