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.

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>

• Demo

Semoga style blockquote diatas bisa membantu memperindah tampilan blog kalian.