Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

CSS3 - efekt cienia (zagięte rogi)

cień css box shadow

Brak odpowiedzi do tego tematu
  • Zaloguj się, aby dodać odpowiedź
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 02 grudnia 2014 - 20:56

#1

Załączony plik  shadow.jpg   4,25 KB   0 Ilość pobrań

Kod HTML:

<div class="box"></div>

 
 Hod CSS:

body {
  background: #ccc;
}

.box {
  width: 500px;
  height: 100px;
  background: #fff;
  margin: auto;
  position: relative;
}

.box:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 16px;
  left: 1%;
  width: 45%;
  top: 80px;
  max-width: 300px;
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.box:after {
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  right: 1%;
  left: auto;
  width: 45%;
  top: 80px;
  max-width: 300px;
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 16px;
}

Demo: http://jsfiddle.net/bkm2L0y6/


  • 0





Podone tematy Collapse


Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych