Make Blockquote Ala HTML5 Rocks Web

Nasib jika developer lagi sepi artikel tutorial/trick. Imbasnya tidak bisa berbagi resource! Jalan pintas untuk mempertahankan eksistensi update post, tidak lain mengulang kembali tut's yang sudah pernah dibahas Blockquote :d Dengan hadirnya bahasa CSS level 3 memungkinkan pembuatan gaya penulisan blockquote menjadi beragam kembali!
Berikut contoh tampilan blockquote yang terdapat di blog keren ini :p

Blockquote sederhana brkt hanya menggunakan CSS. Bahasa CSS3 telah berhasil mengaplikasikan hal ini ke dalam x/HTML.Beben Koben

Baca tutorialnya jika sobat tertarik untuk memasangnya di blog kalian Blockquote Memakai CSS atau blockquote o citas sencillas con CSS3 This is one great modern block quote styles
Sobat pernah jalan-jalan ke website HTML5 Rocks? Jika pernah maka blockquote yg ada disana tampak seperti berikut:

Contributions for Shadow DOM 201, HTML's New Template Tag, Screensharing a browser tab in HTML5?, Capturing Audio & Video in HTML5, The Synchronous FileSystem API for Workers, New Tricks in XMLHttpRequest2, "Mobifying" Your HTML5 Site, SVG Puzzle, Orientation Physics, Exploring the FileSystem APIs, Stream Updates with Server-Sent Events, Native HTML5 Drag and Drop, Drag n Drop Photos, Geolocation, Newspaper Columns, Podcast Player, The Basics of Web Workers, A Beginner's Guide to Using the Application Cache, Reading files in JavaScript using the File APIs.

Berikut bumbu-bumbu blockquote ala html5rocks

.commentary {
  font-style: italic;
  font-size: 14px;
  padding: 20px 10px 20px 40px;
  border-radius: 7px;
  line-height: initial;
  border: 2px dashed #afcea9;
  background: #eaf2e8;
  position: relative;
  width: 500px;
  margin: 10px auto;
}
.talkinghead:before {
  content:'';
  position: absolute;
  left: -25px;
  top: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url(LINK YOUR IMAGE);
}

Markup HTML<blockquote class="commentary talkinghead">
BLAH BLEH BLOH
</blockquote>Karena penggunaan background-image paten, maka tampilan photo hanya itu-itu saja :p Bagaimana rumusannya jika kepengen tampilan photo bisa berlainan!

Katakanlah: "Dia-lah Allah, Yang Maha Esa.
Allah adalah Tuhan yang bergantung kepada-Nya segala sesuatu.
Dia tiada beranak dan tidak pula diperanakkan,
dan tidak ada seorangpun yang setara dengan Dia."
Q.S. AL-IKHLASH

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et.

Photo berbeda, tetapi tetap memakai style blockquote yang sama!

.blockarea {
  font-style: italic;
  font-size: 14px;
  padding: 20px 10px 20px 40px;
  border-radius: 7px;
  line-height: initial;
  border: 2px dashed #fff;
  width: 500px;
  margin: 10px auto;
  position: relative;
  text-shadow: 1px 3px 3px #fff;
}
.blockimg {
  position: absolute;
  left: -25px;
  top: 19px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Planning HTML<div class="blockarea">
BLAH BLEH BLOH
<img src="LINK YOUR IMAGE" class="blockimg" alt="" />
</div>Silahkan mau pakai tagging <blockquote> atau <div> bisa juga ;)
Happy blockquote \m/