Dokumen ini adalah terjemahan dari CSS tips & tricks - Rounded corners and shadowed boxes dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/roundshadow

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(Halaman ini menggunakan CSS style sheets)

Melengkung & berbayang

Lima gambar

Hasil

Pojok yang melengkung dan kotak berbayang

CSS3 akan memiliki proeprti untuk membuat pojokan yang melengkung, batasan yang terdiri dari gambar dan kotak dengan bayangan, tapi dengan sedikit usaha anda dapat mensimulasikan beberapa diantaranya dengan CSS2 — tanpa menggunakan tabel ataupun mark-up tambahan.

Halaman ini di inspirasi oleh suatu hal yang dibuat oleh seorang yang bernama Arve Bersvendsen. Dia memiliki Banyak lagi demo CSS yang menarik.

Tentu saja, batasan yang melengkung dan bayangan akan lebih mudah dengan CSS3. Sebagai contoh, untuk memberikan paragraf sebuah batas merah yang tebal dengan pojokan yang melengkung, anda hanya membutuhkan dua baris aturan CSS3 yang serupa dengan hal berikut:

P { border: solid thick red;
border-radius: 1em }

Dan untuk menambahkan sebuah drop shadow yang samar-samar dengan jarak setengah em ke bawah dan kekanan paragraf, satu  baris saja sudah cukup:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Anda dapat mencobanya disini bila sudah dapat digunakan.) Tetapi bila anda membutuhkannya sekarang dan tidak keberatan atas  tingkat kompleksitas serta kurangnya  fleksibilitas, anda dapat menggunakan tehnik dibawah. Paling tidak hal tersebut akan menjadi tes yang menarik untuk browser yang memiliki bug…

Lima gambar pada satu elemen

Trik utamanya adalah untuk menghasilkan konten ('::before' and '::after') untuk dapat menaruh empat gambar tambahan pada sebuah elemen. Psuedo-elemen '::before' dapat memiliki sebuah latar belakang dan sebuah latar depan, dan pseudo-element '::after'  juga, serta elemen tersebut dapat memiliki latar belakang, sehingga semuanya berjumlah lima gambar.

Kami telah membuat lima gambar PNG dan menaruhnya di keempat pojok dan di sebelah sisi kanan elemen. Berikut gambarnya:

pojok kiri atas:
top left corner
bagian atas dan pojok kanan atas:
top right corner
bagian tengah serta bagian sisi kanan:
background and right edge
pojok kiri bawah:
bottom left corner
sisi bawah dan pojok kanan bawah:
bottom and bottom left corner

Dan berikut adalah aturan-aturan CSS untuk memposisikan gambar tersebut:

blockquote {
max-width: 620px;
background: url(rs-right.png) right repeat-y }
blockquote::before {
display: block;
line-height: 0;
background: url(rs-topright.png) top right no-repeat;
content: url(rs-topleft.png) }
blockquote::after {
display: block;
line-height: 0;
background: url(rs-bottomright.png) bottom right no-repeat;
content: url(rs-bottomleft.png) }

Karena gambar latar belakang kita lebarnya 620px, kita tidak dapat membiarkan kotak dengan lebar lebih dari 620px, tanpa membuat adanya jarak. Itulah mengapa properti 'max-width' ada disana. Properti 'display: block' dibutuhkan untuk memastikan bahwa konten yang dihasilkan membentuk kotak tersebut diatas dan dibawah kotak utama, dan bukan ditaruh di baris pertana dan terakhir. Properti  'line-height: 0' memastikan tidak ada jarak untuk naik atau turun disisi atas atau bawah gambar dari properti 'content'.

Hasilnya

And here is how it looks:

Apakah anda dapat melihat kotak hijau pucat dengan pojokan yang melengkung serta drop shadow pada latar belakang putih ? Bila tidak, browser anda tidak menangani konten yang dihasilkan dengan benar (atau bahkan tidak sama sekali).

Sumber HTML seharusnya tidak lebih dari seharusnya:

<blockquote>
<p>Do you see a pale green box with rounded corners
and a drop shadow against a white background? If not,
your browser isn't handling the generated content
correctly (or maybe not at all).
</blockquote>

Dan bila anda ingin mencoba apakah browser anda dapat mencobanya dengan cara yang digunakan CSS3, anda dapat mencobanya disini.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Jan 2004;
last updated $Date: 2007/10/27 00:47:14 $ GMT