A l'hora de millorar imatges podem optar per fer-ho amb Photoshop i després muntar a la pàgina web o també podem optar per l'opció B: fer-ho amb les tècniques HTML, CSS i Javascript que estan disponibles.
Després del salt queden moltes tècniques per millorar les imatges, gairebé totes elles realitzades amb jQuery com a base principal o amb CSS3 aprofitant els últims estàndards web, tot i que us recordo que en aquest cas perdem la compatibilitat amb alguns navegadors.
Estan en anglès però es enxampen el vol, promès :)
font | 1stWD
CSS3 Rounded Image With jQuery
Learn to wrap a span tag around the image element to ACHIEVE rounded images which will be displayed right in all modern navegadors.
2.
Multiple backgrounds and Borders with CSS 2.1
Learn how to use CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and múltiple complex borders for a single HTML element.
3.
Quick Tip: Multiple Borders with Simple CSS
Quick screencast es mostren els you how to ACHIEVE múltiple borders with simple CSS that way adding more depth to your designs. Much simplier versio of previous tutorial.
4.
Multiple Borders on Dynamically Sized Elements with CSS2
Third version of Nicolas Gallagher showing you what to do if you do not the size of element.
5.
Have Fun w / Borders - Beveled, Pressed, & More!
Learn how to ACHIEVE pressed effect with CSS and some simple border style tricks to get various effects.
6.
Polaroids with CSS3
Learn how to use some awesome CSS2 and CSS3 to tornen a otherwise unassuming llista de imatges into a full-blown set de Polaroid pictures.
7.
Perfect Full Page Background Image
Learn how to add background image with CSS that Fills entire page with image, no white space, fiscals image as needed, does not causi Scrollbars and much more.
8.
CSS3 Box Shadow and Image Hover Effects
Explori a new way of adding drop shadow effects just by editing a style sheet.
9.
Fancy Thumbnail Hover Effect w / jQuery
Achieve neat flash-style effect with CSS and jQuery.
10.
How To Create Simple CSS Image Rollover Effect
In this tutorial you are going to learn how to create simple CSS image rollover effect with basic HTML and CSS styling.
11.
Floatutorial
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. Check out 4 tutorials dedicated to image floating.
12.
Snazzy Hover Effects Using CSS
In this tutorial, you will be going over creating flexible advanced hover techniques using CSS2.1 properties.
13.
Fast rollovers Without
precàrrega
When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). Learn how to put all states in one image makes dynamic changes faster and requires no preload.
14.
jQuery Racons arrodonits
Lots of jQuery effects for rounded corners and molt more patterns.
15.
Easiest Tooltip and Image Preview Using jQuery
Veure març examples of using jQuery rollover preview script. This simple script can be applied for a variety of purposes.
16.
Supersized - Full Screen Background /
Presentació
Connector jQuery
Superzided is a jQuery plugin that resizes images to fill navegador while maintaining image dimensió ràtio and cycles Images / backgrounds via slideshow with transitions and preloading.
17.
PNG Overlay
Have you ever run into the problem of creating a site with pictures given by the client, only to find later after they update their photography the original look and feel is not retained? This solution involves creating a transparent PNG superposició which can be used as a mask / frame around regular JPEG or GIF. This way, a typical CMS installation can be configured so users can upload photos without having to worry about using any graphics program to apply filters.
18.
BeZoom
Pes Pesant
JQuery
Connector de zoom
BeZoom és a simple and lightweight alternative for JQZoom. It 's lighter and it' s easier to use.
19.
Using jQuery for Background Image Animations
Play with jQuery and change the position of the background image to create the type of effect you'r looking for. There 'sa new article answering the "How do I handle activi states?" - Handling Active State for jQuery Animated Backgrounds.
20.
5 Ways to Spice up Your Images with CSS
Here are a few simple tricks to add some flavor to your typical Bland images. Using Photoshop to style each image can be tedious and difficult to maintain in the long run. These following CSS techniques will help you ease that pain.
21.
Com:
Redimensionable
Imatge de fons
Learn how to set up Resizeable background image with CSS. Heu 3 options to choose from.
22.
Style Your Image Links
Letting users know that particular section of our website is Meant to be clicked on is best achieved through ratolí over effect. Those "clickable" sections certainly include content images. Image Link is a script that Enables you to apply additional styling to your image links.
23.
Multiple Background Images with CSS
At times, it makes more sense to use background images than to insert them directly into the page. And while each element - like your body tag - can hold only one background image, they can be applied to several elements.
24.
Image Borders with CSS
Really easy tutorial es mostren els you how to add solid border to images using CSS.
25.
CSS Sprites without Using Background Imatges
Learn how to apply hover effect with lot of knowledge about CSS sprites.
