Membuat Sudut Bundar atau Rounded Corner dengan CSS



Rounded corner dalam border adalah corner yang bentuknya tidak siku-siku seperti border pada umumnya, tetapi bentuknya membulat. Banyak programmer menggunakan gambar untuk membuat round corner. Tetapi seiring berkembangnya teknologi, kini ada cara yang lebih mudah yang bisa kita gunakan untuk membuat rounded corner. Yaitu dengan menggunakan CSS (Cascading Style Sheet). Ada beberapa syntax CSS yang harus kita gunakan untuk membuat round corner. Dimana setiap syntax mempunyai perannya sendiri untuk tiap web browser. Webkit untuk browser Google Chrome, Moz untuk Mozzila. Jika ingin membuat rounded corner, maka gunakanlah kedua syntax tersebut. Agar rounded corner yang kalian buat bisa terlihat dikedua browser.
Secara dasar syntax untuk membuat rounded corner adalah seperti ini:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 Jika kalian menerapkannya, maka semua border akan terlihat lebih membundar.
Jika ingin corner yang lebih spesifik, maka gunakan syntax ini:
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 50px 25px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 50px 25px;
Contoh penggunaanya seperti ini:
#contoh_A
{
 height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-webkit-border-top-right-radius: 50px;
}
 #contoh_B
{
 height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
-webkit-border-top-right-radius: 50px 25px;
}
Jika ingin membuat lingkaran yang sempurna, pertama, kalian harus menyamakan nilai tinggi dan lebar dari div yang ingin kalian gunakan. Setelah itu set border radius menjadi 50%. Contoh: .lingkaran
{
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Semoga berguna buat temen-temen sekalian

Komentar

Posting Komentar

Postingan populer dari blog ini

Interrupt driven I/O

Teknik interrupt – driven I/O memungkinkan proses tidak membuang – buang waktu. Prosesnya adalah CPU mengeluarkan perintah I/O pada modul I/O, bersamaan perintah I/O dijalankan modul I/O maka CPU akan melakukan eksekusi perintah – perintah lainnya. Apabila modul I/O telah selesai menjalankan instruksi yang diberikan padanya akan melakukan interupsi pada CPU bahwa tugasnya telah selesai.  Dalam teknik ini kendali perintah masih menjadi tanggung jawab CPU, baik  pengambilan perintah dari memori maupun pelaksanaan isi perintah tersebut. Terdapat selangkah kemajuan dari teknik sebelumnya, yaitu CPU melakukan multitasking beberapa perintah sekaligus sehingga tidak ada waktu tunggu bagi CPU.  Cara kerja teknik interupsi di sisi modul I/O adalah modul I/O menerima perintah, missal read . Kemudian modul I/O melaksanakan perintah pembacaan dari peripheral dan meletakkan paket data ke register data modul I/O, selanjutnya modul mengeluarkan sinyal interupsi ke CPU melalui salura
Baca selengkapnya

List Linier (Linked list) Dan Variasinya_Struktur Data

Struktur Data List Linear: Struktur data adalah cara menyimpan atau merepresentasikan data didalam komputer agar bisa dipakai secara efisien. Sedangkan data adalah representasi dari fakta dunia nyata. Fakta atau keterangan tentang kenyataan yang disimpan, direkam atau direpresentasikan dalam bentuk tulisan, suara, gambar, sinyal atau simbol. List linier adalah sekumpulan elemen bertipe sama yang mempunyai keturutan tertentu, dan setiap elemen nya terdiri dari dua bagian, yaitu informasi mengenai elemen nya dan informasi mengenai alamat elemen suksesornya. Penggunaan List dalam Kehidupan Sehari - hari Misalnya: • Urutan angka pada keyboard komputer • Urutan lagu pada playlist Mp3 player • Dll Linked List ( LL ) Adalah koleksi data item yang tersusun dalam sebuah barisan  secara linear, dengan penyisipan dan pemindahan dapat dilakukan dalam semua tempat di LL tersebut. Single Linked List Adalah sebuah LL yang menggunakan sebuah variabel pointer saja untuk menyimpan bany
Baca selengkapnya

Menghitung Jarak Jatuh Peluru (C++)

Gambar
Tutorial C++ kali ini adalah menghitung jarak jatuh peluru yang ditembakkan dari suatu lokasi. Mungkin kalian sudah pernah mendengar hal sejenis ini dalam pelajaran Fisika. Peluru yang ditembakkan pada sudut tertentu mempunyai gerak parabola. Jadi kita akan mendapatkan jarak dari titik lempar ke titik jatuh. Jarak inilah yang akan sekarang kita hitung menggunakan bahasa pemrograman C++. Apabila kalian menemukan soal, Carilah jarak jatuh peluru yang ditembakkan pada suatu lokasi dengan sudut penembakan (α) dan kecepatan (Vo). Maka kita mendiskusikannya disini. Untuk mencari jarak, kita membutuhkan beberapa variabel diantaranya: sudut, kecepatan, rad, dan jarak. Selain itu, kita juga membutuhkan PHI dan GRAVITASI. Dengan mempelajari ini, kita juga akan mengetahui fungsi matematika baru, yaitu cos(), sin(), dan pow(). Fungi pow() digunakan untuk mencari nilai XY. Penggunaan fungsi pow() sebagai berikut: pow(sisi, 3) artinya, sisi x sisi x sisi. Sisi adalah variabel, diikuti dengan
Baca selengkapnya