Home » » Rounded Corner | Membuat Sudut Menjadi Tumpul

Rounded Corner | Membuat Sudut Menjadi Tumpul

Pada Postingan kali ini, GASTIVIVES akan share tentang Tutorial Blog Rounded Corner | Membuat Sudut Menjadi Tumpul.


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 :



.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; }

.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; }

.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; }


.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. . .
Semoga Berhasil ^_^

Tolong Berikan Komentar sobat di bawah, Karena itu akan sangat membantu dalam memotivasi saya untuk lebih semangat blogging, sob ^_^
________________________________________________________________________________________
Share this article :

3 komentar:

Azizan-xp said...

Hadir lagi sob :)
hehe...
Di tunggu kunjungan baliknya :D

azizan hakim said...

@Azizan-xp Sipp sob :)
Berkunjung kembali ya ^^

Risalahati said...

sayang tidak ada previewnya

Post a Comment

 
© Copyright 2012 AzizanHakimDotCom | Inspired Wordpress Hack | Proudly powered by Blogger - All Rights Reserved.
Template Design by KOD Tutor | Published by KOD Template - FTemplates4U | Modificated by Portal Online.