Perkenalan :
Sekarang kamu sedang masuk ke jenjang yang lebih tinggi lagi karena materi ini sudah termasuk CSS3, apa yang baru dar CSS3 sebelumnya ? Itu pasti yang akan kalian pikirkan, sebelum memulainya saya akan menjelaskan sedikit ,engenai CSS3. CSS3 sebetulnya tidak jauh berbeda dengan CSS2, semacam upgrade saja. Intinya adalah CSS3 ini bisa di gabungkan dengan CSS2 sebelumnya, jadi jangan khawatir kekadaluwarsaan ilmu CSS2 karena sebetulnya CSS2 dan CSS3 saling berhubungan satu sama lain, adapun beberapa materi yang akan kamu pelajari yaitu :
Materi CSS3 diantaranya :
- Box model
- Background
- Efek Tulisan ( Text Effect )
- Transformasi 2D / 3D
- Animasi ( Animations )
- Transisi ( Transitions )
Sekarang kamu akan mempelajari Box Mode dan Box Shadow :
1. Membua ujung objek yang dibulatkan dengan CSS3
2. Membuat efek bayangan box dengan CSS3
Tahap Sebelumnya | Bab VI : Belajar CSS bagian 5 ( List | Tabel ) |
CSS3 memang menakjubkan membuat semua hal menjadi lebih indah dengan cara yang lebih mudah, sekarang saya akan menyampaikan materinya. Mari kita simak bersama-sama :
1. Ujung yang dibulatkan ( Rounded corners )
Rounded Rorners adalah cara membulatkan ujung-ujung dari suatu objek yang sebelumnya persegi. Rumusnya yaitu :
div
{border:nilai;border-radius:nilai;-moz-border-radius:nilai;}
Contoh diatas silahkan kamu ubah sesuai keinginan
# Keterangan :
border:nilai untuk mendesain bordernya
border-radius:nilai besar radius yang akan terbentuk
Contohnya seperti ini :
Contoh diatas silahkan kamu ubah sesuai keinginan
# Keterangan :
border:nilai untuk mendesain bordernya
border-radius:nilai besar radius yang akan terbentuk
Note : -moz-border-radius:nilai kamu tambahkan agar firefox 3.6 kebawah kompatibel dengan desain ini.
Contohnya seperti ini :
border:2px solid black;border-radius:25px;-moz-border-radius:25px;
2. Efek Bayangan Box (Box-Shadow)
Efek CSS3 lainnya yaitu bayangan box, ini dapat kamu terapkan pada box, background, border dan sebagainya. Rumusnya yaitu :
div
{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;-moz-box-shadow: 10px 10px 5px #888888;-webkit-box-shadow: 10px 10px 5px #888888;}
Contoh diatas silahkan kamu ubah sesuai keinginan
# Keterangan
width:300px;height:100px;background-color:yellow Ini adalah property & value objek yang akan di buat bayangan (shadow)
box-shadow: 10px 10px 5px #888888 silahkan sesaikan dengan keinginanmu
Contohnya seperti ini :
Contoh diatas silahkan kamu ubah sesuai keinginan
# Keterangan
width:300px;height:100px;background-color:yellow Ini adalah property & value objek yang akan di buat bayangan (shadow)
box-shadow: 10px 10px 5px #888888 silahkan sesaikan dengan keinginanmu
Note : -moz-box-shadow: 10px 10px 5px #888888 kamu tambahkan agar safari kompatibel dengan efek ini, -webkit-box-shadow: 10px 10px 5px #888888 kamu tambahkan agar firefox 3.6 kebawah kompatibel dengan efek ini
Contohnya seperti ini :
background-color: black; border-radius: 10px; border: 2px solid white; box-shadow: 0 0 10px cyan;-moz-box-shadow: 0px 0px 10px cyan;-webkit-box-shadow: 0px 0px 10px cyan;
Note: Efek ini tidak akan berhasil pada browser Internet Explorer
| Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan ) | Tahap Berikutnya
Banyak Banget Bab DI blog ini y Jadi seperti buku
BalasHapus@Adhi: iya nih sob masih 4-5 bab lagi ini juga tentang CSS3
BalasHapusw pengen tanya css3 itu bahasa pemograman untuk web juga yah seperti html?
BalasHapussorry w gak tau
@Fardhan: ibaratnya CSS3 firefox 6 sedangkan CCS sebelumnya Firefox 5, CSS3 perkembangan dari CSS sebelumnya (CSS2), ya untuk web kalo urutannya sih kurang lebih seperti ini html > css > javascript > php > ... (urutan pembelajaran)
BalasHapusNumpank promosi Syams7sys-g2.BLOGSPOT.COM
BalasHapuspengen cobain ah,...
BalasHapusthanks gan....artikelnya....