CSS3 tentang Rounder Cornered

Assalamu'alaikum wr.wb.

A. Pengertian

 

   CSS3 adalah standar terbaru untuk CSS. CSS3 telah dibagi menjadi "modul". Ini berisi "spesifikasi CSS tua" (yang telah terpecah menjadi potongan-potongan yang lebih kecil). Selain itu, modul baru ditambahkan. Beberapa modul CSS3 yang paling penting adalah:

• Penyeleksi (Selector)
• Box Model
• Latar belakang dan Borders (Background and border)
• Nilai gambar dan Konten Diganti ( image values and replace content)
• Efek teks
• 2D / 3D Transformasi
• animasi (animation)
• Beberapa Tata Letak Kolom ( multi columns layout)
• Antarmuka pengguna (user interface)

Sebagian besar properti CSS3 baru diimplementasikan dalam browser modern.

B. Latar Belakang

     Pembuatan dan penerapan dari css3 disini berlatar belakang dari tampilan awal dari coding html yang sederhana agar menjadi lebih menarik dengan salah satunya menambahkan komponen round cornered di dalam pembangunan suatu web.

C. Alat dan Bahan

•  W3Schools Online/Offline
•  Laptop
• Sublime text (text Editor)

D. Tujuan

     Bertujuan untuk mengetahui dan memahami apa saja komponen-komponen yang ada di CSS3.

E. Tahap Pelaksanaan 

 1. CSS3 border-rounded digunakan untuk memberikan setiap elemen "sudut membulat" :

- Penerapan sintaks dari border-rounded yaitu :

• Gambar dibawah ini merupakan sintaks penerapan border-radius :

Keterangan :

- Sintaks tersebut di apit oleh sintaks <styles></styles>. 

- Border-radius merupakan penerapan dari salah satu jenis dari border-rounded yaitu border-radius yang akan menghasilkan element sudut membulat .

• Hasil dari penerapan sintaks tersebut yaitu seperti dibawah ini.

Keterangan :

- Gambar atas : merupakan penerapan dari sintak border-radius yang menggunakan warna background.

- Gambar kedua : merupakan penerapan dari sintaks border-radius yang menghasilkan unsur perbatasan. Sintaks dibawah ini yang menghasilkan batas itu adalah penambahan sintaks solid warna.

- Gambar ketiga : merupakan penerapan dari sintaks dari border-radius yang menghasilkan sudut bulat yang memiliki latar belakangnya berupa gambar. Sintaks dibawah ini digunakan untuk pemanggilan gambar dari url. Jadi yang awalnya color bisa digantika dengan gambar. Dan gambar yang dipanggil bisa di download terlebih dahulu dan tempatnya harus 1 directory dengan penyimpanan sintaks.

- Dibawah ini merupakan sintaks cara pemanggilan dari sintaks-sintaks tersebut yaitu di tulis di dalam body. Perhatikan dibawah ini. Didalam pemanggilan sintaks css tersebut menggunakan "ID" karena kita didalam penulisan css diatas menggunakan #. Tanda # merupakan ID yang hanya bisa dipanggil hanya satu kali sedangkan tanda "." merupakan class yang bisa dipanggil sampai beberapa kali.

- Dibawah ini merupakan sintaks penuh dari hasil diatas.

• Gambar dibawah ini merupakan penerapan dari sintaks Border-rounder ellipse. 

Keterangan :

- # rconnersatu : merupakan nama id dari css.

- border-radius merupakan properti yang digunakan untuk membuat ellipse.
- padding : jarak yang ada di dalam suatu objek.
- width : lebar dari suatu objek.
- height : panjang dari suatu objek.

• Hasil dari penerapan sintaks diatas seperti dibawah ini.

- Gambar atas : merupakan penerapan sintaks border-radius yang menggunakan  ukuran 50px/15px.

- Gambar kedua : merupakan penerapan sintkas border-radius yang menggunakan ukuran 15px/50px.

- Gambar ketiga : merupakan penerapan sintaks border-radius yang menggunakan ukuran  50%. Jadi penggunaan ukuran itu aka menghasilkan hasil yang berbeda pula.

- Dibawah ini merupakan cara pemanggilan dari penulisan sintaks css yang diapit di <styles></styles>. Dan pemanggilan hanya bisa dilakukan di body. Pemanggilan dari sintaks css diatas menggunakan ID yang hanya bisa dilakukan satu kali.

- Dibawah ini merupakan sintaks penuh dari hasil yang sudah dipaparan diatas.

• Gambar dibawah ini yang merupakan coding penerapan dari sintaks border-radius dengan ukuran yang berbeda-beda.

Keterangan :

- border-radius : properti yang digunakan untuk membuat sudut menjadi lebih melengkung.

- # : digunakan untuk membuat id di dalam css. 

- padding : jarak yang ada di dalam suatu objek.

- background : untuk memberikan llatar belakang berupa warna atau gambar.
- width : lebar dari suatu objek.
- height : panjang dari suatu objek.

• Hasil dari penerapan border diatas yaitu :

- Gambar paling atas : merupakan bentuk yang menggunakan penerapan sintaks border-radius yang menggunakan ukuran 15px 50px 30px 5px. Jadi setiap sudut memiliki ukuran yang berbeda-beda. Jika kita ingin mengubah ukuran bisa sesuai kemauan dan kebutuhan kita.

- Gambar tengah : merupakan bentuk yang menggunakan penerapan sintaks border-radius yang menggunakan ukuran 15px 50px 30px .  

- Gambar bawah : merupakan bentuk yang menggunakan penerapan sintaks border-radius yang menggunakan ukuran 15px 50px. 

- Dibawah ini cara pemanggilan dari sintaks css diatas. Terletak di body dan pemanggilannya menggunakan "ID" karena yang kita masukkan diatas menggunakan #. Jika kita diawal menggunakan "." pemanggilannya menggunakan "class".

- Dibawah ini merupakan sintaks penuh dari hasil yang sudah dipaparan diatas.

F. Kesimpulan

   Dari pemaparan diatas dapat disimpulkan bahwa penerapan rounder cornered dalam css dapat disesuaikan dengan keinginan dan kebutuhan kita.  Penggunaannya bisa dijadikan menjadi sebuah bingkai tergantung pengaturan yang kita atur.

G. Referensi 

• http://www.w3schools.com/css

Sekian dan Terimakasih.

SMK Bisa!!

Wasalamu'alaikum wr.wb