CSS

Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Warna Pilihan

Rabu, 04 Juli 2012

Warna - Warna Pilihan Q
#E1E1E1=Kelabu
#1559AD=Biru langit
#99CC00=Hijau daun
#232323=Hitam pudar
#555555=Hitam kelabu
#5555bb=ungu

CSS3: Mudahnya Membuat Border Lengkung dengan border-radius

Rabu, 20 Juni 2012

Salah satu properti CSS3 yang paling berguna adalah border-radius. Web desainer tidak perlu lagi menggunakan gambar/graphic untuk mendapatkan efek border lengkung di setiap sudut. Tampilan tabel atau border akan terlihat cantik dan elegan.
Internet Explorer tidak mendukung banyak properti CSS lanjut, kamu bisa menggunakan Firefox, Opera, Chrome atau Safari. Jadi jangan terkejut jika kamu tidak mendapatkan efek yang kamu inginkan di IE.

Sintaks untuk border-radius

Seperti properti CSS yang berhubungan dengan margin, padding, atau border, ada empat properti, masing-masing satu untuk setiap sisi dan ada juga shorthand (penggabungan) keempat sisi sekaligus. Untuk nilainya dapat menggunakan satuan ‘px’ atau ‘em’.

Contoh Penggunaan

Contoh berikut ini menggunakan Firefox dengan properti -moz-border-radius dan
Safari/Chrome dengan properti -webkit-border-radius
border radius2 CSS3: Mudahnya Membuat Border Lengkung dengan border radius

border radius2 CSS3: Mudahnya Membuat Border Lengkung dengan border radius

border radius CSS3: Mudahnya Membuat Border Lengkung dengan border radius

Sumber : http://ginigitu.com/tips-trik/css3-sudut-lengkung-border-radius.htm

Membuat Efek Shadow dengan CSS

Selasa, 19 Juni 2012

Dalam pembuatan sebuah website, interface yang indah akan memberikan kenyamanan kepada setiap orang yang berkunjung pada website tesebut. Membuat efek yang realistik terkadang meningkatkan keindahan sebuah website, salah satunya dengan membuat efek shadow. Contoh :

Membuat efek shadow seperti contoh di atas bisa dilakukan dengan cara memanipulasi sebuah gambar yang kemudian dijadikan background image, tetapi cara ini akan sulit dilakukan dan merupakan suatu pemborosan (pemborosan waktu dan tenaga =P). Dengan bantuan CSS, kita dapat mengakali hal ini dengan cara yang sangat mudah. Tinggal mengikuti code CSS berikut :

.shadowbox {
border: 1px #999 solid;
padding: 5px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 0px 0px;
box-shadow: 3px 3px 3px #CCC; /* CSS3 */
-moz-box-shadow: 3px 3px 3px #CCC; /* Untuk Safari, Chrome, dan WebKit lainnya*/
-webkit-box-shadow: 3px 3px 3px #CCC; /* Untuk Firefox */
}
Code HTML :
< div class="shadowbox" > 5 Testimonials < /div >

Cukup mudah bukan? Sebenarnya bermain dengan CSS itu sangat menyenangkan.

Selamat Mencoba =D
Sumber:http://www.cactusproject.com/blog/membuat-efek-shadow-dengan-css.php

Membuat Ujung Border Melengkung dengan CSS

Selasa, 19 Juni 2012

Dalam pembuatan website dinamis dan modern, sangatlah membosankan jika kita hanya memakai element yang kaku dan kotak-kotak saja. Terkadang, kita butuh sudut border object yang melengkung, misalnya dipakai pada text box atau input text biasa. Contoh :

Beberapa orang mungkin akan mengira bahwa kita menggunakan background gambar untuk menciptakan efek melengkung pada text box. Tapi hal itu tidak efisien secara sistem, karena kita harus mendownload image dan menunggu loading yang cukup lama jika terdapat banyak gambar yang harus di download sesuai dengan panjang textbox.

Nah, cara yang tepat adalah menggunakan CSS seperti ini :

.namaclass{
border-radius:10px; /* CSS 3*/
-khtml-border-radius:10px; /* Untuk Linux */
-moz-border-radius:10px; /* Untuk Safari, Chrome, dan WebKit lainnya*/
-webkit-border-radius:10px; /* Untuk Firefox */
}

Pemakaiannya di textbox :

<form>
<input type="text" class="namaclass" />
<form>

Repot juga yah, banyak kodenya. Ya, memang harus menuliskan beberapa CSS code karena belum kompatibel secara seragam di semua browser. Selamat mencoba!
Sumber: http://www.cactusproject.com/blog/cara-membuat-ujung-border-yang-melengkung-dengan-css.php