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




CSS box shadow




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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Concept Design CSS Box Shadow
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

21 komentar

  1. Sering di pake buat slide show jg kayaknya nich konsep

    BalasHapus
    Balasan
    1. konsep apa tuh mas....?

      Hapus
    2. konsep itu buat bersihin kaki bukan? 8-)

      Hapus
  2. saya CTRL + D dev...dan saya palajari lagi pelan-palan. kayaknya memang masalah coding saya memang harus belajar banyak di sini. terima kasih ya sista.

    BalasHapus
    Balasan
    1. nah itu kan mbah dinan, selaluuuuuu merendah, padahal mah Devy hanya mengembangkan atas apa yang mbah pernah sarankan dan ajarkan,

      Hapus
  3. tampilannya rapi sekali designnya baru pertama kali lihat ternyata selalu ada demonya

    BalasHapus
  4. nanti saya copas scriptnya sobat?

    BalasHapus
    Balasan
    1. diberi waktu sampai hari esok, kalau gak dicopas-copas juga, maka script akan dihapus permanent.

      Hapus
  5. lengkap sekali koleksi css nya mbak,saya bisa belajar banyak disini nih

    BalasHapus
  6. oya tak bookmark dulu deh.mantab infonya, dan lupa belum tak follow, di tunggu folow backnya ,salam sahabat blogger

    BalasHapus
  7. efek ini akan lebih bagus jika blog yang membahas anime, oh ya, kok tidak menambahkan script seleksi ganda klik agar area bagian xyntak dengan ganda klik sudah terseleksi semua kode sis?

    <script type='text/javascript'>
    var pres = document.getElementsByTagName("pre");
    for (var i = 0; i < pres.length; i++) {
    pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
    }, false);
    }
    </script>

    BalasHapus
    Balasan
    1. pembahasan diatas hanya sebuah konsep sis, untuk membuat efek banyangan pada sebuah box, jika penambahan kode script seperti diatas, mungkin untuk text-area yang sis maksudkan.

      var pres = document.getElementsByTagName("pre");
      for (var i = 0; i < pres.length; i++) {
      pres[i].addEventListener("dblclick", function () {......


      perintah dikhususkan hanya pada area tag PRE, dengan fungsi teks dalam box akan ter-blok jika melakukan double KLIK. jadi hubungannya bukan kearah sana..
      Sistem seperti yang sis maksudkan adalah format tex-area dengan perintah doubleKLIK, contoh seperti ini:

      JavaScript Sistem Klik Dan Hover Pada Text Area

      Hapus
  8. bentar ya aku ko lambat memahaminya, tapi perasaan aku pernah nyoba yang shadow-shadow itu didevy.. berarti aku harus demonstrasi sendiri ya.. izin nyoba ya..

    BalasHapus
  9. saya mah kurang bakat yang ginian mba devy.hehe

    BalasHapus
  10. wah, untuk yang perspektif kelihatannya bisa dicoba tuh, keren juga modal CSS doang. Bisa diterapin cukup mudah, kok.

    BalasHapus
  11. sekarang waktunya untuk beljar supaya blog bisa lebih dikit kelihatannya

    BalasHapus
  12. wah, disini dibahas lengkap ya mbak konsep css box shadow dan banyak variasi efek shadownya.
    biasanya aku cuma pakai efek shadow yang biasa2 aja.. aku ctrl+D dulu mbak, buat belajar. :)

    BalasHapus
  13. wah mantab nih...sipp...izin nyimak2 :D

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK