Kihagyás

5.2. fejezet

A fejezet anyaga

A CSS további lehetőségei

A z-index tulajdonság

A HTML elemek pozicionálásakor előfordulhat, hogy bizonyos elemek takarják egymást. Alapértelmezett módon az egymást takaró HTML objektumok közül mindig a kódban később szereplő elem kerül előtérbe.

Az elemek mélységi sorrendjét a z-index CSS tulajdonsággal szabályozhatjuk. Ennek értéke tetszőleges egész szám lehet (akár negatív szám is). Ekkor az egymást takaró elemek közül az kerül előtérbe, amelynek nagyobb a z-index értéke. Az azonos z-index értékkel rendelkező elemek esetén a kódban később szereplő elem fogja takarni a másikat.

Példa: A z-index tulajdonság használata

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>A z-index tulajdonság</title>
    <meta charset="UTF-8"/>
    <style>
     div { width: 150px; height: 150px; position: absolute; text-align: right; }
     .first { background: tomato; z-index: 1; top: 50px; left: 20px; }
     .second { background: lightgreen; z-index: 100; top: 120px; left: 80px; }
     .third { background: lightblue; z-index: -1; top: 80px; left: 130px; }
    </style>
  </head>
  <body>
    <div class="first">z-index: 1</div>
    <div class="second">z-index: 100</div>
    <div class="third">z-index: -1</div>
  </body>
</html>

A kód kimenete

Lekerekített sarkok

A border-radius CSS tulajdonsággal lekerekített sarkú szegélyt adhatunk egy HTML objektumnak. A tulajdonság értékeként 4 paraméter adható meg: sorban a bal felső, jobb felső, jobb alsó és bal alsó sarkok sugara. Nem megadott paraméter esetén a szemközti saroktól öröklődik a sugár értéke.

Példa: A border-radius tulajdonság használata

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>A border-radius tulajdonság</title>
    <meta charset="UTF-8"/>
    <style>
      div { border: 3px solid black; margin: 10px; padding: 10px; }
      .first { border-radius: 0 10px 20px 30px; }
      .second { border-radius: 20px; }    /* itt minden sarok sugara 20 pixel lesz */
    </style>
  </head>
  <body>
    <div class="first">Ez egy lekerekített sarkú téglalap.</div>
    <div class="second">Ez egy másik lekerekített sarkú téglalap.</div>
  </body>
</html>

A kód kimenete

Árnyékok

CSS-ben a text-shadow tulajdonsággal adhatunk egy szövegnek árnyékot. A tulajdonság értékeként rendre 4 paraméter adható meg: a vízszintes eltolás, a függőleges eltolás, az árnyék elmosódásának mértéke és az árnyék színe. Az utolsó két paraméter elhagyható.

A box-shadow tulajdonsággal dobozszerű elemeknek is adható árnyék. Ennek értékeként rendre 5 paramétert adhatunk meg: a vízszintes eltolást, a függőleges eltolást, az elmosódás mértékét, az árnyék kiterjedését és az árnyék színét. Az utolsó három paraméter elhagyható.

Egy szöveghez vagy egy dobozhoz akár több árnyék is megadható, vesszővel elválasztva.

Példa: Árnyékok használata

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Árnyékok</title>
    <meta charset="UTF-8"/>
    <style>
      #paragraph { text-shadow: 2px 5px 5px red; }
      #box { border: 2px solid black; box-shadow: 0 3px lightblue, 0 2px 25px yellow; }
    </style>
  </head>
  <body>
    <p id="paragraph">Ez egy árnyékkal rendelkező szöveg.</p>
    <div id="box">Ez egy árnyékkal rendelkező doboz.</div>
  </body>
</html>

A kód kimenete

Pseudo-elemek

Ha egy HTML objektum egy specifikus részét szeretnénk formázni (pl. egy szöveg első betűjét vagy első sorát), akkor használjuk a CSS pseudo-elemeket. Ezeket a szelektor után, dupla kettősponttal adjuk meg: szelektor::pseudoelem.

A fontosabb pseudo-elemek:

  • ::before: generált tartalom közvetlenül az elem előtt
  • ::after: generált tartalom közvetlenül az elem után
  • ::selection: a kijelölt szövegrész
  • ::first-letter: a szöveg első karaktere
  • ::first-line: a szöveg első sora.

Példa: Pseudo-elemek használata

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Pseudo-elemek</title>
    <meta charset="UTF-8"/>
    <style>
      /* Ha egérrel kijelöljük egy bekezdés szövegét, akkor a kijelölés háttérszíne világoszöld lesz */
      p::selection { background-color: lightgreen; }

      /* A bekezdések első betűje megnövelt betűméretű és piros színű lesz */
      p::first-letter { font-size: 120%; color: red; }

      /* Minden bekezdés után beszúrjuk a " (bekezdés vége)" szöveget */
      p::after { content: " (bekezdés vége)"; }
    </style>
  </head>
  <body>
    <p>Első bekezdés</p>
    <p>Második bekezdés</p>
    <p>Harmadik bekezdés</p>
  </body>
</html>

A kód kimenete

Megjegyzés

Ne tévesszük össze a pseudo-elemeket a korábban tanult pseudo-class-okkal! Emlékeztetőül: a pseudo-elemekkel ellentétben a pseudo-class-ok állapotuk alapján jelölnek ki HTML objektumokat. Például a :hover pseudo-class-szal megadott formázások akkor lesznek érvényesek, ha a kurzor az objektum fölött áll.

A régebbi CSS verziókban a pseudo-elemeket és a pseudo-class-okat is 1 darab kettőspont után adtuk meg. A dupla kettőspontos szintaxis CSS3-ban került bevezetésre a pseudo-elemek megadására, ugyanakkor kompatibilitási okok miatt a legtöbb böngésző a régebbi, egyszeres kettőspontos szintaxist is támogatja ezeknél.

Transzformálás

A transform CSS tulajdonsággal 2-dimenziós, illetve 3-dimenziós transzformálásokat adhatunk HTML elemeknek. A transzformálás lehetőséget nyújt többek között elemek eltolására, forgatására, skálázására és elferdítésére.

A tulajdonság néhány fontosabb értéke:

  • translate(x, y): eltolja az elemet a jelenlegi helyéhez képest
    • x: vízszintes eltolás (pozitív érték esetén jobbra, negatív érték esetén balra tolja el)
    • y: függőleges eltolás (pozitív érték esetén lefelé, negatív érték esetén felfelé tolja el)
  • rotate(ndeg): elforgatja az elemet n fokkal (pozitív n esetén az óramutató járásával megegyező, negatív n esetén az óramutató járásával ellenkező irányba forgat)
  • scale(w, h): a megadott szélesség- (w) és magasság-aránynak (h) megfelelően nyújtja vagy zsugorítja az elemet
    • scaleX(n): n-szeresére nyújtja vagy zsugorítja az elem szélességét
    • scaleY(n): n-szeresére nyújtja vagy zsugorítja az elem magasságát
  • skew(xdeg, ydeg): elferdíti az elemet (az X-tengely mentén x fokkal, az Y-tengely mentén y fokkal)
    • skewX(ndeg): elferdíti az elemet az X-tengely mentén n fokkal
    • skewY(ndeg): elferdíti az elemet az Y-tengely mentén n fokkal
  • matrix(scaleX, skewY, skewX, scaleY, translateX, translateY): a fenti tulajdonságok összevont megadása
  • rotateX(ndeg): elforgatja az elemet az X-tengely körül n fokkal (3D transzformáció)
  • rotateY(ndeg): elforgatja az elemet az Y-tengely körül n fokkal (3D transzformáció)
  • rotateZ(ndeg): elforgatja az elemet a Z-tengely körül n fokkal (3D transzformáció).

