Kihagyás

5. fejezet

A fejezet anyaga

A HTML és CSS további lehetőségei

A HTML további lehetőségei

Multimédia elemek

A HTML5 szabvány alapértelmezés szerint támogatja a multimédiás tartalmak (hangfájlok, videók) beágyazását a weboldalon belül.

Az <audio>...</audio> taggel hangállományokat helyezhetünk el egy weboldalon. A tagnek adható controls attribútummal vezérlőgombokat adhatunk a beágyazott hangfájlnak (pl. elindítás és hangerő szabályozása gombok).

A <source/> páratlan tag segítségével több alternatív hangállományt is megadhatunk. Ezek közül a böngésző a legelső, általa felismerhetőt fogja beágyazni a weboldalra. A tag két fontos attribútuma:

  • src: a beágyazni kívánt hangfájl elérési útvonala
  • type: az állomány MIME-típusa.

Hangállományok esetén a type attribútummal megadott MIME-típus az audio/mpeg, audio/ogg vagy audio/wav értékek valamelyike lehet.

Példa: Hangállomány beágyazása egy weboldalra

1
2
3
4
5
6
<h2>A kedvenc zeném</h2>
<audio controls>
  <source src="powerwolf.mp3" type="audio/mpeg"/>
  <source src="greenday.wav" type="audio/wav"/>
  Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a hangállományok beágyazását.
</audio>

A kód kimenete

A <video>...</video> tag videóállományok beágyazására szolgál. A controls attribútumot itt is használhatjuk vezérlőgombok megjelenítésére. A width és height attribútumokkal megadható a beágyazott videó szélessége és magassága (pixelben).

Több alternatív videóállomány megadására a korábban tárgyalt <source/> taget használjuk. A tag type attribútumával megadható MIME-típus a video/mp4, video/ogg vagy video/webm értékek valamelyike lehet.

Példa: Videóállomány beágyazása egy weboldalra

1
2
3
4
5
6
<h2>A kedvenc videóm</h2>
<video controls width="360">
  <source src="allstar.mp4" type="video/mp4"/>
  <source src="rickroll.ogg" type="video/ogg"/>
  Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a videóállományok beágyazását.
</video>

A kód kimenete

Canvas

A <canvas>...</canvas> tagpár egy téglalap alakú vászon beszúrására szolgál, amelyre JavaScript segítségével rajzokat, animációkat és játékokat készíthetünk. A width és height attribútumokkal szabályozhatjuk a vászon szélességét és magasságát.

Ahhoz, hogy egy vászonra rajzolni tudjunk, szükséges a JavaScript ismerete, ami már túlmutat ennek a kurzusnak a tananyagán (viszont például a Multimédia kurzus tárgyalja a canvas-alapú JavaScriptet).

Példa: Egy egyszerű canvas-es ábra elkészítése

 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
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Canvas példa</title>
    <meta charset="UTF-8"/>
    <style>
     #vaszon { border: 3px solid black; }
    </style>
  </head>
  <body>
    <canvas id="vaszon" width="200" height="200">
      Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a canvas taget.
    </canvas>
    <script>
      // Itt adjuk meg a JavaScript kódot, ami a canvas-re rajzol...
      var ctx = document.getElementById("vaszon").getContext("2d");
      ctx.fillStyle = "red";
      ctx.fillRect(20, 20, 95, 95);
      ctx.fillStyle = "blue";
      ctx.fillRect(50, 50, 95, 95);
      ctx.fillStyle = "green";
      ctx.fillRect(80, 80, 95, 95);
    </script>
  </body>
</html>

A kód kimenete

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 (A kód kipróbálható 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
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Transzformálás</title>
    <meta charset="UTF-8"/>
    <style>
      body { background-color: #f2f2f2; }

      .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: #fff;
        border: 3px solid #000;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class="centered"><h1>Üdvözöllek!</h1></div>
  </body>
</html>

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;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="rotated">Valami elborult tartalom...</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, 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ő <div> fölött áll, akkor megnöveljük az elem méreteit. Az áttűnéseknek köszönhetően ez a méretnövelés nem hirtelen történik, hanem szépen, fokozatosan megy végbe. (A kód működése kipróbálható itt)

 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>Áttűnések</title>
    <meta charset="UTF-8"/>
    <style>
      /* Az egyik állapot: amikor a kurzor nem az objektum fölött áll */
      #magical {
        width: 100px; height: 100px;
        background-color: tomato;
        transition: width 2s, height 2s;       /* szélesség és magasság módsítása egy 2 másodperces áttűnéssel */
        transition-timing-function: ease-in;  /* gyorsuló állapotváltás */
      }

      /* A másik állapot: amikor a kurzor az objektum fölött áll */
      #magical:hover { width: 300px; height: 300px; }
    </style>
  </head>
  <body>
    <div id="magical"></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-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-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-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
  • a fenti tulajdonságok összevonva is megadhatók: animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction].

Példa: Folyamatosan váltakozó háttérszín, és beúszás effektus megvalósítása animációkkal (A kód működése kipróbálható 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
<!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: yellow; }
        25% { background-color: orange; }
        50% { background-color: salmon; }
        75% { background-color: lightgray; }
        100% { background-color: lightgreen; }
      }

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

      body {
        animation-name: valtakozo_hatterszin;   /* animáció hozzárendelése az elemhez */
        animation-duration: 10s;                /* animáció hossza */
        animation-iteration-count: infinite;    /* animáció lejátszásának száma */
        animation-direction: alternate;         /* animáció iránya */
      }

      .float-in {
        width: 100px; height: 100px;
        background-color: purple; color: white;
        position: relative; text-align: center;
        animation: beuszas 2.5s linear 0s 1 normal; /* összevont megadás */
      }
    </style>
  </head>
  <body>
    <div class="float-in">Az animációk nagyon jók!</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 600 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 kód működése kipróbálható 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
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Media query-k</title>
    <meta charset="UTF-8"/>
    <style>
      img { 
        float: left; 
        margin-right: 10px; 
      }

      @media only screen and (max-width: 600px) { 
        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.</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: 2021-03-14 09:42:45