Modifikasi Blockquote Dengan Properti Box-Shadow

Modifikasi style tag blockquote dengan properti box-shadow dengan dua pilihan warna supaya lebih baik

Modifikasi Blockquote Dengan Properti Box-Shadow

Modifikasi Blockquote Dengan Properti Box-Shadow - Jika sebelumnya style blockquote dengan menggunakan properti background dengan warna gradient, style blockquote yang sekarang akan saya share secara garis besar menggunakan properti box-shadow dengan tambahan properti lainnya untuk mendukung style blockquote tersebut.

Seperti disebutkan sebelumnya, style ini bukan hanya bisa dipergunakan untuk tag blockquote saja, melainkan bisa juga dipergunakan untuk selektor class atau id lainnya sebagai tampilan quote.

Dua pilihan style blockquote dengan properi box-shadow memberikan pilihan bagi kalian untuk mempergunakan, membandingkan atau modifikasi ulang baik dengan atau tidak menggabungkan kedua tampilan blockquote tersebut.

properti box-shadow sebagai unsur style utama yang ditampilakan, karena menurut saya lebih mudah dalam pembuatan dengan tidak adanya prefix khusus seperti pada pada background-image yang akan membuat script css menjadi lebih panjang, karena kesesuainnya dengan browser yang dipergunakan.

Tampilan Tag Blockquote

Dua Pilihan Blockquote Dengan Properti Box-Shadow


Biru

CSS
blockquote {
  padding: 10px;
  color: #EEF8FB;
  margin-top: 20px;
  border-radius: 5px;
  position: relative;
  font-size: 16px;
  font-style: italic;
  text-align: center;
  font-family: "Comic Sans MS", cursive, sans-serif;
  background: #39A1CF;
  text-shadow: -1px 1px 1px black;
  box-shadow: inset 0px 2px 5px rgba(28, 92, 115, 0.9);
}
blockquote:before {
  content: "Quote:";
  font-size: 30px;
  line-height: 20px;
  position: absolute;
  top: -35px;
  border-radius: 5px 5px 0 0;
  padding: 10px 20px 5px;
  text-align: center;
  background: #39A1CF;
  color: #39A1CF;
  text-shadow: -1px -1px 1px #CAE7F2, 1px 1px 1px #1E5F7B;
  box-shadow: 0px -1px 1px rgba(204, 204, 204, 0.7), 0px 2px 1px rgba(110, 110, 110, 0.5), inset 0 2px 20px rgba(0, 0, 0, 0.3);
}

Hijau

CSS
blockquote {
  color: #E7F9FD;
  line-height: 1.4em;
  position: relative;
  font-size: 16px;
  font-family: Georgia,serif;
  font-style: italic;
  text-align: justify;
  padding: 10px 10px 10px 50px;;
  margin: 10px 0;
  border-radius: 10px;
  background-color: #7FAB14;
  box-shadow: 0 1px 5px #333, inset 0 55px hsla(0, 0%, 100%, .2),  inset 0 -15px 55px rgba(0, 0, 0, 0.3);
}
blockquote:before {
  display: block;
  content: "\201C";
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 50px;
  color: #7FAB14;
  text-shadow: -1px -1px 1px #CDEF76, 1px 1px 1px #5C7B0E;
}

HTML
<blockquote>isi teks</blockquote>


Semoga style blockquote diatas bisa membantu memperindah tampilan blog kalian.

4 comments:

  1. gan, ajarin atuh blockquote style yang anda pakai di blog ini. Trim's..

    ReplyDelete
    Replies
    1. tag blockquote yang saya pergunakan malah lebih sederhana, hanya garis border atas dan bawah doang, seperti breadcrumb diatas. Coba search border emboss

      Delete
  2. gan izin share ya? Keren nih masalahnya...hehe..

    ReplyDelete
  3. wihh
    kereeenn
    makasih mas infonya
    pengen custom2 template nih :D
    akhirnya ketemu juga
    hehehe :D
    http://teens-sharing.blogspt.com/

    ReplyDelete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin