Árnyék effektek létrehozása CSS3 segítségével

Ebben a segédletben megmutatom, hogyan lehet a CSS segítségével különféle árnyék hatásokat létrehozni. Alapnak nem képet fogok használni, hanem egy sima div elemet, amelynek beállítok egy halványabb szürke háttérszínt. Ennek az elemnek fogunk különféle árnyék hatásokat létrehozni.

Az effekt megnézhető itt

A box-shadow tulajdonság lehetővé teszi, hogy könnyen hozzunk létre árnyékot a dobozszerű elemekhez vagy képekhez. Az alap szintaxis a következő:

 

.shadow {
  -moz-box-shadow: 3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow: 3px 3px 5px 6px #ccc;
}

 

A tulajdonságnak egy paraméterlistát adunk, amelynek az értékeit szóközzel választjuk el.

 

1. Az árnyék vízszintes eltolása, pozitív értéknél az árnyék a jobb oldalán lesz a doboznak, míg negatív érték esetén a bal oldalon.
2. Az árnyék függőleges eltolása, pozitív értéknél az árnyék a doboz alján lesz látható, míg negatív érték esetén a tetején.
3. Az elmosás (blur) értéke, ha ez 0, az árnyék éles lesz, illetve minél nagyobb a szám, annál homályosabb lesz az árnyék.
4. A sugár (spread ) értéke. Ezt nem kötelező megadni. Ezzel tulajdonképpen kiterjeszthetjük minden irányban az árnyékunkat. A pozitív értékek növelik, a negatív értékek csökkentik az árnyék méretét. Az alapértelmezett érték 0 (az árnyék mérete ilyenkor megegyezik blur értékben beállított értékkel).
5. Szín
6. Az inset értékkel pedig belülre állíthatjuk az árnyékot

 

A böngészők támogatottsága a következő:

 

• Internet Explorer 9.0+
• Firefox 4.0+ 3.5 -moz-
• Chrome 10.0+ 4.0 -webkit-
• Safari 5.1+ 3.1 -webkit-
• Opera 10.5+

 

Első lépésben létrehozom a dobozokat a szövegekkel. Ezekre fogjuk elhelyezni a különféle árnyék hatásokat.

 

<div class="box shadow1">
     <h3>Árnyék 1</h3>
</div>
<div class="box shadow2">
     <h3>Árnyék 2</h3>
</div>
<div class="box shadow3">
     <h3>Árnyék 3</h3>
</div>
<div class="box shadow4">
      <h3>Árnyék 4</h3>
</div>
<div class="box shadow5">
      <h3>Árnyék 5</h3>
</div>

 

Beállítom a dobozok méretét illetve a bennük elhelyezett címsorokat.

 

.box {
  width:70%;
  height:50px;
  background:#F0F0E1;
  margin-top:10px;
  margin-left:10%;
  margin-bottom:40px;
  float:left;
}

.box h3{
  font-family:'Open Sans Condensed', sans-serif;
  font-size:20px;
  font-weight:300;
  text-align:center;
  position:relative;
  top:-10px;
  color:#CC9900;
}

 

Ezután létrehozom az egyes dobozokra beállított osztályokhoz az árnyékokat. Az első árnyék esetében egy normál árnyékot készítek a doboz széleinél egy kicsit beljebb húzva.

 

 

.shadow1{
box-shadow: 0 10px 6px -6px #777; 
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
}

 

A következő hatás megnöveli az árnyékokat a doboz alsó sarkaiban. Ez olyan hatást eredményez, mintha a két széle egy kicsit meg lenne emelve. Itt használjuk a :before és az :after pszeudo (látszólagos vagy ál) osztályokat. A látszólagos osztályok egyes elemek részelemeinek címzésére használhatók és lehetővé teszik az elemtípusok megkülönböztetését.

 

.shadow2 {
  position: relative;
}
.shadow2:before, .shadow2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 60%;
  top: 30%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 25px 10px #777;
  -moz-box-shadow: 0 25px 10px #777;
  box-shadow: 0 25px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.shadow2:after{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

 

A következő kettő hatás ugyanezen az elven alapul, de itt az egyik oldalra kerül csak az árnyékolás.

 

 

.shadow3{
  position: relative;
}

.shadow3:before{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 30%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

 

 

.shadow4{
  position: relative;
}

.shadow4:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 30%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

 

Az utolsó példában pedig egy ívelt árnyékot hozunk létre a doboz alsó felén.

 

 

.shadow5 {
  position:relative;       
  -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 0 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.shadow5:before, .shadow5:after {
  content:"";
  position:absolute; 
  z-index:-1;
  -webkit-box-shadow:0 0 16px rgba(0,0,0,0.8);
  -moz-box-shadow:0 0 16px rgba(0,0,0,0.8);
  box-shadow:0 0 16px rgba(0,0,0,0.8);
  top:50%;
  bottom:0;
  left:10px;
  right:10px;
  -moz-border-radius:100px / 10px;
  border-radius:100px / 10px;
}

 

Források:

http://www.w3schools.com/css/css3_shadows.asp

https://css-tricks.com/snippets/css/css-box-shadow/

http://www.paulund.co.uk/creating-different-css3-box-shadows-effects