Árnyék effektek létrehozása | Webdesign tanfolyamok

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;
}

.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.

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.
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.
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.
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).
Szín
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.

&lt;div class="box shadow1"&gt;
     &lt;h3&gt;Árnyék 1&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="box shadow2"&gt;
     &lt;h3&gt;Árnyék 2&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="box shadow3"&gt;
     &lt;h3&gt;Árnyék 3&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="box shadow4"&gt;
      &lt;h3&gt;Árnyék 4&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="box shadow5"&gt;
      &lt;h3&gt;Árnyék 5&lt;/h3&gt;
&lt;/div&gt;

<h3>Árnyék 1</h3>

</div>

<h3>Árnyék 2</h3>

</div>

<h3>Árnyék 3</h3>

</div>

<h3>Árnyék 4</h3>

</div>

<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;
}

.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;
}

.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;
}

.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);
}

.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);
}

.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;
}

.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

2019-01-11

0 válasz erre "Árnyék effektek létrehozása CSS3 segítségével"

Minden vélemény számít! Kilépés a válaszból

Ezt olvastad már?

Ismerd meg a CSS változókat mindössze 5 perc alatt
március 10,2018 / Kiemelt Segédletek / 0 Hozzászólás
Eddig ha a CSS-el dolgoztál, a változók használatának lehetősége csak akkor volt meg, ha...
Szükségem van Landing Page-re? És mi is az a Landing Page?
március 03,2018 / Kiemelt Tippek / 0 Hozzászólás
Ha hirdetsz, vagy létrehoztál egy online marketing kampányt akkor igen, szükséged van rá. És...
Tartalomírás a céges blogon - Hogyan csináljam?
január 25,2018 / Kiemelt Tippek / 0 Hozzászólás
Mindenki hallott már az úgynevezett tartalom marketingről, ilyenkor egyből beugranak a...
Webdesign vagy webfejlesztés. Melyiket válasszam?
november 26,2017 / Kiemelt Tippek / 0 Hozzászólás
Mi a kettő között a különbség? Melyik a keresettebb és melyikkel lehet jobban keresni?...
A webes tervezési folyamat első és legfontosabb lépése
november 12,2017 / Egyéb Kiemelt / 0 Hozzászólás
A tervezés valójában egy olyan weboldal létrehozását jelenti, amely egy átfogó...
A vizuális hierarchia használata a webes tervezésben
november 05,2017 / Segédletek Tippek / 0 Hozzászólás
A jó vizuális hierarchia nem a Photoshop szűrőkről és a gyönyörűen elkészített...
Hova helyezd a logót a weboldalon, balra vagy középre?
május 07,2017 / Tippek / 0 Hozzászólás
Nem mindegy? Kérdezhetnéd joggal, pedig hidd el nem. A Nielsen Norman Group felmérése szerint...

Kurzusok

Így tudsz tanulni

D-kreatív Oktatás

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

0 válasz erre "Árnyék effektek létrehozása CSS3 segítségével"

Minden vélemény számít! Kilépés a válaszból

Ezt olvastad már?

Ismerd meg a CSS változókat mindössze 5 perc alatt

Szükségem van Landing Page-re? És mi is az a Landing Page?

Tartalomírás a céges blogon - Hogyan csináljam?

Webdesign vagy webfejlesztés. Melyiket válasszam?

A webes tervezési folyamat első és legfontosabb lépése

A vizuális hierarchia használata a webes tervezésben

Hova helyezd a logót a weboldalon, balra vagy középre?

Archívum

Ismerd meg a CSS változókat mindössze 5 perc alatt

Szükségem van Landing Page-re? És mi is az a Landing Page?

Tartalomírás a céges blogon – Hogyan csináljam?

Webdesign vagy webfejlesztés. Melyiket válasszam?

A webes tervezési folyamat első és legfontosabb lépése

Reszponzív weboldal készítés a Bootstrap keretrendszerrel

Bevezető

Webdesign Tanfolyam I.

Webdesign Tanfolyam II.

Webdesign Tanfolyam III.

Vektorgrafika az Adobe Illustrator programmal

BELÉPÉS

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

0 válasz erre "Árnyék effektek létrehozása CSS3 segítségével"

Minden vélemény számít! Kilépés a válaszból

Ezt olvastad már?

Archívum