Index»
atau
»
blog
»
cara
»
corner
»
di
»
membuat
»
rounded
»
sudut
»
tumpul
»
Cara Membuat Sudut Tumpul atau Rounded Corner di Blog
Dibawah ini contoh kode - kode Nya :
1. Full rounded corner :
2. Rounded corner di kiri atas :
3. Rounded corner di atas :
4. Rounded corner di bawah :
Nah mungkin segitu aja, dan untuk variasi lainnya silahkan berkreasi sendiri.
Selamat mencoba...!!!
Cara Membuat Sudut Tumpul atau Rounded Corner di Blog
Jumat, 29 November 2013
Banyak sekali Variasi kode HTML, diantaranya pada postingan saya kali ini yaitu bagaimana Cara Membuat Sudut Tumpul atau Rounded Corner di Blog..Dibawah ini contoh kode - kode Nya :
1. Full rounded corner :
.kotak-rounded-corner {
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }
2. Rounded corner di kiri atas :
.kotak-rounded-corner {
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }
3. Rounded corner di atas :
.kotak-rounded-corner {
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
4. Rounded corner di bawah :
.kotak-rounded-corner {
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
background-color:#00FF00;
border:2px solid #FF0000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
Nah mungkin segitu aja, dan untuk variasi lainnya silahkan berkreasi sendiri.
Selamat mencoba...!!!
Shared by: http://terselungkup.blogspot.com/
Source: http://optimasi-blog.blogspot.com/
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar