Mungkin sebagian anda yng suka ngeblog sudah hafal dan paham dengan namanya CSS tetapi bagi yng awam masih bingung apa perbedaan CSS dengan CSS3. sebulum membahas itu kita bahas dulu pengertiang tentang CSS

•  Mempersingkat penulisan tag HTML : Anda tidak perlu lagi mendefinisikan setiap tag dengan property dan nilai yang sama.
•  Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan tulisan.
• Mudah dan cepat dalam me-maintenance : dikarenakan file CSS dibuat secar terpisah , maka Anda tidak perlu merombak semua elemen atau property dalam HTML, cukup mengedit file CSS-nya saja.

• border-color
• border-image
• border-radius
• box-shadow

• background-origin dan background-clip
• background-size
• multiple backgrounds

• HSL colors
• HSLA colors
• opacity
• RGBA colors

• text-shadow
• text-overflow
• word-wrap

• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left

• attribute selectors

• overflow-x, overflow-y

• content

• media queries
• multi-column layout
• Web fonts
• speech

• CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek ‘blockquote’ bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.

• CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS.

• Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.

• Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs.
• CSS3 tak berbeda jauh dari tingkat-tingkat sebelumnya, hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa fungsi yang menarik.

Cara Membuat Garis Border Melengkung - Pada artikel sebelumnya, saya sudah menjelaskan tentang cara menambahkan garis border dan macam macam garis border untuk gambar di artikel atau di blog. Pada artikel ini, masih dengan topik yang sama akan dilanjutkan lebih spesifik lagi tentang garis border dengan tampilan yang berbeda dari sebelumnya yaitu membuat garis border melengkung. Maksud dari garis border melengkung ini adalah kita akan membuat garis border yang memiliki sudut melengkung dari setiap pojok yang digunakan dalam menampilkan sebuah bingkai gambar seperti yang terlihat pada tampilan gambar berikut ini


Demo dan Kode


Kode: <div style="-moz-border-radius: 20px 10px 20px 10px; -webkit-border-radius: 20px 10px 20px 10px; background-color: #cccccc; border-radius: 20px; border: 2px solid black; color: black; font-family: Arial; padding: 5px;">Tepi Kiri Kanan Melengkung</div>

Kode: <div style="-moz-border-radius: 1em 0em 0em 0em; background-color: orange; border-radius: 1em 0em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Atas Melengkung</div>

Kode: <div style="-moz-border-radius: 0em 0em 0em 1em; background-color: green; border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Bawah Melengkung</div>

Kode: <div style="-moz-border-radius: 0em 1em 0em 0em; background-color: red; border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Atas Melengkung</div>

Kode: <div style="-moz-border-radius: 0em 0em 1em 0em; background-color: blue; border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Bawah Melengkung</div>

Kode: <div style="-moz-border-radius: 1em 0em 0em 1em; background-color: gold; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Tepi Kiri Melengkung</div>

Kode: <div style="-moz-border-radius: 1em 0em 0em 1em; background-color: royalblue; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Tepi Kanan Melengkung</div>

Untuk membuat tampilan seperti diatas. Anda cukup menambahkan kode-kode yang ada diatas untuk setiap jenis garis border melengkung kedalam artikel gambar di area postingan

Itulah cara membuat garis border melengkung. Untuk tampilan yang lebih dan memiliki keunikan tersendiri, silahkan atur kode-kode berikut yang ada didalam kode diatas

-moz-border-radius: 0em 0em 0em 1em;
border-radius: 0em 0em 0em 1em;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 20px;
background-color: #ccc;
border: 2px solid black;
color: #000;
padding: 5px;

Silahkan ganti dan atur setiap skala (nomer ukuran) yang ada diatas dan lihat hasilnya dengan perubahan yang anda lakukan. Maaf saya tidak bisa menjelaskan lebih lanjut untuk mengatur skala ini karena hal ini semata-mata untuk mendorong anda agar lebih kreatif dan imajinatif dalam mengaplikasikan sebuah panduan.

Mungkin sudah banyak yang bisa menebak caranya membuat div rata tengah, yaitu dengan ‘margin: 0 auto’. Namun ternyata itu hanya berhasil untuk rata tengah horizontal, bagaimana dengan rata tengah secara vertical?
Lalu bagaimana agar div rata tengah baik vertical dan horizontal? Ternyata dapat dilakukan dengan hanya menambahkan element : height kedalam CSS.
misalnya CSS awal adalah:
Cukup tambahkan:
Elemen div apakah sudah rata tengah horizontal dan vertical sekarang? yep, dan ini sudah saya tes pada beberapa browser umum seperti chrome, mozilla, safari dan opera. bekerja dengan baik
Sedikit penjelasan yang mungkin menjawab pertanyaan, mengapa bisa rata tengah secara vertical dan horizontal:
1. jika nilai margin-top dan margin-bottom adalah auto, nilai yang pakai adalah ’0′
2. position: absolute; posisi div menjadi tetap, baik jika digunakan bersamaan dengan top, bottom, left, right.
3. top, bottom, left dan right : 0, memerintahkan browser untuk memberikan bounding box / batasan baru setelah di absolute-kan
4. width dan height, browser memberi nilai default 100% jika tidak ada nilai awalnya.
Semoga dapat memberikan pencerahan. Jika ada yang mau menambahkan metode diatas silahkan memberikan masukannya di kolom komentar dibawah ini