Concept Design CSS Box Shadow

10 Model Tampilan Box Dengan Efek Bayangan (Box Shadow)

Concept Design CSS Box Shadow - Concept kali ini merupakan penyempurnaan dari artikel sebelumnya tentang » Mengenal CSS Dasar Box Shadow, dimana pekerjaan sahabat semua pecinta SAHABAT BLOGGER 77 untuk membuat efek banyangan pada box akan saya permudah cara penerapannya. Dibawah ini sudah saya siapkan 10 pilihan bentuk design teks box dengan efek bayangan, Anda tinggal memilih model box yang mana untuk membuat teks box Anda terlihat lebih menarik. Penulisan kode lengkapanya seperti ini:

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

Dan pilihannya Seperti ini :




DEMO SHOW

TOOL BOX SHADOW

CSS3 Input Generator Box Shadow



Jika sudah menemukan style yang cocok, Anda tinggal memanggil pengaturan CSS diatas dengan perintah fungsi HTML seperti ini:

<div class="box-shadow lifted">// For shadow style lifted
  <p>Lifted corners</p>
</div>

<div class="box-shadow curled">// For shadow style curled
  <p>Curled corners</p>
</div>

<div class="box-shadow perspective">// For shadow style perspective
  <p>Perspective</p>
</div>

<div class="box-shadow raised">// For shadow style raised
  <p>Raised box</p>
</div>

<div class="box-shadow curved v1">// For shadow style curved (v1)
  <p>Single vertical curve</p>
</div>

<div class="box-shadow curved v2">// For shadow style curved (v2)
  <p>Vertical curves</p>
</div>

<div class="box-shadow curved h1">// For shadow style curved (h1)
  <p>Single horizontal curve</p>
</div>

<div class="box-shadow curved h2">// For shadow style curved (h2)
  <p>Horizontal curves</p>
</div>

<div class="box-shadow lifted rotated">// For shadow style rotated
  <p>Rotated box</p>
</div>

<div class="box-shadow multi">// For shadow style multi
  <p>Multi Shadow</p>
</div>

Sangat mudah dan sederhana bukan.!?, semoga concept yang saya berikan ini kelak bisa membantu sahabat semua untuk membuat tampilan teks box yang lebih menarik lagi, sampai disini dulu ya, waktunya bercerita dan berkirim-kirim salam di kolom komentar, Devy tunggu ya, hehe..!!