| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

Bab VII : Belajar CSS3 Bagian 1 ( Perkenalan | Box model | Box Shadow )



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 )
Di Bab VII : Belajar CSS3 Bagian 1 ( Perkenalan | Box model | Box Shadow ) kamu akan mempelajari tentang :
Box Model
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
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
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

6 komentar:

  1. Banyak Banget Bab DI blog ini y Jadi seperti buku

    BalasHapus
  2. @Adhi: iya nih sob masih 4-5 bab lagi ini juga tentang CSS3

    BalasHapus
  3. w pengen tanya css3 itu bahasa pemograman untuk web juga yah seperti html?

    sorry w gak tau

    BalasHapus
  4. @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)

    BalasHapus
  5. Numpank promosi Syams7sys-g2.BLOGSPOT.COM

    BalasHapus
  6. pengen cobain ah,...
    thanks gan....artikelnya....

    BalasHapus

Share entri ini :