Recently I wrote article about post thumbnail and you saw some great examples of image styling. As I wrote there, neat styled images can attract more visitors and you will be more pleasant with them yourself too.
You don't have to always use Photoshop to style your images. Some cool effects can be achieved trough CSS, jQuery etc too and I strongly suggest you to continue reading to find out how to do it!
Learn to wrap a span tag around the image element to achieve rounded images which will be displayed right in all modern browsers.
Learn how to use CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element.
Quick screencast showing you how to achieve multiple borders with simple CSS that way adding more depth to your designs. Much simplier version of previous tutorial.
Third version of Nicolas Gallagher showing you what to do if you don't the size of element.
Learn how to achieve pressed effect with CSS and some simple border style tricks to get various effects.
Learn how to use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of Polaroid pictures.
Learn how to add background image with CSS that fills entire page with image, no white space, scales image as needed, does not cause scrollbars and much more.
Explore a new way of adding drop shadow effects just by editing a style sheet.
Achieve neat flash-style effect with CSS and jQuery.
In this tutorial you are going to learn how to create simple CSS image rollover effect with basic HTML and CSS styling.
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.
In this tutorial, you will be going over creating flexible advanced hover techniques using CSS2.1 properties.
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 into one image makes dynamic changes faster and requires no preload.
Lots of jQuery effects for rounded corners and much more patterns.
See 3 examples of using jQuery rollover preview script. This simple script can be applied for a variety of purposes.
Superzided is a jQuery plugin that resizes images to fill browser while maintaining image dimension ratio and cycles Images/backgrounds via slideshow with transitions and preloading.
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 overlay 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.
BeZoom is a simple and lightweight alternative for JQZoom. It's lighter and it's easier to use.
Play with jQuery and change the position of the background image to create the type of effect you're looking for. There's a new article answering the "How do I handle active states?” – Handling Active State for jQuery Animated Backgrounds.
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.
Learn how to set up resizeable background image with CSS. You have 3 options to choose from.
Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse 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.
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.
Really easy tutorial showing you how to add solid border to images using CSS.
Learn how to apply hover effect without lot of knowledge about CSS sprites.
Comments (0)
Post a Comment