Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

CSS3 Rounded Corners: Cara Membuat dan Menuliskan Kode CSS3 Border Radius

Meskipun penulisan kode css rounded corners sudah teramat sering kita lihat dalam berbagai bentuk posting, namun kiranya tak ada salahnya jika kita mencoba untuk kembali mencoba mengupas bentuk dasar penulisan kodenya yang menggunakan CSS3. Disamping manusia jaman sekarang teramat pelupa, mungkin melalui posting ini beberapa manfaat bisa dipetik oleh para sobat blogger yang masih dalam tahap awal ngeblog ataupun yang mulai mencoba untuk mengenal lebih dalam tentang desain web/blog dan kode HTML.

Rounded corners sebenarnya adalah nama yang diberikan untuk box dengan sisi-sisi yang berbentuk lengkung. Jika sebelum CSS3 bentuk box lebih banyak hanya berupa kotak-kotak dengan sisi-sisi tanpa lengkungan, (atau lengkung dengan background gambar), berkat CSS3 maka sebuah box dengan sisi lengkung menjadi teramat mudah untuk membuatnya. Hingga saat ini hampir seluruh browser besar sudah mengaplikasikan CSS3 rounded corner terkecuali Internet Explorer (IE). Kode yang digunakanpun tidaklah terlalu jauh berbeda antara browser satu dengan yang lain. Perbedaan yang tidak terlalu mencolok ini membuat kita dengan mudah mengingat setiap kode di setiap browser. Kode dasar/standart untuk penulisan CSS3 rounded corners adalah border-radius: ..px; atau dalam satuan lain bisa dituliskan border-radius: ..em;. Satuan standar yang paling sering digunakan dalam penulisan kode HTML. Bila di antara sampeyan ada yang ingin mengetahui lebih dalam tentang perbedaan ke dua satuan ukuran ini, silahkan sampeyan bisa KLIK link di bawah ini (1em berkisar 18px).


Penulisan kode CSS Rounded Corners di beberapa browser mempunyai ciri tersendiri yang membedakan satu browser dengan browser yang lain.
  1. Opera Kode yang digunakan adalah:
    border-radius: ..px;
  2. Mozilla Firefox Kode yang digunakan adalah:
    -moz-border-radius: ..px;
  3. Safari - Google Chrome Kode yang digunakan adalah:
    -webkit-border-radius: ..px;
Apabila penulisan kode dilakukan pada sisi-sisi yang berbeda pada ke-4 sisi sebuah box, maka penulisan di setiap browser akan ada sedikit perbedaan.
  1. Opera Kode yang digunakan adalah:
    border-top-right-radius: ..px; right-top radius (kanan-atas),
    border-top-left-radius: ..px; left-top radius (kiri-atas),
    border-bottom-right-radius: ..px; right-bottom radius (kanan-atas), dan
    border-bottom-left-radius: ..px; left-bottom radius (kiri-bawah).
  2. Mozilla Firefox Kode yang digunakan adalah:
    -moz-border-radius-topright: ..px; right-top radius (kanan-atas),
    -moz-border-radius-topleft: ..px; left-top radius (kiri-atas),
    -moz-border-radius-bottomright: ..px; right-bottom radius (kanan-atas), dan
    -moz-border-radius-bottomleft: ..px; left-bottom radius (kiri-bawah).
  3. Safari - Google Chrome Kode yang digunakan adalah:
    -webkit-border-top-right-radius: ..px; right-top radius (kanan-atas),
    -webkit-border-top-left-radius: ..px; left-top radius (kiri-atas),
    -webkit-border-bottom-right-radius: ..px; right-bottom radius (kanan-atas), dan
    -webkit-border-bottom-left-radius: ..px; left-bottom radius (kiri-bawah).
Kode seperti tersebut di atas adalah bentuk kode dasar CSS3 rounded corners. Beberapa pengembangan dari kode dasar tersebut dapat dilakukan untuk membentuk sebuah lengkungan yang berbeda diantara setiap sisi. Di bawah ini adalah beberapa contoh bentuk rounded corners dan kode yang digunakan :
box-1
radius=1em

box-2
radius=25px
<style type="text/css">
.boks-1 {
border:4px solid #990066;
background:#66CCFF;
width:200px;
height:100px;
float:left;
margin:15px 10px;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
.boks-2
border:4px solid #990066;
background:#66CCFF;
width:200px;
height:100px;
float:left;
margin:15px 10px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
</style>

<div class="boks-1">boks-1 : radius=1em</div>
<div class="boks-2">boks-2 : radius=25px</div>

box-3
radius-top-right=10px

boks-4
radius-top-left=40px
radius-bottom-left=15px
<style type="text/css">
.boks-3 {
border:4px double #990066;
background:#66CCFF;
width:190px;
height:100px;
margin:15px 10px;
border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
.boks-4
border:4px inset #990066;
background:#66CCFF;
width:190px;
height:100px;
float:right;
margin:15px 10px;
border-top-left-radius: 40px;
border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 15px;
}
</style>

<div class="boks-1">boks-3 : radius-top-right=10px</div>
<div class="boks-2">boks-4 : radius-top-left=40px, radius-bottom-left=15px</div>

box-6
radius=10px 25px

box-5
radius=2em 0.5em

<style type="text/css">
.boks-5 {
border:4px ridge #990066;
background:#66CCFF;
width:190px;
height:100px;
margin:15px 10px;
border-radius: 10px 25px;
-moz-border-radius: 10px 25px;
-webkit-border-radius: 10px 25px;
}
.boks-6
border:4px outset #990066;
background:#66CCFF;
width:190px;
height:100px;
float:right;
margin:15px 10px;
border-radius: 2em 0.5em;
-moz-border-radius: 2em 0.5em;
-webkit-border-radius: 2em 0.5em;
}
</style>

<div class="boks-1">boks-5 : radius=10px 25px</div>
<div class="boks-2">boks-6 : radius= 2em 0.5em</div>

box-7
radius=100px
width=180px, height=180px
border=10px

<style type="text/css">
.boks-7 {
border:10px ridge #990066;
background:#66CCFF;
width:180px;
height:180px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
</style>

<div class="boks-1">boks-7 : radius=100px</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

1 komentar:

  1. keren gan blognya,,
    gan Q mau tanya ni,,buat animasi link bila kursor diarahkan akan muncul bok dan begitu di lepas berjalan keatas giman,,,,
    ilmukomputerbsb.blogspot.com

    BalasHapus

 
GR | Edited by | gubhug reyot