Style Pada Multimedia
1. CSS pada Tampilan Gambar
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut :
<img src="nama-file-gambar" width="lebar" height="tinggi" alt="text" title="text" border="1" />
Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px sehingga antar gambar terlihat ada jarak.
2. CSS Gambar untuk Background
Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.
div { background: url( “latar.png”); background-image: url(“latar.png”);}
Namun, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar. Untuk dapat melihat bagaimana berikut :
Adakalanya perulangan tampilan gambar otomatis ini tidak diinginkan. Untuk itu dapat menggunakan properti background-repeat untuk mengatur bagaimana perulangan kode ingin dilakukan. Terdapat empat nilai yang dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti contoh di bawah ini :
<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGFGgPZzpuVAjRuNfhoRQoNmDzhNMISS3jbE_Mz5j87rtYnZ4p74BWyHpMjsCvmBTE26-0GF0YjMGw0xBqUtX_oXaiszLHK5P7eILWV599nuDsalhLoyvP4Gbvb2U2jthmj8K9VDS3K6n/s1600/back.jpg'); background-repeat: repeat;">
<div style="color: white; text-align: center;">
<b>BAGIMU NEGERI</b>
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
</div>
</div>
Maka hasilnya adalah sebagai berikut :
Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan perulangan hanya pada sumbu y (vertikal). Listing Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga kiwi,jpg hanya akan ditampilkan satu kali :
3. CSS untuk Menyisipkan Gambar
Adakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi CSS. Seperti contoh di bawah ini.
BAGIMU NEGERI
Padamu negeri kami berjanji
Padamu negeri kami berbakti
Padamu negeri kami mengabdi
Bagimu negeri jiwa raga kami
4. CSS pada Tampilan Video
Untuk penerapan Cascading style sheet pada elemen video dapat dituliskan secara inline seperti contoh berikut ini :
<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin: 0 auto; width:400px ; heigth:400;" >
<source src="http://googledrive.com/host/0B7q1GyuInSWkLUdUQTNhU0hkYWs/" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
Bila program diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px seperti pada tampilan berikut ini :
5. CSS Video Embed dari Youtube
Penyajian video juga bisa memanfaatkan elemen iframe yang dilinkkan ke alamat video tertentu , misalnya www.youtube.com. Berikut adalah penerapan CSS secara embed untuk menampilan video dari youtube. Seperti di bawah ini.
<html>
<head>
<title>Test</title>
<style>
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;
height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="videoWrapper">
<iframe width="560" height="349" src="url_video" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Menyajikan cacading style sheet untuk memformat tampilan multimedia dapat menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
Sumber : https://www.mikirbae.com/2016/09/css-untuk-memformat-tampilan-multimedia.html
Tidak ada komentar:
Posting Komentar