CSS - Stile Gambar

Hai teman-teman desainer web yang ambisius! Hari ini, kita akan mengemban perjalanan menarik melalui dunia gaya gambar CSS. Sebagai guru komputer tetangga Anda, saya sangat senang untuk membimbing Anda dalam petualangan ini. Ingat, sama seperti belajar menunggang sepeda, menguasai CSS memerlukan latihan, tapi saya janji, itu akan menyenangkan!

CSS Style Image - Gambar Berbundar

Mari kita mulai dengan sesuatu yang sederhana tapi elegan: gambar berbundar. Anda tahu betapa kami menyukai untuk memperlembut tepi di kehidupan sehari-hari? Well, kita bisa melakukan hal yang sama dengan gambar kita!

<img src="cute_puppy.jpg" alt="Anak anjing yang lucu" class="rounded-image">

.rounded-image {
border-radius: 25px;
}

Dalam contoh ini, kita mengatakan kepada browser untuk membulatkan sudut gambar kita sebesar 25 piksel. Itu seperti memberikan gambar Anda potongan rambut kecil! Anda dapat menyesuaikan nilai ini untuk membuat sudut lebih atau kurang bundar.

CSS Style Image - Gambar Bulat

Sekarang, mari kita maju satu langkah lebih jauh dan menjadikan gambar kita bulat. Ini sangat cocok untuk gambar profil atau setiap gambar tempat Anda ingin fokus di tengahnya.

<img src="profile_pic.jpg" alt="Gambar profil" class="circle-image">

.circle-image {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
}

Di sini tempat magis terjadi: border-radius: 50% menjadikan gambar persegi kita menjadi bulat. Kita menetapkan lebar dan tinggi tetap, dan object-fit: cover memastikan gambar mengisi lingkaran tanpa melorot.

CSS Style Image - Gambar Miniatur

Miniatur seperti trailer film dunia gambar - previu kecil yang memberikan Anda rasa gambar utuh. Mari kita buat beberapa!

<img src="landscape.jpg" alt="Lanskap yang indah" class="thumbnail">

.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
}

CSS ini membuat gambar miniatur kecil, kotak, dengan pinggiran yang rapi. Properti object-fit: cover memastikan gambar mengisi area miniatur tanpa distorsi.

CSS Style Image - Gambar Miniatur sebagai Tautan

Mari kita membuat miniatur kita bisa diklik! Ini sangat cocok untuk galeri gambar atau daftar produk.

<a href="full_image.jpg">
<img src="thumbnail.jpg" alt="Klik untuk memperbesar" class="thumbnail-link">
</a>

.thumbnail-link {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: transform 0.3s ease;
}

.thumbnail-link:hover {
transform: scale(1.1);
}

Kami menambahkan efek hover yang menarik di sini. Ketika Anda menggerakkan mouse di atas miniatur, itu sedikit membesar, memberikan rasa interaktif yang bagus.

CSS Style Image - Gambar Responsif

Dalam dunia multi-perangkat saat ini, kita butuh gambar yang terlihat bagus di semua ukuran layar. Mari kita membuat gambar kita responsif!

<img src="scenery.jpg" alt="Lanskap yang indah" class="responsive-image">

.responsive-image {
max-width: 100%;
height: auto;
}

CSS ini memastikan bahwa gambar kita tidak pernah lebih lebar dari wadahnya, dan tingginya akan disesuaikan proporsional. Itu seperti memiliki gambar yang tahu bagaimana perilaku dalam setiap situasi!

CSS Style Image - Pusat Gambar

Mengatur gambar di tengah bisa sulit, tapi saya punya trik menarik untuk Anda. Itu seperti mengajarkan gambar Anda untuk berdiri tepat di tengah panggung!

<div class="image-container">
<img src="centered_image.jpg" alt="Gambar yang diperpusat" class="center-image">
</div>

.image-container {
text-align: center;
}

.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

Metode ini bekerja untuk gambar inline dan level blok. Properti text-align: center pada wadah membantu dengan gambar inline, sedangkan margin: auto mengatur gambar level blok.

CSS Style Image - Gambar Polaroid / Kartu

Ingat kamera Polaroid? Mari kita buat tampilan klasik itu dengan CSS!

<div class="polaroid">
<img src="vacation.jpg" alt="Ingatan liburan">
<div class="caption">Musim Panas 2023</div>
</div>

.polaroid {
width: 250px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}

.polaroid img {
width: 100%;
}

.caption {
text-align: center;
padding: 10px 20px;
}

CSS ini membuat pinggiran putih di sekitar gambar dan menambahkan bayangan halus untuk efek 3D. Caption berada di bawah gambar, seperti pada sebenarnya Polaroid!

CSS Style Image - Gambar Transparan

kadang-kadang, kita ingin gambar kita menjadi transparan. Itu seperti memberikan gambar Anda kualitas setengah jiwa!

<img src="logo.png" alt="Logo perusahaan" class="transparent-image">

.transparent-image {
opacity: 0.5;
}

Properti opacity berada di antara 0 (completely transparan) hingga 1 (sepenuhnya opaque). Anda dapat menyesuaikan nilai ini untuk mendapatkan tingkat transparan yang diinginkan.

CSS Style Image - Pusat Teks

Mari kita tempatkan teks di tengah gambar. Itu seperti membuat poster motivasi sendiri!

<div class="image-text-container">
<img src="background.jpg" alt="Gambar latar belakang">
<div class="centered-text">Teks Anda disini</div>
</div>

.image-text-container {
position: relative;
text-align: center;
color: white;
}

.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

CSS ini menggunakan penempatan untuk menempatkan teks tepat di tengah gambar. Properti transform memastikan itu diperpusat secara vertikal dan horisontal.

CSS Style Image - Filter

CSS filter adalah seperti Instagram untuk gambar web Anda. Mari kita mainkan dengan beberapa!

<img src="landscape.jpg" alt="Lanskap" class="filtered-image">

.filtered-image {
filter: grayscale(100%) brightness(150%) contrast(120%);
}

Contoh ini menerapkan beberapa filter: ia mengubah gambar menjadi abu-abu, meningkatkan kecerahan, dan meningkatkan kontras. Anda dapat campur dan cocok filter yang berbeda untuk membuat efek unik!

CSS Style Image - Overlay Pergeseran

Mari kita buat efek yang menarik ketika Anda menggerakkan mouse ke gambar. Itu seperti mengungkap pesan rahasia!

<div class="image-overlay">
<img src="product.jpg" alt="Gambar produk">
<div class="overlay">
<div class="text">Deskripsi produk</div>
</div>
</div>

.image-overlay {
position: relative;
width: 50%;
}

.image-overlay img {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-overlay:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

CSS ini membuat overlay gelap yang muncul saat Anda menggerakkan mouse ke gambar, menampilkan teks.

CSS Style Image - Efect Pergeseran

Sekarang, mari kita buat efek pergeseran untuk caption gambar. Itu seperti menarik backdrai untuk menampilkan bintang panggung!

<div class="slide-container">
<img src="nature.jpg" alt="Pemandangan alam" class="slide-image">
<div class="slide-caption">Pemandangan Alam</div>
</div>

.slide-container {
position: relative;
overflow: hidden;
}

.slide-image {
display: block;
width: 100%;
height: auto;
}

.slide-caption {
position: absolute;
bottom: 0;
left: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
transition: 0.5s ease;
width: 100%;
}

.slide-container:hover .slide-caption {
left: 0;
}

CSS ini menyembunyikan caption di luar layar dan menggesernya ke dalam saat Anda menggerakkan mouse ke gambar.

CSS Style Image - Flip Gambar

Mari kita menambahkan efek flip! Itu seperti memberikan gambar Anda pass untuk menampilkan sisi belakangnya.

<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="front.jpg" alt="Sisi depan">
</div>
<div class="back">
<img src="back.jpg" alt="Sisi belakang">
</div>
</div>
</div>

.flip-container {
width: 300px;
height: 200px;
perspective: 1000px;
}

.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.flip-container:hover .flipper {
transform: rotateY(180deg);
}

.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.back {
transform: rotateY(180deg);
}

CSS ini membuat efek flip 3D saat Anda menggerakkan mouse ke wadah. Sisi depan gambar akan berputar untuk menampilkan sisi belakang.

CSS Style Image - Galeri Gambar Responsif

Mari kita gabungkan keterampilan kita dan buat galeri gambar responsif. Itu seperti mencuri pameran seni mini sendiri!

<div class="gallery">
<img src="img1.jpg" alt="Gambar galeri 1">
<img src="img2.jpg" alt="Gambar galeri 2">
<img src="img3.jpg" alt="Gambar galeri 3">
<img src="img4.jpg" alt="Gambar galeri 4">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

.gallery img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}

@media screen and (min-width: 600px) {
.gallery img {
width: 49%;
margin: 0.5%;
}
}

@media screen and (min-width: 1000px) {
.gallery img {
width: 24%;
margin: 0.5%;
}
}

CSS ini membuat galeri yang fleksibel yang menyesuaikan berdasarkan ukuran layar. Pada layar kecil, gambar tumpuk vertikal. Pada layar medium, mereka membentuk dua kolom, dan pada layar besar, mereka membuat empat kolom.

CSS Style Image - Modal Gambar

Akhirnya, mari kita buat modal yang muncul saat Anda mengklik gambar. Itu seperti memberikan gambar Anda momen sorotan pribadi!

<img src="thumbnail.jpg" alt="Klik untuk memperbesar" class="modal-trigger" onclick="openModal(this)">

<div id="imageModal" class="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modalImage">
</div>

.modal-trigger {
cursor: pointer;
transition: 0.3s;
}

.modal-trigger:hover {opacity: 0.7;}

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

function openModal(img) {
var modal = document.getElementById("imageModal");
var modalImg = document.getElementById("modalImage");
modal.style.display = "block";
modalImg.src = img.src;
}

function closeModal() {
document.getElementById("imageModal").style.display = "none";
}

Kombinasi HTML, CSS, dan JavaScript ini membuat modal yang muncul saat Anda mengklik gambar, menampilkan gambar yang lebih besar.

Dan begitu, teman-teman! Kita telah mengemban perjalanan melalui dunia gaya gambar CSS. Ingat, kunci untuk menguasai teknik ini adalah latihan. Jadi, jangan ragu untuk bermain dengan contoh ini, campur dan cocok, dan buat sesuatu yang unik bagi Anda. Selamat coding!

Credits: Image by storyset