Materi Tentang CSS Part 6
Styling Image
Styling Image berfungsi untuk mengatur gambar misalnya : memberikan bingkai pada gambar, menentukan ukuran, dan lain - lain. Sebelumnya kita sudah belajar bagaimana cara menempatkan gambar di materi html part 4 dan untuk menampilkan gambar pada website kalian harus membuat folder khusus. Langsung saja kita ke materinya.
Rounded images
yaitu untuk menempatkan border radius dan berfungsi untuk mengatur ketajaman pada sudut sebuah gambar.
Contoh :
<html>
<head>
<style>
img { border-radius: 15px;}
</style>
</head>
<body>
<img src="Gambar.jpg" width="200px" height="200px">
</body>
</html>
Hasil :
Border Image
Untuk memberikan bingkai pada gambar.
Contoh :
<html>
<head>
<style>
img { border-radius: 15px; border: 7px solid red;}
</style>
</head>
<body>
<img src="Gambar.jpg" width="200px" height="200px">
</body>
</html>
Hasil :
Responsive Images
Untuk mengatur ukuran pada gambar.
Contoh:
<html>
<head>
<style>
img { border-radius: 15px; border: 7px solid red; max-width: 75%; height: auto;}
</style>
</head>
<body>
<img src="Gambar.jpg">
</body>
</html>
Hasil :
Transparent Images
Untuk membuat gambar menjadi transparant.
Contoh :
<html>
<head>
<style>
img { border-radius: 15px; max-width: 75%; height: auto;
opacity: 0.5; filter: alpha(opacity=50);}
</style>
</head>
<body>
<img src="Gambar.jpg">
</body>
</html>
Hasil :
Ok jadi itulah cara mengatur gambar dengan CSS cukup mudah dan gampang di mengerti. Jika kalian suka dengan blog ini silahkan bagikan ke teman - teman anda
agar kita bisa berbagi pengetahuan dengan yang lainnya....
sekian dari saya dan terimakasih....
Comments
Post a Comment