Assalamu'alaikum wr.wb.
A. Latar Belakang
Menurut wikipedia bahasa Indonesia, animasi merupakan hasil dari pengolahan gambar tangan sehingga menjadi gambar yang bergerak.
B. Pengertian
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. Tujuan
Bertujuan untuk mengetahui dan memahami penerapan dari sintaks dasar dari image dan animasi ada css.
Tahap Pelaksanaan
a. 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;
}
* 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>
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>
<p><b>Note:</b> Ini merupakan hasilnya.</p>
<div></div>//merupakan pemanggilan dari css yang kita buat diatas
</body>
</html>
- Dan hasilnya akan seperti dibawah ini.
b. 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>
D. Kesimpulan
Dari pembahasan diatas dapat ditarik kesimpulan bahwa penggunaan
animasi dan image dalam halaman web akan lebih menarik. Dan penerapan
sintaks lebih mudah.
E. Referensi
- http://www.w3schools.com/
- https://id.wikipedia.org/wiki/Animasi
