Cara Membuat CSS Box Shadow 3D di Blog

M-S Blog || Cara Membuat CSS Box Shadow 3D di Blog, Kali ini saya akan share tentang cara membuat box shadow di blog, Apa sih box shadow itu ? hemm, gimana cara njelasinnya yaa, coba liat sendiri aja tutorialnya dibawah :)

Berikut demonstrasi nya :

Ini Adalah Demo BOX SHADOW 3D

Oke, Langsung saja !

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>