Cara Membuat Box Shadow 3D dengan CSS

Hehe, Unyu-unyu .. Judul doang tuh sob! pada kesempatan kali ini si akang cuman niat koleksi / sharing Cara Membuat Box Shadow 3D dengan CSS ,

berikut demonstrasi nya :

Ini Adalah Demo BOX SHADOW 3D
Bukan Demo Mogok Makan ya sob! -___- Kenapa Saya sendiri lebih suka share ginian dari pada share pemecahan masalah, dsb. karena saya sendiri lebih puas jika website yang saya buat, tampak nyaman dan unik dimata sang pengunjung ..

Hehe, gak perlu basa dan basi lagi ya sob, lanjut yuk ke cara bikin nya? ..
1. Simpan Kode CSS dibawah ini, tepat di atas tag </head> :

<link href="http://www.dreamtemplate.com/dreamcodes/css_shadows/css/tsc_css_shadows.css" rel="stylesheet" type="text/css"></link>
2. Berikut adalah Contoh & Kode untuk Memanggil CSS BOX SHADOW Unyu-unyu nya sob :

Lifted corners
Contoh ke-1
Curled corners
Contoh ke-2
Perspective
Contoh ke-3
Raised box
Contoh ke-4
Single vertical curve
Contoh ke-5
Vertical curves
Contoh ke-6
Single horizontal curve
Contoh ke-7
Horizontal curves
Contoh ke-8
Cara Memanggil CSS BOX SHADOW 3D di atas!


<div class="css_image_shadows">


<!-- 1 -->
    <div class="drop-shadow lifted" style="width:240px;height:70px;">
      <p>Lifted corners<br /><small>Contoh ke-1</small></p>
    </div>


<!-- 2 -->
    <div class="drop-shadow curled" style="width:240px;height:70px;">
      <p>Curled corners<br /><small>Contoh ke-2</small></p>
    </div>


<!-- 3 -->
    <div class="drop-shadow perspective" style="width:240px;height:70px;">
      <p>Perspective<br /><small>Contoh ke-3</small></p>
    </div>


<!-- 4 -->
    <div class="drop-shadow raised" style="width:240px;height:70px;">
      <p>Raised box<br /><small>Contoh ke-4</small></p>
    </div>


<!-- 5 -->
    <div class="drop-shadow curved curved-vt-1" style="width:240px;height:70px;">
      <p>Single vertical curve<br /><small>Contoh ke-5</small></p>
    </div>


<!-- 6 -->
    <div class="drop-shadow curved curved-vt-2" style="width:240px;height:70px;">
      <p>Vertical curves<br /><small>Contoh ke-6</small></p>
    </div>


<!-- 7 -->
    <div class="drop-shadow curved curved-hz-1" style="width:240px;height:70px;">
      <p>Single horizontal curve<br /><small>Contoh ke-7</small></p>
    </div>


<!-- 8 -->
    <div class="drop-shadow curved curved-hz-2" style="width:240px;height:70px;">
      <p>Horizontal curves<br /><small>Contoh ke-8</small></p>
    </div>
  </div>

Source : http://www.dreamtemplate.com/dreamcodes/documentation/css_shadows.html

Hehe, Unyu-unyu .. Judul doang tuh sob! pada kesempatan kali ini si akang cuman niat koleksi / sharing Cara Membuat Box Shadow 3D dengan CSS ,

berikut demonstrasi nya :

Ini Adalah Demo BOX SHADOW 3D
Bukan Demo Mogok Makan ya sob! -___-

Kenapa Saya sendiri lebih suka share ginian dari pada share pemecahan masalah, dsb. karena saya sendiri lebih puas jika website yang saya buat, tampak nyaman dan unik dimata sang pengunjung .. 

Hehe, gak perlu basa dan basi lagi ya sob, lanjut yuk ke cara bikin nya? .. 

1. Simpan Kode CSS dibawah ini, tepat di atas tag </head> :

<link href="http://www.dreamtemplate.com/dreamcodes/css_shadows/css/tsc_css_shadows.css" rel="stylesheet" type="text/css"></link>

2. Berikut adalah Contoh & Kode untuk Memanggil CSS BOX SHADOW Unyu-unyu nya sob :

Lifted corners
Contoh ke-1

Curled corners
Contoh ke-2

Perspective
Contoh ke-3

Raised box
Contoh ke-4

Single vertical curve
Contoh ke-5

Vertical curves
Contoh ke-6

Single horizontal curve
Contoh ke-7

Horizontal curves
Contoh ke-8

Cara Memanggil CSS BOX SHADOW 3D di atas!

<div class="css_image_shadows">


<!-- 1 -->
    <div class="drop-shadow lifted" style="width:240px;height:70px;">
      <p>Lifted corners<br /><small>Contoh ke-1</small></p>
    </div>


<!-- 2 -->
    <div class="drop-shadow curled" style="width:240px;height:70px;">
      <p>Curled corners<br /><small>Contoh ke-2</small></p>
    </div>


<!-- 3 -->
    <div class="drop-shadow perspective" style="width:240px;height:70px;">
      <p>Perspective<br /><small>Contoh ke-3</small></p>
    </div>


<!-- 4 -->
    <div class="drop-shadow raised" style="width:240px;height:70px;">
      <p>Raised box<br /><small>Contoh ke-4</small></p>
    </div>


<!-- 5 -->
    <div class="drop-shadow curved curved-vt-1" style="width:240px;height:70px;">
      <p>Single vertical curve<br /><small>Contoh ke-5</small></p>
    </div>


<!-- 6 -->
    <div class="drop-shadow curved curved-vt-2" style="width:240px;height:70px;">
      <p>Vertical curves<br /><small>Contoh ke-6</small></p>
    </div>


<!-- 7 -->
    <div class="drop-shadow curved curved-hz-1" style="width:240px;height:70px;">
      <p>Single horizontal curve<br /><small>Contoh ke-7</small></p>
    </div>


<!-- 8 -->
    <div class="drop-shadow curved curved-hz-2" style="width:240px;height:70px;">
      <p>Horizontal curves<br /><small>Contoh ke-8</small></p>
    </div>
  </div>

Source : http://www.dreamtemplate.com/dreamcodes/documentation/css_shadows.html