Modifikasi Blockquote Dengan Gambar Sebagai Background

Modifikasi Blockquote Dengan Gambar Sebagai Background - Gambar sebagai objek untuk sebuah tag blockquote sangat dimungkinkan untuk memperindah tampilan, baik sebagai background maupun sebagai tag <img>, untuk membuat blockquote hanya menggunakan tag <blockquote> yang diperuntukan sebagai sebuah quote pada sebuah post atau pada tempat lain.

Seperti pada postingan sebelumnya, blockquote dengan sentuhan box-shadow dan blockquote dengan gradient sebagai pemanis dalam tampilannya, blockquote yang satu ini juga bisa menjadi pilihan untuk menjadi pertimbangan dalam membentuk tampilan sebuah blockquote.

Blockquote Dengan Gambar Sebagai Background

CSS

blockquote {
  background:#F8E681 url(Alamat Gambar);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  background-size: 64px 64px;
  padding:10px 10px 10px 80px;
  margin:10px auto;
  border-radius: 5px;
  position: relative;
  font-size: 16px;
  font-style: italic;
  text-align: left;
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #39A1CF;
  text-shadow: -1px 1px 1px black;
  box-shadow: 0 0 1px black;
}
blockquote:after {
  position: absolute;
  display: block;
  content: "";
  height: 0;
  width: 0;
  top: 100%;
  left: 90%;
  border-style: solid;
  border-width: 20px 15px 0 0;
  border-color: #F8E681 transparent transparent transparent;
}

HTML

<blockquote>isi teks</blockquote>

Blockquote Dengan Gambar Sebagai Tag Image

CSS

blockquote {
  position: relative;
  background: #F8E681;
  box-shadow: 0 0 1px black;
  margin: 10px auto;
  padding: 10px;
  border-radius: 5px;
  color: #39A1CF;
  font-size: 16px;
  font-style: italic;
  text-align: left;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-shadow: -1px 1px 1px black;
}
blockquote img {
   width: 64px;
   height: 64px;
   margin-right: 10px;
   float: left;
}
blockquote:after {
  position: absolute;
  display: block;
  content: "";
  height: 0;
  width: 0;
  top: 100%;
  left: 90%;
  border-style: solid;
  border-width: 20px 15px 0 0;
  border-color: #F8E681 transparent transparent transparent;
}

HTML

<blockquote>
<img alt="quote" src="Alamat gambar" />
isi teks
</blockquote>

Dari kedua blockquote tersebut diatas hampir memiliki tampilan yang sama, yang membedakan adalah kerataan dari isi blockquote.

• Demo

Tag image dalam tag blockquote dapat kita modifikasi dengan tambahan style ataupun efek dengan CSS.

Semoga kedua blockquote tersebut diatas bisa bermanfaat sebagai pemanis dalam blog kalian.