Web Design & Development

Logo / Corporate Identity

Seach Engine Optimization

eCommerce

Wednesday, August 5, 2009

5Aug
2009




CSS Teaser Box

This is an example teaser box. Since its width is fixed, I can get away with using just two background images (tsr-b.gif and tsr-t.gif) to create the rounded corners and the top and bottom borders. CSS is used for the left and right borders. This box will expand vertically to contain any amount of text, of almost any size. View source to see the XHTML and CSS. You may also want to read the related blog posts for further notes and discussion: CSS Teaser Box and CSS teaser box revisited.

Also see the one-image version


Di atas ini ialah contoh "teaser box" yang biasa digunakan oleh web designer untuk menunjukkan "excerpt" sesuatu rencana, artikel atau dokumen. Pembinaan kotak teaser ini menggunakan kod CSS dan HTML.

Ianya mudah untuk dibuat. Walaubagaimana pun anda perlu "upload" background image bagi mendapatkan effek sebuah kotak.

Sila kembali ke ruang artikel untuk mendapatkan dan kod CSS dan HTML untuk kotak ini.

No comments:

Post a Comment