Dalam hal meningkatkan gambar, kita dapat memilih untuk melakukannya dengan Photoshop dan kemudian memasangnya di halaman web atau kita juga dapat memilih opsi B: lakukan dengan teknik HTML, CSS dan Javascript yang tersedia.
Setelah di lompat ada banyak teknik untuk memperbaiki gambar, hampir semuanya dibuat dengan jQuery sebagai basis utama atau dengan CSS3 memanfaatkan standar web terbaru, meskipun saya mengingatkan Anda bahwa dalam hal ini kami kehilangan kompatibilitas dengan beberapa browser.
Mereka dalam bahasa Inggris tetapi mereka tertangkap basah, dijanjikan :)
Sumber | WD pertama
Gambar Bulat CSS3 Dengan jQuery
Pelajari cara menggabungkan tag span di sekitar elemen gambar untuk mendapatkan gambar bulat yang akan ditampilkan langsung di semua browser modern.
2.
Beberapa Latar Belakang dan Perbatasan dengan CSS 2.1
Pelajari cara menggunakan pseudo-elemen CSS 2.1 untuk menyediakan hingga 3 kanvas latar belakang, 2 gambar presentasi ukuran tetap, dan beberapa batas kompleks untuk satu elemen HTML.
3.
Tip Cepat: Banyak Perbatasan dengan CSS Sederhana
Screencast cepat menunjukkan kepada Anda bagaimana mencapai banyak batas dengan CSS sederhana yang dengan cara itu menambahkan lebih banyak kedalaman pada desain Anda. Versi yang jauh lebih sederhana dari tutorial sebelumnya.
4.
Beberapa Perbatasan pada Elemen Berukuran Dinamis dengan CSS2
Versi ketiga dari Nicholas Gallagher menunjukkan kepada Anda apa yang harus dilakukan jika Anda tidak memiliki ukuran elemen.
5.
Bersenang-senang dengan Perbatasan - Miring, Ditekan, & Lainnya!
Pelajari bagaimana mendapatkan efek yang ditekan dengan CSS dan beberapa trik gaya perbatasan sederhana untuk mendapatkan berbagai efek.
6.
Polaroid dengan CSS3
Pelajari cara menggunakan beberapa CSS2 dan CSS3 yang mengagumkan untuk mengubah daftar gambar yang sederhana menjadi satu set gambar Polaroid yang lengkap.
7.
Gambar Latar Belakang Halaman Penuh Sempurna
Pelajari cara menambahkan gambar latar belakang dengan CSS yang mengisi seluruh halaman dengan gambar, tanpa spasi, gambar skala sesuai kebutuhan, tidak menyebabkan scrollbar dan banyak lagi.
8.
CSS3 Box Shadow dan Image Hover Effects
Jelajahi cara baru menambahkan efek bayangan hanya dengan mengedit lembar gaya.
9.
Efek Hover Thumbnail Fancy dengan jQuery
Dapatkan efek bergaya flash yang rapi dengan CSS dan jQuery.
10.
Cara Membuat Efek Rollover Gambar CSS Sederhana
Dalam tutorial ini Anda akan belajar cara membuat efek rollover gambar CSS sederhana dengan gaya HTML dan CSS dasar.
11.
Tutorial apung
Floatutorial membawa Anda melalui dasar-dasar elemen mengambang seperti gambar, drop caps, tombol berikutnya dan kembali, galeri gambar, daftar sebaris, dan tata letak multi-kolom. Lihat 4 tutorial yang didedikasikan untuk image floating.
12.
Efek Snazzy Hover Menggunakan CSS
Dalam tutorial ini, Anda akan membahas pembuatan teknik hover tingkat lanjut yang fleksibel menggunakan properti CSS2.1.
13.
Rollover Cepat Tanpa
Pramuat
Saat menggunakan rollover gambar CSS, dua, tiga, atau lebih gambar harus dimuat (dan sering dimuat sebelumnya untuk hasil terbaik). Pelajari cara memasukkan semua status menjadi satu gambar membuat perubahan dinamis lebih cepat dan tidak memerlukan pramuat.
14.
Sudut Bulat jQuery
Banyak efek jQuery untuk sudut membulat dan lebih banyak pola.
15.
Tooltip termudah dan Pratinjau Gambar Menggunakan jQuery
Lihat 3 contoh penggunaan skrip pratinjau rollover jQuery. Skrip sederhana ini dapat diterapkan untuk berbagai tujuan.
16.
Ukuran Super - Latar Belakang Layar Penuh /
Slideshow
Plugin jQuery
Superzided adalah plugin jQuery yang mengubah ukuran gambar untuk mengisi browser sambil mempertahankan rasio dimensi gambar dan siklus Gambar / latar belakang melalui tayangan slide dengan transisi dan preloading.
17.
Hamparan PNG
Pernahkah Anda mengalami masalah dalam membuat situs dengan gambar yang diberikan oleh klien, hanya untuk mengetahui nanti setelah mereka memperbarui fotografi mereka tampilan dan nuansa asli tidak dipertahankan? Solusi ini melibatkan pembuatan hamparan PNG transparan yang dapat digunakan sebagai topeng / bingkai di sekitar JPEG atau GIF biasa. Dengan cara ini, instalasi CMS yang khas dapat dikonfigurasi sehingga pengguna dapat mengunggah foto tanpa harus khawatir menggunakan program grafis apa pun untuk menerapkan filter.
18.
BeZoom
Kelas berat
JQuery
Plugin Zoom
BeZoom adalah alternatif sederhana dan ringan untuk JQZoom. Lebih ringan dan lebih mudah digunakan.
19.
Menggunakan jQuery untuk Animasi Gambar Latar Belakang
Mainkan dengan jQuery dan ubah posisi gambar latar belakang untuk membuat jenis efek yang Anda cari. Ada artikel baru yang menjawab pertanyaan "Bagaimana cara menangani status aktif?" - Menangani Status Aktif untuk Latar Belakang Animasi jQuery.
20.
5 Cara Meriahkan Gambar Anda dengan CSS
Berikut ini beberapa trik sederhana untuk menambahkan rasa pada gambar hambar khas Anda. Menggunakan Photoshop untuk menata setiap gambar bisa jadi membosankan dan sulit dipertahankan dalam jangka panjang. Teknik CSS berikut ini akan membantu Anda meringankan rasa sakit itu.
21.
Bagaimana cara:
Diubah ukurannya
Gambar Latar
Pelajari cara menyiapkan gambar latar yang dapat diubah ukurannya dengan CSS. Anda memiliki 3 opsi untuk dipilih.
22.
Style Link Gambar Anda
Memberi tahu pengguna bahwa bagian tertentu dari situs web kami dimaksudkan untuk diklik paling baik dicapai melalui efek mouse over. Bagian "yang dapat diklik" tersebut tentu saja menyertakan gambar konten. Link Gambar adalah skrip yang memungkinkan Anda menerapkan gaya tambahan ke link gambar Anda.
23.
Beberapa Gambar Latar Belakang dengan CSS
Terkadang, lebih masuk akal untuk menggunakan gambar latar belakang daripada memasukkannya langsung ke halaman. Dan sementara setiap elemen - seperti tag tubuh Anda - hanya dapat menampung satu gambar latar belakang, mereka dapat diterapkan ke beberapa elemen.
24.
Gambar Perbatasan dengan CSS
Tutorial yang sangat mudah menunjukkan kepada Anda bagaimana menambahkan batas padat ke gambar menggunakan CSS.
25.
CSS Sprite tanpa Menggunakan Gambar Latar Belakang
Pelajari cara menerapkan efek hover tanpa banyak pengetahuan tentang sprite CSS.
