Bingkai Untuk Sebuah Karya Puisi

Saya telah menyaksikan
Bagaimana keadilan telah dikalahkan
oleh para penguasa
dengan gaya yang anggun
dan sikap yang gagah
Tampa ada ungkapan kekejaman
diwajah mereka

Dengan bahasa yang rapi
mereka keluarkan keputusan-keputusan
yang tidak adil terhadap rakyat

Serta dengan budi bahasa yang halus
mereka saling membagi keuntungan
yang mereka dapat dari rakyat
yang kehilangan tanah dan ternaknya

Ya, semuanya dilakukan
sebagai suatu kewajaran

Demi Orang-Orang Rangkasbitung…
W.S Rendra

 

Malam selalu sunyi, walaupun begitu tak terasa tangan dan pikiran mencoba menjelajahi segala kemungkinan, sampai berhenti saat tak ada lagi sudut kemungkinan dari setiap kemungkinan.

Bingkai untuk sebuah puisi ini, merupakan trik css yang masih merujuk kepada tulisan sebelumnya, yakni “ Membuat kata-kata bijak dengan bingkai – alert message “.

Di sini saya hanya mempermainkan background positionnya. jika pada tulisan kemarin, saya meletakan gambarnya di samping kiri.

background-position: 15px 50%; /* posisi gmabar */

15px = posisi gambar secara horizontal (antara kiri dan kanan)
50% = posisi gambar secara vertikal ( antara atas dan bawah ).

Maka untuk membuat bingkai puisi ini, saya meletakan gambarnya di ujung paling atas. maka coding css background position-nya seperti ini :

background-position: 50%  0px; /* posisi gmabar */

hingga meletakan gambar di tenggah-tengah ( 50%  secara horizontal ) dan menariknya di ujung paling atas ( 0px – nol secara vertikal ).

Dan ini merupakan kode keseluruhannya,

Ingat jika ingin menganti baris gunakan <br/> dan untuk menganti tag <p> ( paragraf ) - gunakan <br/><br/>  ( secara berulang-ulang ).

 

<p style="border-right: #ffd324 2px solid; padding-right: 5px; border-top: #ffd324 2px solid; padding-left: 5px; background: url(http://lh3.ggpht.com/jaloee/SJnkSrFjzrI/AAAAAAAACXw/l0Kv-9PRepQ/pin.png) #f3f0eb no-repeat 50% 0px; padding-bottom: 5px; margin: 10px auto; border-left: #ffd324 2px solid; width: 300px; padding-top: 20px; border-bottom: #ffd324 2px solid; text-align: center">

         

<br />Saya telah menyaksikan  

   

  <br />Bagaimana keadilan telah dikalahkan       
     <br />oleh para penguasa 
         

  <br /><br />dengan gaya yang anggun       
   <br />dan sikap yang gagah
      

</p>

*Gambar pin di atas saya pinjam dari webdesignerwall.com .

* dan saya pikir.. mungkin banyak cara lagi selain ini.

Related Posts

from tag editblog

• Membuat kata-kata bijak menjadi lebih berkesan dengan “ Alert Message “
• Menambah Icon dan Bakcground-Image pada elemen post-footer
• Post-Footer : Menambah Sosial Bookmarking
• Post–footer : mengenal tag html “post–footer” pada template minima

(more..)

 

del.icio.us tags: Tutorial Blogger Blogspot

Page views this post: reader