Pengikut

17 Januari 2007

CSS : HighLight Important Text on The Box

Terinspirasi tampilan di blognya Wicky dalam salah satu postingnya yang menampilkan teks penting yang terbungkus di dalam kotak laiknya tampilan di surat kabar, kali ini edittag coba membidiknya dari sisi CSS.

Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.
Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.

Berikut kodenya :

<div style="background-color:#00A2C6;color:#fff; width:200px;float: right;border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 5px;margin-left:15px;">Isi teks yang kita anggap penting.</div>

Contoh dari penggunaan kode ini seperti terpampang di bagian atas posting ini.Dengan demikian isi dari posting kita akan lebih mudah dikenali oleh pengunjung.Tak sekedar judul posting yang bisa mewakili isi dari posting yang kita tulis, namun dengan cara ini kita bisa menyuguhkan pesan utama atau pesan yang ingin kita garis bawahi.


Catatan :
background-color akan mewakili warna bacground dalam kotak,
color mewakili warna teks dalam kotak,
width mewakili luas dari lebar kotak,
float mewakili letak penampilan (apakah di kanan atau kiri),

Sila dicoba.

Add to Technorati Favorites