Belajar CSS3 dan Perkenalan CSS3

Posted on
     Hallo selamat datang di blog Lupacode yang akan membahas seputar
tutorial pemrograman khususnya pada web desain. Saya selaku admin dari blog Lupacode yang akan memberikan tutorial seputar pemrograman kepada teman – teman
semua, dan saya ingin belajar bersama – sama disini. Saya juga masih belajar
tapi saya ingin berbagi apa yang sudah saya pelajari sebelumnya agar saya tidak
lupa dan saya ingin memberikan pemahaman kepada temen – temen semua terutama bagi
temen – temen pemula yang sedang belajar menjadi seorang web developer.
Ini merupakan artikel pertama saya didalam kategori css3 dan saya ingin semoga materi – materi yang akan saya
sampaikan nantinya dapat dimengerti oleh temn – temen semua yang sedang belajar.
Kemudian saya akan mencoba memberi pemahaman yang sederhana agar bagi sahabat
yang baru atau pemula dapat mengerti pembahasan dan makasud dari pembahasan
yang akan saya berikan nantinya
Belajar serta pengenalan css3 blog lupa code lupacode
 

Pengenalan dan Belajar CSS3

   Pada pembahasan seri pertama ini saya
ingin membahas mengenai CSS3 dan sebelum saya lanjutkan sebaiknya kita harus
tau dulu apa itu css3. Kalau dilihat dari penjelasan nya css3 itu ialah “Generasi
ke-3 dari spesifikasi CSS yang direkomendasikan oleh W3C”
   
Karna kita tau bahwa W3C itu adalah
sebuah Organisasi yang membuat aturan – aturan yang terkait dengan teknologi
web dan internet. Lalu apa bedanya CSS3 dengan generasi – generasi sebelumnya ?
Pengenalan serta pemahaman pada css3
      Jika kita lihat pada diagram
diatas, ada lingkaran – lingkaran yang mengelompokan mengenai beberapa materi
pada css. Yang lingkran paling kecil diatas merupakan css1 versi pertama,
kemudian lingkaran ke-dua yang biru merupakan versi ke dua dan lingkaran yang
terakhir merupakan versi ke tiga.
    Jika kita lihat dari versi css
pertama isinya adalah syntax dari css dasar, jadi kalau kita menggunakan
property font, background dan yang lainnya itu sudah ada sejak css versi
pertama walaupun sampai sekarang masih bisa kita gunakan jadi css yang lam pun
itu masih tetap bisa gunakan. Seiring dengan perkembangan waktu, property –
property yang ada di css1 itu berkembang dengan menambahkan beberapa property
yang lain atau yang baru, lalu berkembang menjadi css versi 2 dimana kita bisa
menggunakan box model, table, dan kita bisa menggunakan selectors, kalau dulu
waktu css1 kita belum bisa menggunakan itu.
   Begitu pula dengan css3 fitur –
fitur yang ada pada css versi sebelumnya itu ditambahkan. Ada yang tetep sama
dan ada yang diperbaiki dan ada juga yang bahkan dihilangkan, ya jadi itu fitur
– fitur yang ada di css3 atau css versi terbaru. Nah fitur – fitur yang
nantinya akan kita gunakan pada css3 itu kita sebut dengan Modul.
“css3 dibagi menjadi beberapa
modul, dan tiap-tiap modulnya menambahkan kemampuan / fitur yang ada di css3”
  Kemudian untuk modul – modul nya
bisa kita lihat seperti ini
Mengenal dan belajar css3 - Modules css3
     Jadi ada beberapa modul diatas,
jadi kita tidak bicara langsung property nya apa saja, misalkan ada modul Color
nah natinya css3 itu akan memperkaya penggunaan kita terhadap warna, jadi ada
banyak sebetulnya modul – modul yang ada di css3.
Kenapa harus menggunakan css3 ?
Ada beberapa alasan untuk
menggunakan css3 ini,
  • * Membuat website kita menjadi
    lebih fleksibel dan interaktif
  • * Membuat mock-up dengan cepat
    tanpa bantuan bahasa scripting
  • * Mengurangi penggunaan gambar =
    Kecepatan loading halaman
  • * Penggunaan selector untuk
    menghindari penggunaan markup yang boros
   Ya jadi itulah beberapa hal mengapa
kita menggunakan css3. Supaya nanti kalian lebih jelas mengenai manfaat css3
ini akan saya kasih contoh bagaiamana kita membuat sebuah elemen teretentu
waktu belum ada css3 seperti ini
    Jika saya ingin membuat sebuah
kotak yang ujung nya tumpul didalam html dengan menggunakan css tentu itu
membutuhkan langkah-langkah yang panjang untuk membuatnya untuk 1 sudut saja
kita membutuhkan gambar serta span nah bagaimana kalau untuk 4 sudut tentu
langk – langkah membuat itu sangatlah panjang waktu kita menggunakan css versi
yang ke 2.
    Tetapi didalam css versi yang kita
untuk membuat sebuah gambar menjadi tumpul sudut nya kita hanya perlu memberi
yang namanya Border radius: misalkan saya ingin membuat kotak tersebut
tumpul sebesar kira-kira 20 pixel, maka kita hanya perlu menuliskan Border
radius: 20px;
maka ke empat sudut kotak itu akan menjadi lancip hanya
dengan cukup 1 perintah saja
Mulai Belajar dan mengenal css3 di blog lupacode     Karena css3 ini sifatnya masih
experimental property nya, jadi ada beberapa property yang belum jalan
diseluruh browser. Jadi masih ada browser yang belum support untuk beberapa
property css3 ini dan ada beberapa property yang hanya jalan di browser
tertentu.
Mengenal dan belajar css3 - Browser yang support pada css3
    Kita bisa lihat pada gambar diatas
property mana saja yang disupport oleh browser, nah ini bisa jadi kendala,
karna kita inginnya jalan disemua browser. Untuk dapat jalan disemua browser
nanti kita akan coba mengatasi nya dengan belajar yang namanya “ Vendor Prefixes “ jadi kita belajar
gimana ngakalin minimal di browser – browser populer itu jalan normal.
Vendor Prefixes
mengenal vendor prefixes dan belajar css3
   Kenapa kita harus repot – repot
menambahkan vendor prefixes itu ?
Karakter Browser PAda css3 - blog lupacode
      Kita ingin semua user mau buka pake
browser apapun hasilnya tetap sama. Karena kita ga bisa tau user itu pakai
browser apa, dan kita ga bisa maksa user untuk memakai browser tertentu.
            Baik mungkin itu saja dulu sebagai perkenalan kita atau sebagai pembuka pada materi pertama ini,masih banyak hal – hal menarik lainnya mengenai css3 yang akan kita pelajari pada pembahasan
selanjutnya, jadi silahkan bagi kalian yang ingin belajar css3 kita bersama –
sama belajar dari dasar bersama saya admin dari blog Web Desain.
 Saya admin dari blog Web lupacode undur diri, sampai berjumpa dipembahasan yang selanjutnya. Terimakasih

One thought on “Belajar CSS3 dan Perkenalan CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *