Efek shadow dengan css :before :after pseudo-elemen

Efek shadow dengan css :before :after pseudo-elemen

Dalam tutorial ini kita akan menciptakan kotak dengan efek bayangan hanya dengan CSS. Kita akan menggunakan CSS shadow properti yang merupakan salah satu properti CSS favorit saya yang akan Anda lihat dalam tutorial ini dan betapa mudahnya Anda dapat menggunakannya untuk kreasi anda sendiri. Properti box-shadow memungkinkan Anda untuk dengan mudah membuat beberapa bayangan pada elemen kotak dengan menetapkan nilai untuk warna, ukuran, blur dan offset.

Properti box-shadow menerima 2-4 opsi, opsi yang diperlukan adalah horisontal offset dan offset vertikal, dua pilihan opsional tersebar jarak dan warna.

box-shadow: horizontal vertical spread colour;

Sedikit contoh:

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

Semua browser terbaru mendukung properti box-shadow. seperti:

Internet Explorer 9.0 dan di atasnya
Firefox 3.5 dan di atasnya
Krom 1 dan di atasnya
Safari 3 dan di atasnya
Opera 10.5 dan di atasnya

Dengan ini semoga anda dapat menciptakan dan membuat tampilan lebih unik. silahkan pilih diantara efek dibawah ini yang anda suka:

HTML

<div class="kotak gaya-v1">
    <h3>Gaya v.1</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}


/* Gaya v.1 */
.gaya-v1{
 -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
         box-shadow: 0 10px 6px -6px #777;
}

HTML

<div class="kotak gaya-v2">
       <h3>Gaya v.2</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.2 */
.gaya-v2
{
  position: relative;
}
.gaya-v2:before, .gaya-v2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  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);
}
.gaya-v2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

 

HTML

<div class="kotak gaya-v3">
       <h3>Gaya v.3</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.3 */
.gaya-v3
{
  position: relative;
}
.gaya-v3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  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);
}

HTML

<div class="kotak gaya-v4">
        <h3>Gaya v.4</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.4 */
.gaya-v4
{
  position: relative;
}
.gaya-v4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  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);
}

 

HTML

<div class="kotak gaya-v5">
        <h3>Gaya v.5</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.5 */
.gaya-v5
{
  position: relative;
}
.gaya-v5:before, .gaya-v5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.gaya-v5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

 

HTML

<div class="kotak gaya-v6">
      <h3>Gaya v.6</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.6 */
.gaya-v6
{
   position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.gaya-v6:before, .gaya-v6:after
{
 content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

 

HTML

<div class="kotak gaya-v7">
        <h3>Gaya v.7</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.7 */
.gaya-v7
{
   position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.gaya-v7:before, .gaya-v7:after
{
 content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.gaya-v7:after
{
 right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

 

HTML

<div class="kotak gaya-v8">
         <h3>Gaya v.8</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.8 */
.gaya-v8
{
   position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.gaya-v8:before, .gaya-v8:after
{
 content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.gaya-v8:after
{
 right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

Semoga bermanfaat....

Efek shadow dengan css :before :after pseudo-elemen


Efek shadow dengan css :before :after pseudo-elemen

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Hatsaka. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Hatsaka dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Columbia Mary pada tanggal Sunday, August 18, 2013