Példa: Egy HTML elem vízszintes és függőleges középre igazítása a weboldalon belül

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Transzformálás</title>
    <meta charset="UTF-8"/>
    <style>
      html, body { height: 100%; }
      body { background: linear-gradient(180deg, cyan, magenta); font-family: sans-serif; }

      .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);   /* eddig: függőlegesen középre igazítás */
        margin: 0 auto;                     /* elem vízszintesen középre igazítása */
        text-align: center;                 /* szöveges tartalom vízszintesen középre igazítása */
        background-color: rgba(0, 0, 0, 0.33);
        color: #fff;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class="centered"><h1>Üdvözöllek!</h1></div>
  </body>
</html>

A kód kimenete

Példa: Egy HTML elem eltolása és 45 fokkal való elforgatása

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Transzformálás</title>
    <meta charset="UTF-8"/>
    <style>
      .rotated {
        transform: translate(80px, 50px) rotate(45deg);
        width: 120px; height: 120px; padding: 10px;
        background-color: #fefbaf;
      }
    </style>
  </head>
  <body>
    <div class="rotated">Valami elborult tartalmú cetli...</div>
  </body>
</html>

A kód kimenete

Megjegyzés

A transzformálás a régebbi böngészőkben nem érhető el.

Áttűnések

A 3. fejezetben említettük, hogy a HTML objektumoknak különböző állapotai lehetnek (pl. ha az objektum fölé visszük az egeret, vagy ha az objektumra kattintunk). Az áttűnések segítségével az egyes állapotok közötti átmeneteket befolyásolhatjuk.

CSS-ben áttűnéseket a transition tulajdonsággal készíthetünk. Értékéül két jellemzőt kell megadnunk: a CSS tulajdonságot, ami az áttűnés során megváltozik (az all kulcsszóval minden tulajdonságot figyelembe veszünk), valamint az áttűnéshez szükséges időt (másodpercben). A transition tulajdonság értékéül több átmenet is megadható, vesszővel elválasztva.

A transition-timing-function tulajdonsággal az átmenet időbeli lefolyásának jellemzőjét is beállíthatjuk:

  • ease: kezdetben lassú, majd gyors, végül pedig ismét lassú állapotváltás
  • linear: egyenletes sebességű állapotváltás
  • ease-in: gyorsuló állapotváltás
  • ease-out: lassuló állapotváltás
  • ease-in-out: gyorsuló, majd lassuló állapotváltás.

Példa: Ha a kurzor a példában szereplő kártyák valamelyike fölött áll, akkor kiemeljük az elemet a környezetéből formázásokkal. Az áttűnésnek köszönhetően a stílusváltás nem hirtelen, "durván" történik, hanem fokozatosan. (A kód kimenete megtekinthető itt)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Áttűnések</title>
    <meta charset="UTF-8"/>
    <style>
      /* Egyik állapot: amikor a kurzor nem az objektum fölött áll */
      .card { 
        float: left;
        width: 200px;
        height: 100px;
        background-color: #eee;
        margin: 10px;
        padding: 5px;
        text-align: center;
      }

      /* Másik állapot: amikor a kurzor az objektum fölött áll */
      .card:hover {
        margin-top: 5px;                             /* felső margó beállítása */
        cursor: pointer;                             /* kurzor ikon átalakítása */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);  /* árnyék */
        transition: all 200ms ease-in-out;           /* áttűnés beállítása */
      }
    </style>
  </head>
  <body>
     <div class="card-container">
       <div class="card"><h3>1. kártya</h3><p>A kártya szövege...</p></div>
       <div class="card"><h3>2. kártya</h3><p>A kártya szövege...</p></div>
       <div class="card"><h3>3. kártya</h3><p>A kártya szövege...</p></div>
     </div>
  </body>
</html>

Megjegyzés

Az áttűnések a régebbi böngészőkben nem érhetők el.

Animációk

A CSS lehetőséget biztosít animációk készítésére is. Egy animációt a következő szintaxissal hozhatunk létre:

1
2
3
4
@keyframes animacio_neve {
  from { /* stílus, ami az animáció kezdetén áll fenn */ }
  to { /* stílus, ami az animáció befejezése után áll fenn */ }
}

Ha nem csak az animáció kezdetén és végén fennálló stílust szeretnénk megadni, akkor a from és to helyett megadhatók százalékértékek is. Ezek segítségével részletesebben is testreszabhatjuk egy animáció lefolyását.

1
2
3
4
5
@keyframes animacio_neve {
  0% { /* stílus, ami az animáció kezdetén áll fenn */ }
  50% { /* stílus, ami akkor áll fenn, ha az animáció 50%-ban végrehajtódott */ }
  100% { /* stílus, ami akkor áll fenn, ha az animáció 100%-ban végrehajtódott */ }
}

Ahhoz, hogy egy általunk létrehozott animáció működésbe lépjen, hozzá kell azt társítanunk egy elemhez. Az animálni kívánt elemnek megadható CSS tulajdonságok:

  • animation-name: az animáció neve (ami a @keyframes után szerepel)
  • animation-duration: az animáció hossza
  • animation-timing-function: az animáció időbeli lefolyásának jellemzői
    • a transition-timing-function-nál felsorolt értékek itt is használhatók
  • animation-delay: az animáció kezdete előtti késleltetés hossza
  • animation-iteration-count: hányszor játszódjon le az animáció
    • értékéül megadható egy szám vagy az infinite (végtelen) kulcsszó
  • animation-direction: az animáció iránya
    • normal: az animáció előrefelé lesz lejátszva (alapértelmezett)
    • reverse: az animáció visszafelé lesz lejátszva
    • alternate: az animáció először előrefelé, majd visszafelé lesz lejátszva
  • animation-fill-mode: mi történjen akkor, amikor az animáció éppen nem fut (pl. ha az animáció már befejeződött)
    • forwards: az animált elem a legutolsó képkocka stílusát tartja meg
    • backwards: az animált elem a legelső képkocka stílusát tartja meg
  • a fenti tulajdonságok összevonva is megadhatók: animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode].

Példa: Folyamatosan váltakozó háttérszín, és beúszás effektus megvalósítása animációkkal (A kód kimenete megtekinthető itt)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="hu">
<head>
  <title>Animációk</title>
  <meta charset="UTF-8"/>
  <style>
    @keyframes valtakozo_hatterszin {           /* egy animáció létrehozása */
      0% { background-color: lightcyan; }
      25% { background-color: cyan; }
      50% { background-color: turquoise; }
      75% { background-color: springgreen; }
      100% { background-color: limegreen; }
    }

    @keyframes beuszas {                 /* egy másik animáció létrehozása */
      from { left: -50%; }
      to { left: 50%; transform: translate(-50%); }
    }

    body {
      font-family: sans-serif;
      animation-name: valtakozo_hatterszin;   /* animáció hozzárendelése az elemhez */
      animation-duration: 20s;                /* animáció hossza */
      animation-timing-function: linear;      /* animáció időbeli lefolyása */
      animation-iteration-count: infinite;    /* animáció lejátszásának száma */
      animation-direction: alternate;         /* animáció iránya */
    }

    #content {
      background-color: #fff;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      width: 50%;
      padding: 10px;
      text-align: center;
      position: absolute;
      animation: beuszas 1s linear 0s 1 normal forwards;   /* összevont megadás */
    }
  </style>
</head>
<body>
  <div id="content">
    <h1>Üdvözöllek a weboldalamon!</h1>
    <hr/>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</body>
</html>

Megjegyzés

Az animációk a régebbi böngészőkben nem érhetők el.

Media query-k

A webfejlesztés során felmerülhet az igény arra, hogy néhány CSS formázást csak bizonyos médiatípusok és paraméterek esetén végezzünk el. Erre egy tipikus példa, amikor különféle eszközökre és felbontásokra szeretnénk optimalizálni a weboldalunk megjelenését.

A CSS3 media query-k segítségével lehetőségünk van olyan CSS formázásokat megadni, amelyek csak bizonyos feltételek teljesülése esetén lesznek érvényesek. A media query-k szintaxisa:

