Á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ő:

 

 

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.

 

 

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

 

 

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.

 

 

 

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.

 

 

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

 

 

 

 

 

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

 

 

 

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!

Az email címet nem tesszük közzé.

X