
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.
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ő:
2 3 4 5 6 |
.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.
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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.
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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.
2 3 4 5 6 |
.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.
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 |
.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.
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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); } |
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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.
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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
0 válasz erre "Árnyék effektek létrehozása CSS3 segítségével"