A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Vizuális formázásmodell /Az elemek láthatósága

Tartalomjegyzék

Vizuális formázásmodell

Vizuális formázásmodell

Az elemek láthatósága

A visibility tulajdonság segítségével az elemek láthatóságát állíthatjuk be.

Értékek:

hidden: láthatatlanná teszi az elemet. Ügyeljünk arra, hogy attól, hogy az elem láthatatlanná válik, az oldal elrendezésére még hatással lesz, a helyét a böngésző ki fogja hagyni. Ha nem ez a célunk, hanem az elem teljes eltüntetése, akkor a display:none; beállítást kell alkalmaznunk.
visible: láthatóvá teszi az elemet.
inherit: az érték a szülő elemtől öröklődik.
Tábla elemekre alkalmazva a collapse érték eltüntet egy sort vagy oszlopot anélkül, hogy a tábla megjelenése megváltozna. Ekkor a sor vagy oszlop által elfoglalt hely más tartalom számára rendelkezésre áll. Ez az érték a nem tábla elemeken hidden értékként funkcionál.

A visibility tulajdonságok értékei öröklődnek.

Példa - Visibility tulajdonság szemléltetése

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Visibility beállítás</title>
<meta charset="utf-8">
<link href="specialis/css/dobozok.css" rel="stylesheet" type="text/css">
<style type="text/css">
div#doboz1 {
     position: static;
     visibility:hidden;
}
div#doboz2 {
     position:static;
}
</style>
</head>
<body>
<div id="doboz1">Lorem ipsum dolor sit amet, 
  consectetuer adipiscing elit. Phasellus orci urna, placerat vel, rutrum vitae, 
  tincidunt quis, eros. Morbi elementum semper velit. Aliquam erat volutpat. Praesent 
  varius ultrices neque. Fusce lorem turpis, eleifend vel, placerat vitae, elementum 
  ac, augue. Pellentesque erat tellus, facilisis vitae, tempor mattis, bibendum 
  ut, ligula. </div>
<div id="doboz2">Lorem ipsum dolor sit amet, 
  consectetuer adipiscing elit. Phasellus orci urna, placerat vel, rutrum vitae, 
  tincidunt quis, eros. Morbi elementum semper velit. Aliquam erat volutpat. Praesent 
  varius ultrices neque. Fusce lorem turpis, eleifend vel, placerat vitae, elementum 
  ac, augue. Pellentesque erat tellus, facilisis vitae, tempor mattis, bibendum 
  ut, ligula. </div>
</body>
</html>

Magyarázat

Láthatjuk, hogy a forráskódban két div elemet helyeztünk el, viszont az elsőre beállítottuk a visibility:hidden; tulajdonságot. Emiatt az első doboz nem jelenik meg a képernyőn, viszont a helye kimarad, emiatt a második doboz pozíciója nem változik meg (nem kerül feljebb.).

Gyakorlat

A visibility:hidden; beállítást változtasd meg display:none; beállításra, és hasonlítsd össze a két eredményt!

Az elemek látható részének megadása (clip, rect)

A clip tulajdonság segítségével beállíthatjuk, hogy egy elemnek csak egy meghatározott részét jelenítsük meg.

A tulajdonságot csak abszolút pozícionálás esetén tudjuk használni

Értékek:

A rect() érték segítségével megadhatjuk azt a téglalapot, amit látni szeretnénk az elemből. A zárójelek között négy, vesszővel elválasztott hosszúságértéket adunk meg, melyek sorrendben a fenti, a jobb, az alsó és a bal értékeket határozzák meg. Ezek az értékek az elem bal felső sarkától számolódnak. A megjelenített rész pedig az így megadott értékek által közrefogott belső téglalap lesz, minden más rejtett lesz.
Az auto érték a böngészőre bízza az elem megjelenített részét.
Az inherit esetén a tulajdonság értéke a szülő elemtől öröklődik.

