Kihagyás

6.1. fejezet

Áttűnések

Korábban 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>

Ha szeretnénk áttűnést a másik irányba is (amikor a kurzort levisszük a kártyáról), akkor a normál állapotba is megadhatjuk a transition tulajdonságot.

Utolsó frissítés: 2024-08-16 16:51:30