Rounded Corner | Membuat Sudut menjadi Tumpul

Posted by Gani Mugni Kamis, 01 Desember 2011 0 komentar
Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Smua Tentang Bagaimana Cara Menghilangkan Garis Bintik-bintik Jejak Link.Dan Pada Tutorial Yg Sama Juga Yaitu Tutorial Blog Saya Akan Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara  Membuat Sudut  Menjadi Tumpul Atau Juga Disebut Rounder Corner.
Tentu Sobat Semua  Pernah melihat di sudut-sudut blog kelihatan tumpul? Nah, itu dinamakan "rounded corner". Sebelum melangkah lebih jauh, kita perlu membatasi ruang lingkup kajian trik blogger kali ini. Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image).
Kemudian bentukkan rounded corner dari kode CSS ini akan nampak, apabila kamu menggunakan browser Firefox, Chrome, dan Safari. Ngomong-ngomong soal tumpul, asal jangan dikaitkan dengan pikiran, lho. Ayo, kita keroyok Tutorial blogger tentang membuat rounded corner :


Full rounded corner :


.kotak-rounded-corner {


background-color:#FFFF00;

border:2px solid #FF0000;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px; }

Rounded corner di kiri atas :

.kotak-rounded-corner {

background-color:#FFFF00;


border:2px solid #FF0000;

-moz-border-radius-topleft: 10px;

-webkit-border-top-left-radius: 10px;

-khtml-border-radius-topleft: 10px;

border-top-left-radius: 10px; }

Rounded corner di atas :

.kotak-rounded-corner {

background-color:#FFFF00;

border:2px solid #FF0000;


-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-radius-topleft: 10px;

-khtml-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px; }

Rounded corner di bawah :

.kotak-rounded-corner {


background-color:#FFFF00;

border:2px solid #FF0000;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-khtml-border-radius-bottomleft: 10px;

-khtml-border-radius-bottomright: 10px;

border-bottom-left-radius: 10px;


border-bottom-right-radius: 10px; }

Catatan :
  1. Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
  2. Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
  3. Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
  4. Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.
Selamat membuat rounded corner...




TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Rounded Corner | Membuat Sudut menjadi Tumpul
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/12/rounded-corner-membuat-sudut-menjadi.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.