A clip tulajdonságok értékei nem öröklődnek.

Példa - Clip és rect() szemléltetése

Magyarázat

A két divben ugyanazt a képet helyeztük el, de az elsőben a rect tulajdonsággal beállítottuk, hogy csak egy része legyen látható. Ez a rész most úgy van beállítva, hogy a kép bal oldalától vízszintesen a 90 és 220 képpont közötti sáv azon része látszik, amely függőlegesen a 20 és 130 képpont közti sávba esik.

Ha mondjuk a kép ilyen vágását a GIMP alkalmazásban készítettük volna el, akkor a segédvonalakat a következő módon helyeztük volna el:

A kép (nagyobb változata) külön ablakban is megtekinthető.

imagecliprect_full.jpgA képen elhelyezett segédvonalak a GIMP alkalmazásban

A segédvonalak pozíciói ugyanazok, mint a HTML forráskódban, a felső, jobb oldali, alsó és bal oldali sorrendben. Ez a sorrend egyébként ugyanaz, mint amit a margó, belső kitöltés, stb. beállításnál megszokhattunk, így könnyű megjegyezni.

Gyakorlat

Állíts be egy másik képet a div-ek tartalmának úgy, hogy az url végén lévő számot átírod egy másikra. (pl. /2/ helyett /3/-at írhatsz. Az új képen állítsd be úgy a rect értéket, hogy a kép fő témája legyen benne látható.

Az elemek átlátszósága (opacity)

Az elemek átlátszatlanságát az opacity tulajdonsággal állíthatjuk be.

Értékek:

Megadhatunk egy tetszőleges 0.0 (teljesen átlátszó) és 1.0 (teljesen átlátszatlan) közötti valós számot.
Az inherit esetén a tulajdonság értéke a szülő elemtől öröklődik.

Az opacity tulajdonságok értékei nem öröklődnek.

Példa - Opacity beállítás

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Opacity beállítása</title>
<meta charset="utf-8">
<style type="text/css">
 body {
        background-image: url('specialis/css/body.png');
      }
 div {
    width:170px;    /*szélesség beállítása*/
    height:170px;   /*magasság beállítása*/
    margin:10px;    /*margó beállítása*/
    float:left;     /*balra lebegtetés*/
    border:2px solid black;  /*szegély beállítása*/
    background-color:brown;  /*háttérszín beállítása*/
     }
div {
    background-image:url('specialis/css/viragok.jpg');
    background-repeat:repeat-y;
    background-position:top left;
     }
div span {
        background-color:darkgreen;
        color:white;
        padding:3px;
        }
     
   div:nth-child(1) {opacity:0;}
   div:nth-child(2) {opacity:0.1;}
   div:nth-child(3) {opacity:0.2;}
   div:nth-child(4) {opacity:0.3;}
   div:nth-child(5) {opacity:0.4;}
   div:nth-child(6) {opacity:0.5;}
   div:nth-child(7) {opacity:0.6;}
   div:nth-child(8) {opacity:0.7;}
   div:nth-child(9) {opacity:0.8;}
   div:nth-child(10) {opacity:0.9;}
   div:nth-child(11) {opacity:1;}
</style>
<body>
  <div><span>opacity:0</span></div>
  <div><span>opacity:0.1</span></div>
  <div><span>opacity:0.2</span></div>
  <div><span>opacity:0.3</span></div>
  <div><span>opacity:0.4</span></div>
  <div><span>opacity:0.5</span></div>
  <div><span>opacity:0.6</span></div>
  <div><span>opacity:0.7</span></div>
  <div><span>opacity:0.8</span></div>
  <div><span>opacity:0.9</span></div>
  <div><span>opacity:1</span></div>
</body>
</html>

Magyarázat

A példában 11 div elemet hoztunk létre, amelyek átlátszósága a 0 értéktől az 1 értékig változik, mindig 0,1 értékkel növekedve.

Elemek árnyékának beállítása (box-shadow)

A box-shadow tulajdonság segítségével árnyékokat hozhatunk létre elemeink körül.

Paraméterek és értékeik:

A tulajdonságnak egy szóközzel elválasztott paraméterlistát adunk értékül.

Vesszővel elválasztva, több paraméterlistát megadva több árnyékot is definiálhatunk.

Először két tetszőleges hosszúságértékkel adjuk meg a vízszintes és függőleges eltolás mértékét.
Ezután egy pozitív hosszúságérték következik, ami meghatározza, hogy mennyire legyen elmosódott az árnyék. 0 érték esetén nincs elmosódás.
Majd opcionális módon egy pozitív hosszúságértéket megadva meghatározhatjuk az árnyék (megadott színnel egyező) részének méretét. Ha nem adjuk meg, akkor 0-nak tekinti a böngésző az értékét.
Ezután egy tetszőleges színértéket megadva beállítjuk az árnyék színét (akár átlátszóság megadásával is, lásd rgba).
Opcionálisan megadva az inset hatására az árnyék az elemen belülre kerül.

A box-shadow tulajdonságok értékei nem öröklődnek.

Példa - Box shadow (doboz árnyék) beállítása

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Doboz árnyék</title>
<meta charset="utf-8">
<style type="text/css">
 body {
        background-image: url('specialis/css/body.png');
      }
 div {
    width:200px;    /*szélesség beállítása*/
    height:150px;   /*magasság beállítása*/
    margin:20px;    /*margó beállítása*/
    float:left;     /*balra lebegtetés*/
    border:2px solid black;  /*szegély beállítása*/
    padding:5px;    /*belső kitöltés*/
    background-color: white; /*háttérszín beállítás*/
         }
     
div:nth-child(1) {box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); }
div:nth-child(2) {box-shadow: -5px 5px 10px rgba(0, 0, 0, 1);}
div:nth-child(3) {box-shadow: 5px -5px 10px rgba(0, 0, 0, 1);}
div:nth-child(4) {box-shadow: -5px -5px 10px rgba(0, 0, 0, 1);}
div:nth-child(5) {box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 1);}
div:nth-child(6) {box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 1);}
div:nth-child(7) {box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.6);}
div:nth-child(8) {box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 1);}
div:nth-child(9) {box-shadow: inset 5px -5px 5px rgba(0, 0, 0, 1);}
div:nth-child(10) {box-shadow: inset -5px 5px 5px rgba(0, 0, 0, 1);}
div:nth-child(11) {box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 1);}
div:nth-child(12) {box-shadow: 5px 5px 5px rgba(0, 0, 255, 1), inset 5px 5px 5px rgba(255, 0, 0, 1);}
</style>
<body>
  <div><span>box-shadow: <br>5px 5px 10px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>-5px 5px 10px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>5px -5px 10px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>-5px -5px 10px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>10px 10px 10px 0 <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>10px 10px 10px 5px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>10px 10px 10px 0 <br>rgba(0, 0, 0, 0.6);</span></div>
  <div><span>box-shadow: <br>inset 5px 5px 5px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>inset 5px -5px 5px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>inset -5px 5px 5px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>inset -5px -5px 5px <br>rgba(0, 0, 0, 1);</span></div>
  <div><span>box-shadow: <br>5px 5px 5px rgba(0, 0, 255, 1),<br> inset 5px 5px 5px rgba(255, 0, 0, 1);</span></div>
</body>
</html>

Magyarázat

A példában különböző dobozárnyék-beállításokra hoztunk példát, melyek között van külső és belső (inset) árnyék is. Az utolsó példában külső és belső árnyékot is beállítottunk.

Kapcsolódó hivatkozások

Box Shadow Generator | CSS3 Generator | CSS3Gen

CSS3 Generator

Vissza a tartalomjegyzékhez

Fel a lap tetejére

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.