Assalamu'alaikum wr.wb.
A. Pengertian
Menurut wikipedia bahasa Indonesia, animasi merupakan hasil dari pengolahan gambar tangan sehingga menjadi gambar yang bergerak.
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
- Text Editor (Mousepad)
- OS XUbuntu 16.04
- W3Schools
D. Tujuan
Bertujuan untuk mengetahui dan memahami penerapan dari sintaks dasar dari image dan animasi ada css.
E. Tahap Pelaksanaan
1. Animasi
Dalam menggunakan animasi css kita harus mengenal terlebih dahulu dengan aturan @keyframes . Didalam aturan ini animasi secara bertahap akan berubah dari gaya saat ini untuk gaya baru pada waktu tertentu.
- Sintaks dasar dari animasi yaitu didalam div. Seperti yang sintaks dibawah ini dan peletakkannya tdi bawah head yang diapit <style></style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
- Dibawah ini akan kita beri contoh penerapan dari sintaks animasi.
- Buka text editor (Mousepad).
- Lalu kita akan membuat animasi sederhana sintaksnya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<style>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
/* Standard syntax */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
</head>
<body>
<p><b>Note:</b> Ini merupakan hasilnya.</p>
<div></div>//merupakan pemanggilan dari css yang kita buat diatas
</body>
</html>
</html>
- Dan hasilnya akan seperti dibawah ini.
2. Image
Didalam penginputan image kita juga harus bermain pada ukuran atau atribut yang digunakan untuk melengkapi image. Kali ini kita akan belajar menggunakan atribut border radius.
- Sintaks dasar dari atribut radius yaitu seperti dibawah ini. Sintaks border-radius ini digunaan untuk membuat sudut menjadi lebih melekung sesuai dengan angka yang kia masukkan berapa pixel. Sintaks dibawah ini diapait oleh <style></style> yang terleak dibawah head.
img {
border-radius: 8px;
}
- Penerapan dari sintaks dasar diatas yaitu kita akan membuat animasi sederhana sintaksnya seperti dibawah ini.
- Buka text editor (Mousepad).
- Lalu kita akan membuat animasi sederhana sintaksnya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<p> Menggunakan border radius</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
- Hasilnya akan seperti dibawah ini.
F. Kesimpulan
Dari pembahasan diatas dapat ditarik kesimpulan bahwa penggunaan animasi dan image dalam halaman web akan lebih menarik. Dan penerapan sintaks lebih mudah.
G. Referensi
- http://www.w3schools.com/
- https://id.wikipedia.org/wiki/Animasi
Sekian dan Terimakasih.
SMK Bisa!!
Wasalamu'alaikum wr.wb.
0 komentar:
Posting Komentar