Variasi Desain Box dengan CSS

Belajar dengan contoh adalah salah satu cara belajar yang paling efektif. Di sini ada beberapa contoh variasi penggunaan css untuk diterapkan pada sebuah bentuk objek box atau kotak.


Kotak dengan sudut melengkung (border-radius) dan berbayang (box-shadow)

.round-corner{
    background: none repeat scroll 0 0  #C1D2E7;
    border-radius: 0 0.4em 0.4em 0;
    box-shadow: 0 1px 3px #000000;
    float: none;
    margin: 0 0 0 -3px;
    padding: 20px 20px 1px;
    width: 35%;
}

Kotak dengan outline di sekelilingnya

.outline-box{
    background-color: #1875B9;
    outline: 1px solid #AAAAAA;
    outline-offset: 2px;
    padding: 0.2em 0.1em 0.5em;
    text-align: center;
    text-transform: uppercase;
    width: 3em;
    color: #FFFFFF;
    font-size: 0.8em;
    line-height: 1;
}
Pos ini dipublikasikan di Developer. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s