Purely CSS Callouts for Comment Style

Sebelum acara mosting dimulai, ada pemberitahuan dari status blogger mengenai akan dinonaktifkannya fasilitas upload gambar selama sekitar 2 jam dikarenakan ada pembenahan rutin :) Blogger Status. Nah sekarang mari kita masuk ke sesi postingan yg sebenarnya ;)) Sobat pernah melihat bagian komentar pada blog salah satu master kita @Kang Rohman? Jika diperhatikan bagian komentarnya ada seni sedikit berupa gambar yg ada cureknya...halaaaahhhh...CUREKKK!!! Kalau dalam screenshot akan tampak seperti berikut kotak komentarnya:

Yup sobat, itu yg Beben si bloglang ganteng kalem tea maksudkan ;)) Ada seninya kan berupa gambar mengarahkan pada ID si komentarnya berupa gambar curek dikit :D =)) Ternyata eh ternyata, setelah BW kesana kemari itu dapat dibuat hanya dengan menggunakan CSS tanpa menggunakan gambar >:) Tertarik!!! cek di dot [..]

Sama sang kreasinya karya ini dikasih judul "Purely CSS Callouts" ;)) Secara default kode ini akan ada dua jenis sob. Ada yg cureknya mengarah keatas ( Up Side Callout) dan kebawah ( Down Side Callout) :P

Up Side Callout

@BebenKoben Said:

Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.

Kode CSS

Seperti biasa yah diletakinnya sebelum/diatas kode ]]></b:skin>

.calloutUp
{
height: 0;
width: 0;
border-bottom: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 10;
}
.calloutUp2
{
position: relative;
left: -10px;
top: 2px;
height: 0;
width: 0;
border-bottom: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 11;
}
.divContainerUp
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: -1px;
z-index: 9;
width: 98%;
padding: 4px;
}

Kode HTML

Kalau urusan ini bisa diedit-edit sesuai ID pada bagian komentar sobat masing-masing :) Dengan ID yg ada pada CSS diatas berarti yaa sama :D

<h3>Up Side Callout</h3>
<div><a href="#">Beben Koben</a> Said</div>
<div class="calloutUp">
<div class="calloutUp2">
</div>
</div>
<div class="divContainerUp">
Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.
</div>

Down Side Callout

Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.

@BebenKoben Said:

Kode CSS

.calloutDown
{
height: 0;
width: 0;
border-top: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 11;
}
.calloutDown2
{
position: relative;
left: -10px;
top: -12px;
height: 0;
width: 0;
border-top: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 10;
}
.divContainerDown
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: 1px;
z-index: 3;
width: 98%;
padding: 4px;
}

Kode HTML

<h3>Down Side Callout</h3>
<div class="divContainerDown">
Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.
</div>
<div class="calloutDown">
<div class="calloutDown2">
</div>
</div>
<div>
<a href="#">Beben Koben</a> Said</div>

Nah kode CSS sudah ada, kode HTML juga sudah ada, tinggal kreatifitas sobat untuk memasukan ke bagian komentarnya :)) Good luck and happy blogging \m/
Original article:www.dailycoding.com