1
2
3
@media not|only mediatype and (mediafeature) {
  /* CSS utasítások... */
}
  • A mediatype azt a médiatípust jelöli, amire elvégezzük a formázást. Lehetséges értékei: screen (számítógépek, tabletek, okostelefonok stb. képernyője), print (nyomtató), speech (felolvasóprogram), all (minden médiatípus).
  • A mediafeature helyén adjuk meg a feltételt, ami mellett elvégezzük a formázást.
  • A not kulcsszó az egész media query jelentését negálja.
  • Az only kulcsszó a régi, CSS3 media query-ket nem ismerő böngészőknél nem végzi el a formázást. Használatának a modern böngészőkben nincs hatása.
  • Az and kulcsszó összeköti a feltételt (mediafeature) a médiatípussal (mediatype) és/vagy további feltételekkel.
  • A not, only és and kulcsszavak használata opcionális. Ugyanakkor ha a not vagy only kulcsszavakat használjuk, akkor kötelezően meg kell adni a médiatípust is!

Példa: Egy media query, amely a 952 pixelnél nem szélesebb képernyők esetén megszünteti a kép úsztatását, és középre igazítja a képet. A böngészőablak szélességének megváltoztatásával látható a media query hatása. (A kód kimenete megtekinthető itt)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Media query-k</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <style>
      img { 
        float: left; 
        margin-right: 10px; 
      }

      @media only screen and (max-width: 952px) { 
        img {
          float: none;
          display: block;
          margin: 0 auto;
        }
      }
    </style>
  </head>
  <body>
    <img src="https://placekitten.com/200/200" alt="Macska"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut luctus nisl, ut laoreet odio. Quisque scelerisque accumsan nisi, eu fringilla orci dictum eget. Duis est sapien, consectetur et ipsum in, euismod mattis felis. Maecenas auctor convallis nibh eget ornare. Mauris fringilla eros in ante venenatis congue. Praesent egestas accumsan quam, non tincidunt massa euismod nec. Aliquam ac pharetra urna. Donec efficitur nisi at erat iaculis egestas. Fusce vel risus et mi efficitur posuere non eu diam. Donec vehicula ullamcorper ipsum a tempor. Pellentesque semper erat tempus mattis volutpat. Quisque nec fermentum ligula. Integer tincidunt tellus sed pretium gravida. Cras facilisis est quam, eu rutrum turpis hendrerit quis. Sed finibus volutpat nisi, sed ultricies eros porttitor eget. Donec urna ligula, condimentum et est vitae, vestibulum tincidunt orci. Maecenas pulvinar massa a magna feugiat luctus eu non urna.</p>
  </body>
</html>

A CSS media query-k segítségével nyomtatási stíluslapot is készíthetünk egy weboldalhoz. A @media print utasítással olyan formázásokat adhatunk meg, amelyek csak nyomtatás esetén lesznek érvényesek.

Néhány fontosabb javaslat, lehetőség nyomtatási stíluslapok használata esetén:

  • A hosszúsággal kapcsolatos értékek megadására érdemes a pt (pont) mértékegységet használni, ugyanis ez kifejezetten nyomtatásra lett kitalálva.
  • A page-break-before, page-break-after és page-break-inside tulajdonságokkal szabályozhatjuk az oldaltöréseket.
  • A @page direktíva segítségével beállíthatjuk a nyomtatási margókat.

Példa: Egy egyszerű nyomtatási stíluslap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Nyomtatási stíluslap példa</title>
    <meta charset="UTF-8"/>
    <style>
      /* A weboldal nyomtatásakor érvényes formázások */

      @media print {  
        p { font-size: 12pt; }            /* bekezdések betűméretének megadása */
        video, audio { display: none; }   /* videók, hangfájlok eltüntetése */
        h1, h2, h3 { page-break-after: avoid; } /* címsorok utáni oldaltörés elkerülése */
      }

      @page { margin: 0.5cm; }  /* nyomtatási margók megadása minden oldalra */
    </style>
  </head>
  <body>
    <!-- A weboldal tartalma -->
  </body>
</html>

További hasznos ismeretek

Utolsó frissítés: 2024-02-10 17:23:02