CSS - Gaya imej
Hai situ, para pengusaha web yang ambisi tinggi! Hari ini, kita akan melaksanakan sebuah perjalanan yang menarik melalui dunia gaya imej CSS. Seperti gurubanduan komputer tetangga anda, saya sangat gembira untuk membimbing anda dalam petualangan ini. Ingat, seperti belajar menunggang basikal, menguasai CSS memerlukan latihan, tetapi saya berjanji ia akan menyenangkan!
Gaya Imej CSS - Imej Bulat
Mari kita mulai dengan sesuatu yang ringan dan elegan: imej bulat. Anda tahu bagaimana kita suka memperlembut tepi dalam kehidupan? Well, kita juga boleh làm so dengan imej kita!
<img src="cute_puppy.jpg" alt="Anak anjing comel" class="rounded-image">.rounded-image {
border-radius: 25px;
}Dalam contoh ini, kita memberitahu pelayar untuk melengkungkan sudut imej kita sebanyak 25 piksel. Itu seperti memberikan imej anda potong rambut kecil! Anda boleh调整 nilai ini untuk membuat sudut lebih atau kurang melengkung.
Gaya Imej CSS - Imej Bulat
Sekarang, mari kita langkah lebih jauh dan menjadikan imej kita bulatan sempurna. Ini sangat baik untuk gambar profil atau mana-mana imej di mana anda mahu menitikberatkan pusatnya.
<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 tempatnya keajaiban berlaku: border-radius: 50% menjadikan imej kotak kita bulat. Kita setkan width dan height tetap, dan object-fit: cover pastikan imej mengisi bulatan tanpa diperpanjang.
Gaya Imej CSS - Imej Mini
Thumbnails seperti trailer filem dalam dunia imej - previu kecil yang memberikan anda rasa imej penuh. Mari kita buat beberapa!
<img src="landscape.jpg" alt="Lanskap cantik" class="thumbnail">.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
}CSS ini mencipta thumbnail kotak kecil dengan sempadan yang rapi. Properti object-fit: cover pastikan imej mengisi kawasan thumbnail tanpa distorsi.
Gaya Imej CSS - Imej Mini Sebagai Pautan
Mari kita buat thumbnail clickable! Ini sangat baik untuk galeri imej atau senarai produk.
<a href="full_image.jpg">
<img src="thumbnail.jpg" alt="Klik untuk membesarkan" 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 kesan hover yang menarik di sini. Ketika anda meletakkan tetikus di atas thumbnail, ia sedikit membesar, memberikan rasa interaktif yang bagus.
Gaya Imej CSS - Imej Responsif
Dalam dunia multi-peranti hari ini, kita perlukan imej yang kelihatan bagus di semua saiz skrin. Mari kita buat imej kita responsif!
<img src="scenery.jpg" alt="Lanskap cantik" class="responsive-image">.responsive-image {
max-width: 100%;
height: auto;
}CSS ini memastikan imej kita tidak akan lebih luas daripada bekasnya, dan tingginya akan disesuaikan secara proporsional. Itu seperti imej yang tahu bagaimana untuk bertindak di mana-mana situasi!
Gaya Imej CSS - Pusatkan Imej
Menengahkan imej boleh menjadi sesuatu yang rumit, tetapi saya ada trik menarik untuk anda. Itu seperti mengajarkan imej anda untuk berdiri tepat di tengah pentas!
<div class="image-container">
<img src="centered_image.jpg" alt="Imej dipusatkan" class="center-image">
</div>.image-container {
text-align: center;
}
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}Metod ini berkerja untuk kedua-dua imej sebaris dan aras blok. text-align: center pada bekas membantu dengan imej sebaris, manakala margin: auto menengahkan imej aras blok.
Gaya Imej CSS - Imej Polaroid / Kad
Ingat Polaroid kamera? Mari kita buat penampilan klasik itu dengan CSS!
<div class="polaroid">
<img src="vacation.jpg" alt="Ingatan percutian">
<div class="caption">Musim Panas 2023</div>
</div>.polaroid {
width: 250px;
background-color: putih;
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 mencipta sempadan putih di sekeliling imej dan menambah penumbra yang halus untuk kesan 3D. Caption diletakkan di bawah imej, seperti yang dilakukan oleh sebenar Polaroid!
Gaya Imej CSS - Imej Transparan
kadang-kadang, kita mahu imej kita menjadi tampak melampir. Itu seperti memberikan imej anda kualiti setengahwayang!
<img src="logo.png" alt="Logo syarikat" class="transparent-image">.transparent-image {
opacity: 0.5;
}Properti opacity berada dalam julat daripada 0 ( sepenuhnya tampak melampir) hingga 1 ( sepenuhnya opaque). Anda boleh调整 nilai ini untuk mendapatkan tahap kelegapan yang dikehendaki.
Gaya Imej CSS - Pusatkan Teks
Mari kita letakkan sedikit teks di tengah-tengah imej. Itu seperti membuat poster motivasi sendiri anda!
<div class="image-text-container">
<img src="background.jpg" alt="Gambar latar belakang">
<div class="centered-text">Teks anda di sini</div>
</div>.image-text-container {
position: relative;
text-align: center;
color: putih;
}
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}CSS ini menggunakan penempatan untuk meletakkan teks tepat di tengah-tengah imej. Properti transform memastikan ia ditengahkan secara vertikal dan horisontal.
Gaya Imej CSS - Penapis
CSS penapis adalah seperti Instagram untuk imej web anda. Mari kita main-main dengan beberapa!
<img src="landscape.jpg" alt="Lanskap" class="filtered-image">.filtered-image {
filter: grayscale(100%) brightness(150%) contrast(120%);
}Contoh ini menerapkan penapis berbeza: ia mengubah imej kepada grayscale, meningkatkan kecerahan, dan meningkatkan kontras. Anda boleh campur dan padan penapis berbeza untuk mencipta kesan unik!
Di sini adalah jadual penapis CSS biasa:
| Penapis | Keterangan | Contoh |
|---|---|---|
| grayscale() | Konversikan imej ke grayscale | filter: grayscale(100%); |
| sepia() | Konversikan imej ke sepia | filter: sepia(60%); |
| saturate() | Menyatur imej | filter: saturate(200%); |
| hue-rotate() | Terapkan putaran warna | filter: hue-rotate(90deg); |
| invert() | Balikkan warna imej | filter: invert(75%); |
| opacity() | Tetapkan kelegapan imej | filter: opacity(25%); |
| brightness() | Tetapkan kecerahan | filter: brightness(150%); |
| contrast() | Tetapkan kontras | filter: contrast(200%); |
| blur() | Terapkan kesan buram | filter: blur(5px); |
Gaya Imej CSS - Penapis Timbul
Mari kita buat kesan di mana teks timbul saat anda meletakkan tetikus di atas imej. 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: putih;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}CSS ini mencipta overlay gelap yang timbul saat anda meletakkan tetikus di atas imej, mengungkap teks.
Gaya Imej CSS - Kesannya Pergeseran
Sekarang, mari kita buat kesan pergeseran untuk keterangan imej. Itu seperti mengambil kain penutup untuk mengungkap bintang pertunjukan!
<div class="slide-container">
<img src="nature.jpg" alt="Pemandangan alam" class="slide-image">
<div class="slide-caption"> Alam cantik</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: putih;
padding: 10px;
transition: 0.5s ease;
width: 100%;
}
.slide-container:hover .slide-caption {
left: 0;
}CSS ini menyembunyikan keterangan di luar skrin dan menggesernya masuk dari kanan saat anda meletakkan tetikus di atas imej.
Gaya Imej CSS - Imej Terbalik
Mari kita tambahkan kesan terbalik! Itu seperti memberikan imej anda pass backend untuk menunjukkan sisi belakangnya.
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="front.jpg" alt="Sisi hadapan">
</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 mencipta kesan 3D terbalik saat anda meletakkan tetikus di atas bekas. Imej hadapan terbalik untuk mengungkapkan imej belakang.
Gaya Imej CSS - Galeri Imej Responsif
Mari kita gabungkan keterampilan kita dan buat galeri imej responsif. Itu seperti mencurahkan pameran seni mini sendiri anda!
<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 mencipta galeri yang fleksibel yang disesuaikan berdasarkan saiz skrin. Pada skrin kecil, imej bertindak vertikal. Pada skrin sederhana, mereka membentuk dua lajur, dan pada skrin besar, mereka membentuk empat lajur.
Gaya Imej CSS - Modal Imej
Akhirnya, mari kita buat modal yang muncul saat anda mengklik imej. Itu seperti memberikan imej anda momen sorotan sendiri!
<img src="thumbnail.jpg" alt="Klik untuk membesarkan" class="modal-trigger" onclick="openModal(this)">
<div id="imageModal" class="modal">
<span class="close" onclick="closeModal()">×</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 mencipta modal yang muncul saat anda mengklik imej, menampilkan imej yang lebih besar.
Dan begitu saja, teman-teman! Kita telah melalui dunia menarik gaya imej CSS. Ingat, kunci untuk menguasai teknik ini adalah latihan. Jadi, jangan ragu untuk main-main dengan contoh ini, campur dan padan, dan cipta sesuatu yang unik bagi anda. Selamat berkoding!
Credits: Image by storyset