Senin, 29 Mei 2017

Mengenal dan Belajar CSS3

     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 Desain undur diri, sampai berjumpa dipembahasan yang selanjutnya. Terimakasih
Admin – Lupa Code

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon