Cascading Style Sheet
CSS3
Cascading Style Sheet 3 Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouseover, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Sedangkan CSS3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun. CSS 3 memiliki beberapa fitur baru, seperti:
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.
Pada Modul ini kita akan sedikit melakukan Renovasi sederhana pada penampilan web phonebook yang telah dibuat sebelumnya
CSS3 Border
Dengan menggunakan CSS3, anda dapat membuat suatu rounded borders (pembatas dengan ujung bundar), menambahkan bayangan (shadow) pada suatu kotak, dan menggunakan sebuah gambar sebagai suatu border tanpa menggunakan program design, seperti photoshop.
Pada chapter ini anda akan mempelajari beberapa properti border :
- border-radius
- box-shadow
- border-image
Latihan 1
Buka file CSS Phonebook Application, yang terdapat pada folder ../Style, kemudian lakukan perubahan pada rounded box phonebook application tersebut dengan menggunakan properti diatas.
CSS3 Background
CSS3 memiliki beberapa background properti baru, yang mengizinkan kendali lebih atas element background. Berikut beberapa background properti dalam CSS3 :
Latihan 2
Setelah melakukan perubahan pada rounded box Phonebook Application, sekarang lakukan perubahan pada background aplikasi phonebook tersebut dengan menggunakan properti diatas.
Kemudian kita akan membuat background untuk logo header aplikasi phonebook
CSS3 Text Effect
CSS3 Text Effect merupakan fitur baru dari CSS3, ada beberapa properti baru dari Text-Effect CSS3 antara lain :
- text-shadow
Text Shadow
Pada CSS3, properti text-shadow berfungsi untuk membuat text memiliki shadow atau bayangan, dan terdapat beberapa parameter pada properti ini, antara lain ukuran horisontal bayangan, vertikal bayangan, jarak blur dan warna untuk shadow.
Latihan 3
Lakukan modifikasi terhadap Tittle Application yaitu “Phonebook Application” dengan menggunakan properti text-shadow seperti berikut.
CSS3 Font-face Rule
Sebelum CSS3, web designer harus menggunakan fonts yang telah terinstall dalam komputer pengguna, dengan CSS3, web designer dapat menggunakan font apapun yang ia sukai.
Ketika anda telah menemukan atau membeli sebuah font yang anda ingin gunakan, mudahnya memasukan file font dalam sebuah website, dan akan didownload secara otomatis ke pengguna ketika dibutuhkan.
Anda harus mendeskripsikan font yang telah anda pilih dengan menggunakan CSS3 @font-face. Dalam @font-face anda harus mendefinisikan sebuah nama untuk font, dan URL penyimpanan font file.
Latihan 4
Selanjutnya kita akan merubah fonts applikasi dengan menggunakan font-face rule, sehingga developer tidak perlu menginstall font di server, dan font akan tetap terbaca di komputer pengguna, tanpa pengguna harus menginstallnya terlebih dahulu.
CSS3 Transition
Dengan CSS3, kita dapat menambahkan efek pergantian dari satu style ke style lain, tanpa harus menggunakan animasi flash maupun javascript. Seperti beberapa properti sebelumnya pada transition ini menggunakan suatu prefix untuk browser tertentu (misal : -moz- untuk mozilla, -webkit- untuk google chrome, dan -o- untuk opera).
Pada properti transition memiliki beberapa spesifikasi antara lain :
- Spesifikasi CSS property yang akan anda tambahkan efek
- Spesifikasi durasi efek
Latihan 5
Modifikasi kolom jenis kelamin denganmenggunakan properti transition dengan menambahkan code berikut ini pada file index.php, dengan menempatkan posisi kolom jenis kelamin berada pada kolom paling akhir, kemudian tambahkan sedikit pengkondisian untuk membedakan warna antara kontak berjenis kelamin pria dan wanita.
tambahkan kode berikut pada file style.css dengan menggunakan properti transition seperti berikut.
Latihan 6
Setelah itu kita akan melakukan modifikasi pada tabel aplikasi phonebook tersebut agar terlihat lebih menarik dengan menggunakan properti CSS 3.
Tambahkan CSS untuk memperindah tombol “Cari” yang terdapat diatas tabel kontak
Maka hasil akhir nya seperti ini
Sekian terima kasih ,,,
0 komentar:
Posting Komentar