Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Saturday, August 14, 2010

Mempercantik Blog Dengan Code HTML CSS 3

Hi all.. ketemu lg sama gw yg bersosok tak jelas ini.Post kali ini kita akan membahas tentang CSS 3.Gx mw berbelat-belit lg..,mari kita ke KTP,eh TKP maksudnya.

Hari ini gw baru aja ngetes skill terbatas yg gw miliki seputar Code HTML CSS 3.Ternyata setelah kemarin gw pelajari,penggunaan code CSS 3 gx jauh beda dengan versi sebelumnya lho.. Hanya ditambahkan beberapa fitur code HTML baru yg bisa membuat versi” tampilan lain dari sebuah website/situs atau blog.

Sebuah contoh yg langsung gw coba praktekkan adalah membuat navbar menu horizontal seperti navbar menu blog ini.Setelah mengheningkan cipta,akhirnya gw pun memulai proses pengkodean HTML CSS 3 untuk membuatnya.

Ada sebuah code baru di CSS 3 yg bisa membuat efek Gradient pada background warna.. juga ada code untuk efek bayangan text.Nah untuk permulaan,yuk kita coba bikin sebuah navbar menu simple tapi keren dengan hanya proses pengkodean HTML aja (Tanpa image/gambar). Kenapa gw ingin membuatnya tanpa image?

1. Gw gx harus cape” bikin gambarnya dulu.
2. Gw gx perlu cape” upload gambar nya dulu ke hosting.
3. Halaman blog jadi tetep “ringan” alias gx berat loading pagenya.

Berikut perbandingan antara Navbar yg gw buat dengan CODE HTML CSS 2 dan CODE HMTL CSS 3

CSS 2 (Gbr.1)

Navbar CSS 2
CSS 3 (Gbr.2)
Navbar CSS 3NB: untuk melihat preview menu navbar di atas, cukup klik saja pada gambarnya.

Udah bisa ngeliat sendiri kan perbedaan nya?,dua”nya tetep di bikin hanya dengan CODE HTML tanpa ada pemakaian gambar/image luar.Nah,hebatnya CSS 3 ini yaitu bisa membuat efek yg bagus dan menyerupai gradient asli dari suatu warna.

Coba liat Gbr.1 , itu dibikin dengan code CSS 2.. Warna nya tidak terlihat 3D.Sedangkan Gbr.2 terlihat nyata karna telah diselipkan code” HTML CSS 3.

Apa saja sih code” yg diselipkan di Gbr.2 ..?

-moz-linear-gradient ( Membuat efek gradiasi pada warna )
-moz-box-shadow ( Memberi efek bayangan pada box atau kolom )
text-shadow ( Memberi efek bayangan pada text / tulisan )

Sebenernya masih banyak code” CSS 3 yg muanteepppp efeknya. Ada efek polaroid buat foto,efek 3D kotak,ada efek gambar bergerak (Seperti Flash) dsb.. cuma harap maklum ya..,gw jg baru kemarin pelajarin-nya hehe.. nanti sedikit” gw akan coba bikin tutorialnya deh satu per satu.

Untuk mengetahui bagaimana caranya membuat Navbar Menu CSS 3 seperti gambar di atas,baca post selanjutnya aja yah.. soalnya post yg ini gw rasa udah kepanjangan hehe..

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

0 comments:

Ads

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra