Efek shadow dengan css :before :after pseudo-elemen

Efek shadow dengan css :before :after pseudo-elemen

CSS

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

Artikel Terkait

  • Menghitung ke-spesifik-an Selector
    CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang. Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0…
  • Prioritas Selector CSS (Cascading)
    Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading. Pengertian Cascading dari CSS CSS adalah singkatan dari Cascading Style Sheet, dimana ca…
  • Penggunaan Selector CSS
    Anggap saja  kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik. CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menja…
  • Cara Penulisan Kode CSS
    Setelah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri. Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih me…
  • Membuat efek gelembung dengan pure CSS
    Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada. Efek i…
  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...