Beranda>Tutorial Desain Web>tutorial HTML

Cara memperkaya gaya gambar menggunakan atribut CSS3 (gradien bayangan bulat)

Penulis：Eve Cole Waktu Pembaruan：2025-04-03 05:48:01

Di CSS3, menggunakan box-shadow dan perbatasan langsung pada gambar, browser tidak dapat render dengan baik. Namun, jika Anda menggunakan gambar sebagai gambar latar belakang, browser gaya yang ditambahkan dapat membuatnya dengan baik. Saya akan menjelaskan cara membuat efek gaya gambar yang berbeda menggunakan box-shadow, perbatasan-radius dan transisi.

pertanyaan

Dengan melihat demo, kami perhatikan bahwa kami menetapkan Radius perbatasan dan penonton kotak yang tertanam untuk baris pertama gambar. Firefox membuat radius perbatasan dari gambar, tetapi tidak membuat shadow kotak tertanam. Efek chrome maupun safari tidak diberikan.

.normal img {

Perbatasan: Solid 5px #000;

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

-webkit-box-shadow: inset 0 1px 5px rgba (0,0,0, .5);

-Moz-box-shadow: inset 0 1px 5px rgba (0,0,0, .5);

Kotak-Shadow: Inset 0 1px 5px RGBA (0,0,0, .5);

}

Efek Firefox :

Chrome/Safari

Solusi

Agar shakat kotak perbatasan dan tertanam agar berfungsi dengan baik, kita perlu mengubah gambar menjadi gambar latar belakang.

Metode dinamis

Untuk melakukan pekerjaan ini secara dinamis, kita perlu menggunakan jQuery untuk menambahkan gambar latar belakang untuk membungkus setiap gambar. Kode JS berikut menambahkan pembungkus rentang untuk setiap gambar, dan jalur gambar latar belakang rentang adalah jalur gambar.

Kode ini relatif sederhana, saya tidak berpikir ada kebutuhan untuk menjelaskannya. Jika Anda tidak tahu, Anda dapat memeriksa API jQuery secara langsung.

<type script = "Text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/jQuery/1.5/jquery.min.js"> </script>

<type skrip = "Teks/JavaScript">

$ (dokumen) .ready (function () {

$ ("img"). Load (function () {

$ (this) .wrap (function () {

return '<span style = "Posisi: relatif; display: inline-block; latar belakang: url (' + $ (this) .attr ('src') + ') no-repeat center; lebar:' + $ (this) .width () + 'px; tinggi:' + $ (ini) .height () + 'px;" /> ';

});

$ (ini) .css ("opacity", "0");

});

});

</script>

Keluaran

Kode di atas akan menghasilkan hasil berikut:

<span style = "Posisi: relatif; tampilan: inline-block; latar belakang: url (image.jpg) no-repeat center center; lebar: 150px; tinggi: 150px;">>

<img src = "image.jpg" style = "opacity: 0;">

</span>

Gambar melingkar

Tambahkan Kami menggunakan perbatasan-radius untuk mencapai efek gambar melingkar, efeknya adalah sebagai berikut:

CSS:

.circle .image-wrap {

-webkit-border-radius: 50em;

-Moz-border-Radius: 50em;

Border-Radius: 50em;

}

Gaya kartu

Di bawah ini adalah gambar bergaya kartu, menggunakan beberapa shadow kotak tertanam.

CSS:

.card .image-wrap {

-webkit-box-shadow: inset 0 0 1px rgba (0,0,0, .8), inset 0 2px 0 rgba (255.255.255, .5), inset 0 -1px 0 RGBA (0,0,0, .4);

-Moz-box-shadow: inset 0 0 1px rgba (0,0,0, .8), inset 0 2px 0 rgba (255.255.255, .5), inset 0 -1px 0 RGBA (0,0,0, .4);

Kotak -Shadow: Inset 0 0 1px RGBA (0,0,0, .8), inset 0 2px 0 RGBA (255.255.255, .5), inset 0 -1px 0 RGBA (0,0,0, .4);

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

Gaya Bantuan

Di bawah ini adalah efek bantuan.

CSS:

.mbossed .image-wrap {

-webkit -box -shadow: inset 0 0 2px rgba (0,0,0, .8), inset 0 2px 0 rgba (255,255,255, .5), inset 0 -7px 0 rgba (0,0,0, .6), inset 0 -9px 0 RGBA (0,0,0,

-Moz -box -shadow: inset 0 0 2px rgba (0,0,0, .8), inset 0 2px 0 rgba (255,255,255, .5), inset 0 -7px 0 rgba (0,0,0, .6), inset 0 -9px 0 rGBA (0,0,0,0,

Kotak -Shadow: Inset 0 0 2px RGBA (0,0,0, .8), inset 0 2px 0 RGBA (255,255,255, .5), inset 0 -7px 0 RGBA (0,0,0, .6), inset 0 -9px 0 RGBA (255.2.0,0,.

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

Gaya relief yang fleksibel

Dibandingkan dengan gaya embossing, gaya baru menambahkan atribut 1px blur.

CSS:

.soft-emboss .image-wrap {

-webkit -box -shadow: inset 0 0 4px rgba (0,0,0,1), inset 0 2px 1px rgba (255,255,255, .5), inset 0 -9px 2px rgba (0,0,0, .6), inset 0 -12px rgba (0,0,0,0, .6), inset 0 -12px 2px (0,0,0,0,.

-Moz -box -shadow: inset 0 0 4px rgba (0,0,0,1), inset 0 2px 1px rgba (255,255,255, .5), inset 0 -9px 2px RGBA (0,0,0, .6), inset 0 -12px 2px 2px (0,0,0,0,.

Kotak -Shadow: Inset 0 0 4px RGBA (0,0,0,1), inset 0 2px 1px RGBA (255,255,255, .5), inset 0 -9px 2px RGBA (0,0,0, .6), inset 0 -12px RGBA (0,0,0,

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

Gaya potongan

Gunakan shadow kotak tertanam untuk mencapai efek guntingan.

CSS:

.cut-out .image-wrap {

-webkit-box-shadow: 0 1px 0 rgba (255.255.255, .2), inset 0 4px 5px rgba (0,0,0, .6), inset 0 1px 0 RGBA (0,0,0, .6);

-Moz-box-shadow: 0 1px 0 RGBA (255.255.255, .2), inset 0 4px 5px RGBA (0,0,0, .6), inset 0 1px 0 RGBA (0,0,0, .6);

Kotak-Shadow: 0 1px 0 RGBA (255.255.255, .2), inset 0 4px 5px RGBA (0,0,0, .6), inset 0 1px 0 RGBA (0,0,0, .6);

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

Deformasi dan cahaya

Dalam contoh ini, kami menambahkan atribut transisi ke kemasan gambar. Saat mouse meluncur, itu akan berubah dari sudut bulat menjadi bentuk bulat. Kemudian kami menggunakan beberapa kotak-shadow untuk mencapai efek bercahaya.

CSS:

.morphing-glowing .image-wrap {

-webkit-transisi: 1s;

-Moz-transisi: 1s;

Transisi: 1s;

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

.morphing-glowing .image-wrap: hover {

-webkit-box-shadow: 0 0 20px RGBA (255.255.255, .6), inset 0 0 20px RGBA (255.255.255,1);

-Moz-box-shadow: 0 0 20px RGBA (255.255.255, .6), inset 0 0 20px RGBA (255.255.255,1);

Kotak-Shadow: 0 0 20px RGBA (255.255.255, .6), inset 0 0 20px RGBA (255.255.255,1);

-webkit-border-radius: 60em;

-Moz-border-radius: 60em;

Border-Radius: 60em;

}

Efek sorotan

Efek highlight dicapai dengan menambahkan: setelah kelas semu ke elemen.

CSS:

.glossy .image-wrap {

-webkit-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5);

-Moz-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5);

Kotak -Shadow: Inset 0 -1px 0 RGBA (0,0,0, .5);

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

.glossy .image-wrap: setelah {

Posisi: Absolute;

isi: ' ';

Lebar: 100%;

Tinggi: 50%;

TOP: 0;

Kiri: 0;

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

Latar belakang: -Moz-linear-gradient (atas, RGBA (255.255.255.0,7) 0%, RGBA (255.255.255, .1) 100%);

Latar Belakang: -WebKit-gradient (linier, atas kiri, bawah kiri, color-stop (0%, RGBA (255.255.255.0,7)), color-stop (100%, RGBA (255.255.255, .1))));

Latar Belakang: Linear-Gradient (Top, RGBA (255.255.255.0,7) 0%, RGBA (255.255.255, .1) 100%);

}

Efek refleksi

Dalam contoh ini, kami memindahkan highlight ke bawah untuk mencapai efek refleksi.

CSS:

.reflection .image-wrap: setelah {

Posisi: Absolute;

isi: ' ';

Lebar: 100%;

Tinggi: 30px;

Bawah: -31px;

Kiri: 0;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-radius-radius: 20px;

-Moz-border-radius-topleft: 20px;

-Moz-border-radius-topright: 20px;

Border-top-left-radius: 20px;

Border-Top-Right-Radius: 20px;

Latar belakang: -Moz-linear-gradient (atas, RGBA (0,0,0, .3) 0%, RGBA (255.255.255,0) 100%);

Latar Belakang: -WebKit-gradient (linear, atas kiri, bawah kiri, color-stop (0%, RGBA (0,0,0, .3)), color-stop (100%, RGBA (255.255.255.0)));

Latar Belakang: Linear-Gradient (Top, RGBA (0,0,0, .3) 0%, RGBA (255.255.255,0) 100%);

}

.reflection .image-wrap: hover {

Posisi: kerabat;

Atas: -8px;

}

Sorotan dan refleksi

Dalam contoh ini, kami menggunakan: Sebelum dan: Setelah menggabungkan efek highlight dan refleksi.

CSS:

.glossy-reflection .image-wrap {

-webkit-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5), inset 0 1px 0 rgba (255.255.255, .6);

-Moz-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5), inset 0 1px 0 rgba (255.255.255, .6);

Kotak -Shadow: Inset 0 -1px 0 RGBA (0,0,0, .5), inset 0 1px 0 RGBA (255.255.255, .6);

-webkit-transisi: 1s;

-Moz-transisi: 1s;

Transisi: 1s;

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

.glossy-reflection .image-wrap: sebelum {

Posisi: Absolute;

isi: ' ';

Lebar: 100%;

Tinggi: 50%;

TOP: 0;

Kiri: 0;

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

Latar belakang: -Moz-linear-gradient (atas, RGBA (255.255.255.0,7) 0%, RGBA (255.255.255, .1) 100%);

Latar Belakang: -WebKit-gradient (linier, atas kiri, bawah kiri, color-stop (0%, RGBA (255.255.255.0,7)), color-stop (100%, RGBA (255.255.255, .1))));

Latar Belakang: Linear-Gradient (Top, RGBA (255.255.255.0,7) 0%, RGBA (255.255.255, .1) 100%);

}

.glossy-reflection .image-wrap: after {

Posisi: Absolute;

isi: ' ';

Lebar: 100%;

Tinggi: 30px;

Bawah: -31px;

Kiri: 0;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-radius-radius: 20px;

-Moz-border-radius-topleft: 20px;

-Moz-border-radius-topright: 20px;

Border-top-left-radius: 20px;

Border-Top-Right-Radius: 20px;

Latar belakang: -Moz-linear-gradient (atas, RGBA (230.230.230, .3) 0%, RGBA (230.230.230.0) 100%);

Latar Belakang: -WebKit-gradient (linear, atas kiri, bawah kiri, color-stop (0%, RGBA (230.230.230, .3)), color-stop (100%, RGBA (230.230.230.0))));

Latar Belakang: Linear-Gradient (Top, RGBA (230.230.230, .3) 0%, RGBA (230.230.230.0) 100%);

}

Gaya tape

Dalam contoh ini, kami menggunakan: Setelah mencapai efek pita.

CSS:

.tape .image-wrap {

-webkit-box-shadow: inset 0 0 2px rgba (0,0,0, .7), inset 0 2px 0 rgba (255,255,255, .3), inset 0 -1px 0 RGBA (0,0,0),.

-Moz-box-shadow: inset 0 0 2px rgba (0,0,0, .7), inset 0 2px 0 rgba (255,255,255, .3), inset 0 -1px 0 RGBA (0,0,0, .5), 0 1px 3px RGBA (0,4), 0 1px 3px RGBA (0,4) (0,4), 0 1px 3px RGBA (0,4), 0 1px 3px (0,4), 0 1px 3px (0,4), 0 1px 3px (0,4), 0 1px 3px (0 1px

Kotak -Shadow: Inset 0 0 2px RGBA (0,0,0, .7), inset 0 2px 0 RGBA (255,255,255, .3), inset 0 -1px 0 RGBA (0,0,0, .5), 0 1px 3px RGBA (0,0,0,0),.

}

.tape .image-wrap: setelah {

Posisi: Absolute;

isi: ' ';

Lebar: 60px;

Tinggi: 25px;

Atas: -10px;

Kiri: 50%;

margin -kiri: -30px;

Perbatasan: Solid 1px RGBA (137.130,48, .2);

Latar belakang: -Moz-linear-gradient (atas, RGBA (254.243.127, .6) 0%, RGBA (240.224.54, .6) 100%);

Latar Belakang: -WebKit-gradient (linier, atas kiri, bawah kiri, color-stop (0%, RGBA (254.243.127, .6)), color-stop (100%, RGBA (240.224,54, .6)));

Latar Belakang: Linear-Gradient (Top, RGBA (254.243.127, .6) 0%, RGBA (240.224,54, .6) 100%);

-webkit-box-shadow: inset 0 1px 0 rgba (255.255.255, .3), 0 1px 0 RGBA (0,0,0, .2);

}

Deformasi dan pewarnaan

Dalam contoh ini, kami menggunakan: Setelah pada elemen untuk mencapai efek gradien radial ketika mouse lewat.

CSS:

.morphing-tinting .image-wrap {

Posisi: kerabat;

-webkit-transisi: 1s;

-Moz-transisi: 1s;

Transisi: 1s;

-webkit-border-radius: 20px;

-Moz-border-Radius: 20px;

Border-Radius: 20px;

}

.morphing-tinting .image-wrap: hover {

-webkit-border-radius: 30em;

-Moz-border-radius: 30em;

Border-Radius: 30em;

}

.morphing-tinting .image-wrap: setelah {

Posisi: Absolute;

isi: ' ';

Lebar: 100%;

Tinggi: 100%;

TOP: 0;

Kiri: 0;

-webkit-transisi: 1s;

-Moz-transisi: 1s;

Transisi: 1s;

-webkit-border-radius: 30em;

-Moz-border-radius: 30em;

Border-Radius: 30em;

}

.morphing-tinting .image-wrap: hover: after {

Latar belakang: -WebKit -gradient (radial, 50% 50%, 40, 50% 50%, 80, dari (RGBA (0,0,0,0)), ke (RGBA (0,0,0,1)));

Latar Belakang: -Moz-Radial-Gradient (50% 50%, Circle, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 80px);

}

Tepi berbulu bulat

Kami juga dapat menggunakan gradien radial untuk menghasilkan topeng untuk mencapai efek bulu.

CSS:

.feather .image-wrap {

Posisi: kerabat;

-webkit-border-radius: 30em;

-Moz-border-radius: 30em;

Border-Radius: 30em;

}

.feather .image-wrap: setelah {

Posisi: Absolute;

isi: ' ';

Lebar: 100%;

Tinggi: 100%;

TOP: 0;

Kiri: 0;

Latar Belakang: -WebKit -gradient (radial, 50% 50%, 50, 50% 50%, 70, dari (RGBA (255.255.255,0)), ke (RGBA (255.255.255,1))));

Latar Belakang: -Moz-Radial-Gradient (50% 50%, Circle, RGBA (255.255.255,0) 50px, RGBA (255.255.255,1) 70px);

}

Kompatibilitas browser

Implementasi ini bekerja dengan baik di sebagian besar browser yang mendukung perbatasan-radius, shadow ,: sebelum dan: setelah fitur (seperti Chrome, Firefox dan Safari). Di browser yang tidak mendukung fitur baru, hanya gambar asli yang akan ditampilkan.

Buat implementasi Anda sendiri

Dengan bantuan: Sebelum dan: Setelah kelas semu, Anda dapat membuat banyak gaya untuk gambar, dan Anda dapat mencoba membuat efek baru sendiri.

Artikel Terkait