Concept Design CSS Box Shadow

Berikut ini akan diuraikan langkah-langkah cara membuat ( Concept Design CSS Box Shadow ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Concept Design CSS Box Shadow ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

<style type="text/css">
.box-shadow {
position: relative;float: left;width: 40%;padding: 1em;margin: 2em 10px 4em;
background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1),0 0 40px rgba(0,0,0,.1) inset}
.box-shadow:before,.box-shadow:after {content: "";position: absolute;z-index: -2}
.box-shadow p {font-size: 16px;font-weight: bold}

/* Lifted Corners */
.lifted {border-radius: 4px}
.lifted:before, .lifted:after {
bottom: 15px;left: 10px;width: 50%;height: 20%;max-width: 300px;max-height: 100px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);transform: rotate(-3deg)}

.lifted:after {
right: 10px;left: auto;-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);-o-transform: rotate(3deg);transform: rotate(3deg)}

/* Curled Corners */
.curled {border: 1px solid #efefef;border-radius: 0 0 120px 120px / 0 0 6px 6px}
.curled:before, .curled:after {
bottom: 12px;left: 10px;width: 50%;height: 55%;max-width: 200px;max-height: 100px;
box-shadow:0 8px 12px rgba(0,0,0,.5);-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)}

.curled: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)}

/* Perspective Style */
.perspective:after {display: none}
.perspective:before {
left: 80px;bottom: 5px;width: 50%;height: 35%;max-width: 200px;max-height: 50px;
box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);-webkit-transform: skew(50deg);
-moz-transform: skew(50deg);-ms-transform: skew(50deg);-o-transform: skew(50deg);
transform:skew(50deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;
-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%}

/* Raised Box */
.raised { box-shadow:
0 15px 10px -10px rgba(0, 0, 0, 0.5),
0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset}

/* Single Vertical Curve ( v1 ) */
.curved:before {
top: 10px;bottom: 10px;left: 0;right: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);border-radius: 10px / 100px}
.curved.v2:before {right: 0}

/* Single Horizontal Curve ( h1 ) */
.curved.h1:before {top:50%;bottom:0;left:10px;right:10px;border-radius:100px / 10px}
.curved.h2:before {top:0;bottom:0;left:10px;right:10px;border-radius:100px / 10px}

/* Rotated Box */
.rotated {
box-shadow: none;-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg)}

.rotated > :first-child:before {
content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;
background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset}

/* Multi Shadow */
.multi {box-shadow:
0 1px 1px rgba(0,0,0,0.15),
0 10px 0 -5px #999,
0 10px 1px -4px rgba(0,0,0,0.15),
0 20px 0 -10px #ccc,
0 20px 1px -9px rgba(0,0,0,0.15),0 0 40px rgba(0, 0, 0, 0.1) inset}
</style>

HTML Kode

// For shadow style lifted

Lifted corners

// For shadow style curled

Curled corners

// For shadow style perspective

Perspective

// For shadow style raised

Raised box

// For shadow style curved (v1)

Single vertical curve

// For shadow style curved (v2)

Vertical curves

// For shadow style curved (h1)

Single horizontal curve

// For shadow style curved (h2)

Horizontal curves

// For shadow style rotated

Rotated box

// For shadow style multi

Multi Shadow

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Concept Design CSS Box Shadow ) semoga bermanfaat terima kasih.

CONTOHNYA

// For shadow style lifted

Lifted corners

// For shadow style curled

Curled corners

// For shadow style perspective

Perspective

// For shadow style raised

Raised box

// For shadow style curved (v1)

Single vertical curve

// For shadow style curved (v2)

Vertical curves

// For shadow style curved (h1)

Single horizontal curve

// For shadow style curved (h2)

Horizontal curves

// For shadow style rotated

Rotated box

// For shadow style multi

Multi Shadow