Jumat, 06 Januari 2017

CSS3 part 1 (Color, Gradient, Shadow)

Assalamu'alaikum wr.wb.


A. Pengertian

    CSS3 adalah standar terbaru untuk CSS. CSS 3 dibagi menjadi "modul". Spesifikasi lama telah terpecah menjadi potongan-potongan yang lebih kecil, dan yang baru juga ditambahkan. CSS 3 memiliki beberapa fitur baru, seperti:
  • Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.
  • Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap".
  • Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts".
  • Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.
        CSS3 gradien digunakan menampilkan transisi halus antara dua atau lebih tertentu warna. CSS3 mendefinisikan dua jenis gradien:
  • Linear Gradien (turun / naik / kiri / kanan / diagonal)
  • Gradien radial (didefinisikan oleh pusat mereka)

B. Latar Belakang

    CSS adalah kepanjangan dari Cascading Style Sheet, yang merupakan suatu bahasa yang bekerja sama dengan dokumen HTML untuk mendifinisikan bagaimana cara suatu isi halaman web ditampilkan atau dipresentasikan. Presentasi ini meliputi style atau gaya teks, link, maupun tata letak (layout) halaman.-[Buku Belajar Pemrograman Web, karya Budi Raharjo]-

    CSS dapat mengendalikan ukuran gambar warna bagian pada teks, warna table, ukuran border, warna hyperlink dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk tampilan dokumen. Pada umumnya CSS dipakai untuk menformat tampilan halaman web yang dibuat dengan HTML maupun XHTML.

     CSS 3 adalah CSS itu sendiri, CSS3 tidak beda jauh dari versi sebelumnya, hanya saja CSS 3 memiliki performa style yang jauh lebih baik dan tambahan beberapa fungsi yang menarik.

C. Alat dan Bahan
  • Laptop
  • SublimeText
  • OS Linux Mint
  • Browser
D. Tujuan

 Bertujuan untuk mempelajari dasar-dasar dari CSS3 dan mengimplementasikannya.

E. Tahap Pelaksanaan

    1. Membuat Shadow
  • Buka SublimeText pada menu.
  • Masukkan coding dibawah ini untuk membuat coding shadow.


  • Ket :
  • Shadow yang kita buat pada kesempatan kali ini berupa shadow untuk text -shadow, box-shadow dan cards shadow.
  • Hasil dari pengcodingan diatas seperti dibawah ini.

2. Mengetahui Color yang ada di CSS3
  • Masuk ke menu dan buka sublime text.
  • Masukkan coding seperti dibawah ini.
 
  • Didalam warna yang digunakan dalam css3 terdapat 4 macam yaitu RGBA color, HSL color, HSLA color dan opacity.
  • Hasil dari pengcodingan diatas seperti dibawah.
3. Membuat Gradient
  • Masuk ke menu dan buka SublimeText.
  • Masukkan coding seperti dibawah ini. Coding dibawah ini mencakup gradient linear, diagonal, sudut, dan radial.
Gambar 1. Menunjukkan penulisan css yng berada di bawah head.

Gambar 2. Juga menunjukkan penulisan css.

Gambar 3. Menunjukkan pemanggilan dari css yang dibuat diatasnya
Gambar 3. Menunjukkan pemanggilan dari css yang dibuat diatasnya
  • Hasil dari pengcodingan diatas akan seperti dibawah ini.

F. Kesimpulan

      Dari pemaparan diatas dapat disimpulkan bahwa pengcodingan dari css3 tidak jauh berbeda dengan css sebelumnya. Dan fitur-fitur terbaru css3 ini membuat tampilan dalam web lebih interaktif.

G. Referensi
  • http://www.w3schools.com/css/

Sekian dan Terimakasih..

SMK Bisa!!

Wasalamu'alaikum wr.wb.

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.