tutorial pengembangan web terbaru
 

CSS gambar

❮ Sebelumnya Berikutnya Bab ❯

Pelajari cara untuk gaya gambar menggunakan CSS.

Gambar bulat

Gunakan border-radius properti untuk membuat gambar bulat:


Paris

Contoh

Gambar bulat:

img {
    border-radius: 8px;
}
Cobalah sendiri "
Paris

Contoh

Dilingkari Gambar:

img {
    border-radius: 50%;
}
Cobalah sendiri "

Gambar thumbnail

Gunakan border properti untuk membuat gambar thumbnail.

Gambar Thumbnail:

Paris

Contoh

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

< img src="paris.jpg" alt="Paris" >
Cobalah sendiri "

Gambar thumbnail sebagai Link:

Contoh

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

< a href="paris.jpg" >
  < img src="paris.jpg" alt="Paris" >
< /a >
Cobalah sendiri "

Gambar responsif

gambar responsif akan secara otomatis menyesuaikan agar sesuai dengan ukuran layar.

Mengubah ukuran jendela browser untuk melihat efek:

Norway

Jika Anda ingin gambar untuk menurunkan jika itu harus, tetapi tidak pernah skala hingga lebih besar dari ukuran aslinya, tambahkan berikut:

Contoh

img {
    max-width: 100%;
    height: auto;
}
Cobalah sendiri "

Tip: Baca lebih lanjut tentang Desain Web Responsif di kami CSS RWD Tutorial .

Teks gambar

Bagaimana posisi teks dalam gambar:

Contoh

Norway
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Cobalah sendiri:

Top Left » Kanan Atas» Kiri Bawah » Bawah Kanan» Centered »

Polaroid Images / Kartu

Norway

Lidah Troll di Hardanger, Norwegia

Norway

Cahaya Utara di Norwegia

Contoh

div.polaroid {
    width: 80%;
    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);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}
Cobalah sendiri "

Filter gambar

CSS filter properti menambahkan efek visual (seperti blur dan saturasi) ke elemen.

Catatan: Filter properti tidak didukung di Internet Explorer, Ujung 12, atau Safari 5.1 dan sebelumnya.

Contoh

Mengubah warna semua gambar menjadi hitam dan putih (100% abu-abu):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
Cobalah sendiri "

Tip: Pergi ke kami penyaring Referensi CSS untuk mempelajari lebih lanjut tentang filter CSS.

Responsif Galeri

CSS dapat digunakan untuk membuat galeri gambar. Contoh ini menggunakan query media untuk menata kembali gambar pada ukuran layar yang berbeda. Mengubah ukuran jendela browser untuk melihat efek:

Trolltunga Norwegia
Menambahkan deskripsi gambar di sini
Hutan
Menambahkan deskripsi gambar di sini
Cahaya utara
Menambahkan deskripsi gambar di sini
pegunungan
Menambahkan deskripsi gambar di sini

Contoh

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
Cobalah sendiri "

Tip: Baca lebih lanjut tentang Desain Web Responsif di kami CSS RWD Tutorial .

Gambar Modal (Advanced)

Ini adalah contoh untuk menunjukkan bagaimana CSS dan JavaScript dapat bekerja sama.

Pertama, gunakan CSS untuk membuat jendela modal (kotak dialog), dan menyembunyikannya secara default.

Kemudian, gunakan JavaScript untuk menampilkan jendela modal dan untuk menampilkan gambar dalam modal, ketika pengguna mengklik gambar:

Northern Lights, Norway

Contoh

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
Cobalah sendiri "

❮ Sebelumnya Berikutnya Bab ❯