Semasa memperbaiki gambar, kita dapat memilih untuk melakukannya dengan Photoshop dan kemudian memasangnya di laman web atau kita juga dapat memilih pilihan B: lakukan dengan teknik HTML, CSS dan Javascript yang ada.
Selepas lompatan terdapat banyak teknik untuk memperbaiki gambar, hampir semuanya dibuat dengan jQuery sebagai pangkalan utama atau dengan CSS3 memanfaatkan piawaian web terkini, walaupun saya mengingatkan anda bahawa sekiranya kita kehilangan keserasian dengan beberapa penyemak imbas.
Mereka berbahasa Inggeris tetapi mereka terperangkap, dijanjikan :)
Sumber | 1stWD
Gambar Bulat CSS3 Dengan jQuery
Belajar membungkus span tag di sekitar elemen gambar untuk mencapai gambar bulat yang akan dipaparkan tepat di semua penyemak imbas moden.
2.
Pelbagai Latar Belakang dan Sempadan dengan CSS 2.1
Ketahui cara menggunakan elemen pseudo CSS 2.1 untuk menyediakan hingga 3 kanvas latar belakang, 2 gambar persembahan ukuran tetap, dan berbilang sempadan kompleks untuk satu elemen HTML.
3.
Petua Pantas: Berbilang Sempadan dengan CSS Mudah
Screencast cepat menunjukkan kepada anda bagaimana mencapai pelbagai sempadan dengan CSS sederhana dengan cara itu menambahkan lebih mendalam pada reka bentuk anda. Versi tutorial yang jauh lebih mudah.
4.
Pelbagai Sempadan pada Elemen Berukuran Dinamik dengan CSS2
Versi ketiga dari Nicholas Gallagher menunjukkan apa yang harus anda lakukan sekiranya anda tidak mempunyai ukuran elemen.
5.
Bersenang-senang dengan Sempadan - Serong, Ditekan, & Banyak Lagi!
Ketahui cara mencapai kesan ditekan dengan CSS dan beberapa trik gaya sempadan sederhana untuk mendapatkan pelbagai kesan.
6.
Polaroid dengan CSS3
Ketahui cara menggunakan beberapa CSS2 dan CSS3 yang hebat untuk mengubah senarai gambar yang tidak sederhana menjadi sekumpulan gambar Polaroid yang lengkap.
7.
Imej Latar Belakang Halaman Penuh yang Sempurna
Pelajari cara menambah gambar latar dengan CSS yang mengisi seluruh halaman dengan gambar, tanpa ruang kosong, skala gambar mengikut keperluan, tidak menyebabkan bar tatal dan banyak lagi.
8.
CSS3 Box Shadow dan Image Hover Effect
Terokai kaedah baru untuk menambahkan kesan bayangan drop hanya dengan mengedit helaian gaya.
9.
Fancy Thumbnail Hover Effect w / jQuery
Capai kesan gaya kilat yang kemas dengan CSS dan jQuery.
10.
Cara Membuat Kesan Rollover Imej CSS Mudah
Dalam tutorial ini, anda akan belajar bagaimana membuat kesan rollover gambar CSS sederhana dengan gaya HTML dan CSS asas.
11.
Terapung
Floatutorial membawa anda melalui asas-asas elemen terapung seperti gambar, topi jatuh, butang sebelah dan belakang, galeri gambar, senarai sebaris dan susun atur berbilang lajur. Lihat 4 tutorial yang dikhaskan untuk gambar mengambang.
12.
Kesan Snazzy Hover Menggunakan CSS
Dalam tutorial ini, anda akan membuat teknik hover lanjutan yang fleksibel menggunakan sifat CSS2.1.
13.
Rollover pantas Tanpa
Pramuat
Semasa menggunakan rollover gambar CSS, dua, tiga, atau lebih gambar mesti dimuat (dan sering dimuat terlebih dahulu untuk hasil terbaik). Pelajari cara meletakkan semua keadaan menjadi satu gambar menjadikan perubahan dinamik lebih cepat dan tidak memerlukan pramuat.
14.
Sudut Bulat jQuery
Banyak kesan jQuery untuk sudut bulat dan banyak lagi corak.
15.
Petua Petua dan Imej Paling Mudah Menggunakan jQuery
Lihat 3 contoh penggunaan skrip pratonton rollover jQuery. Skrip ringkas ini dapat diaplikasikan untuk pelbagai tujuan.
16.
Bersaiz Besar - Latar Belakang Skrin Penuh /
Slideshow
Pemalam jQuery
Superzided adalah plugin jQuery yang mengubah saiz gambar untuk mengisi penyemak imbas sambil mengekalkan nisbah dimensi gambar dan kitaran Imej / latar belakang melalui tayangan slaid dengan peralihan dan pramuat.
17.
Hamparan PNG
Adakah anda pernah menghadapi masalah membuat laman web dengan gambar yang diberikan oleh pelanggan, hanya untuk mencari kemudian setelah mereka mengemas kini fotografi mereka, rupa dan nuansa asli tidak dikekalkan? Penyelesaian ini melibatkan membuat overlay PNG yang telus yang dapat digunakan sebagai topeng / bingkai di sekitar JPEG atau GIF biasa. Dengan cara ini, pemasangan CMS khas dapat dikonfigurasi sehingga pengguna dapat memuat naik foto tanpa perlu risau menggunakan program grafik untuk menerapkan filter.
18.
BeZoom
Ringan
JQuery
Zum Plugin
BeZoom adalah alternatif sederhana dan ringan untuk JQZoom. Lebih ringan dan lebih senang digunakan.
19.
Menggunakan jQuery untuk Latar Belakang Gambar Animasi
Main dengan jQuery dan ubah kedudukan gambar latar untuk membuat jenis kesan yang anda cari. Terdapat artikel baru yang menjawab "Bagaimana cara menangani keadaan aktif?" - Mengendalikan Keadaan Aktif untuk Latar Belakang Animasi jQuery.
20.
5 Cara untuk Meningkatkan Imej Anda dengan CSS
Berikut adalah beberapa trik mudah untuk menambahkan sedikit rasa pada gambar biasa anda yang hambar. Menggunakan Photoshop untuk menggayakan setiap gambar boleh membosankan dan sukar dijaga dalam jangka masa panjang. Teknik CSS berikut ini akan membantu anda meredakan kesakitan itu.
21.
Bagaimana untuk:
Saiz semula
Imej Latar Belakang
Pelajari cara mengatur gambar latar yang boleh diubah saiznya dengan CSS. Anda mempunyai 3 pilihan untuk dipilih.
22.
Gaya Pautan Gambar Anda
Memberi tahu pengguna bahawa bahagian tertentu di laman web kami yang dimaksudkan untuk diklik paling baik dicapai melalui kesan over mouse. Bahagian "yang boleh diklik" itu tentunya merangkumi gambar kandungan. Image Link adalah skrip yang membolehkan anda menerapkan gaya tambahan pada pautan gambar anda.
23.
Pelbagai Gambar Latar Belakang dengan CSS
Kadang-kadang, lebih masuk akal untuk menggunakan gambar latar daripada memasukkannya terus ke halaman. Walaupun setiap elemen - seperti teg badan anda - hanya dapat menyimpan satu gambar latar, elemen tersebut dapat diterapkan pada beberapa elemen.
24.
Sempadan Imej dengan CSS
Tutorial yang sangat mudah yang menunjukkan cara menambah sempadan pada gambar menggunakan CSS.
25.
Sprite CSS tanpa Menggunakan Gambar Latar Belakang
Ketahui cara menggunakan kesan hover tanpa banyak pengetahuan mengenai sprite CSS.
