Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

CSS Box Shadow 3D Unyu-unyu! #Responsive

CSS Box Shadow 3D Unyu-unyu! #Responsive - Icon CSS3 BOX SHADOW 3DHehe, 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


<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
Suka artikel ini? Bagikan!

Hidden Ads!

 
Mohon Aktifkan Javascript!Enable JavaScript