25 Beautiful Image Styling Tutorials With CSS,jQuery

Posted in Web Design • Posted on 15 Comments

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!

1. 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 browsers.

Css-3-rounded-image-with-jquery-image-hover-effects-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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 multiple complex borders for a single HTML element.

Multiple-backgrounds-borders-css-2-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

3. Quick Tip: Multiple Borders with Simple CSS

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.

Quick-tip-multiple-borders-with-simple-css-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

 

 

4. Multiple Borders on Dynamically Sized Elements with CSS2

Third version of Nicolas Gallagher showing you what to do if you don’t the size of element.

Multiple-borders-dynamically-sized-elements-with-css-2-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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.

Have-fun-with-borders-beveled-pressed-more-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

6. Polaroids with CSS3

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.

Polaroids-css-3-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

7. Perfect Full Page Background Image

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.

Perfect-full-page-background-image-hover-effects-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

8. CSS3 Box Shadow and Image Hover Effects

Explore a new way of adding drop shadow effects just by editing a style sheet.

Css-3-box-shadow-image-hover-effects-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

9. Fancy Thumbnail Hover Effect w/ jQuery

Achieve neat flash-style effect with CSS and jQuery.

Fancy-thumbnail-hover-effect-with-jquery-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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.

How-to-create-simple-css-image-rollover-effect-image-hover-effects-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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.

Floatutorial-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

12. Snazzy Hover Effects Using CSS

In this tutorial, you will be going over creating flexible advanced hover techniques using CSS2.1 properties.

Snazzy-hover-effect-using-css-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

13. Fast Rollovers Without Preload

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.

Fast-rollovers-without-preload-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

14. jQuery Rounded Corners

Lots of jQuery effects for rounded corners and much more patterns.

Rounded-corners-jquery-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

15. Easiest Tooltip and Image Preview Using jQuery

See 3 examples of using jQuery rollover preview script. This simple script can be applied for a variety of purposes.

Easiest-tooltip-preview-using-jquery-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

16. Supersized – Full Screen Background/Slideshow

jQuery Plugin

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.

Supersized-full-screen-background-slideshow-jwuery-plugin-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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 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.

Png-overlay-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

18. BeZoom Lighweight JQuery Zoom Plugin

BeZoom is a simple and lightweight alternative for JQZoom. It’s lighter and it’s easier to use.

Bezoom-lightweight-jquery-zoom-plugin-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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’re looking for. There’s a new article answering the “How do I handle active states?” – Handling Active State for jQuery Animated Backgrounds.

Using-jquery-for-background-image-animations-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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.

Ways-to-spice-up-your-images-with-css-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

21. How To: Resizeable Background Image

Learn how to set up resizeable background image with CSS. You have 3 options to choose from.

How-to-resizeable-background-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

22. Style Your Image Links

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.

Style-your-image-links-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

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.

Multiple-background-images-with-css-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

24. Image Borders with CSS

Really easy tutorial showing you how to add solid border to images using CSS.

Image-borders-with-css-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

25. CSS Sprites without Using Background Images

Learn how to apply hover effect without lot of knowledge about CSS sprites.

Css-sprites-without-using-background-images-image-styling-backgrounds-appearance-inspiration-add-shadow-borders-make-images-stand-out

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

15 Comments Best Comments First
  • Ramesh Vishwakarma

    Saturday, July 23rd, 2011 14:36

    11

    Thanks dude nice collection I am going to use one of theme.

    +14
  • Walter

    Sunday, December 18th, 2011 07:37

    13

    JQuery always fascinating me thanks for great tips. I will try to use this

    +13
  • Toyin

    Sunday, August 1st, 2010 11:29

    2

    Great article! This is really an eye opener for me. Now I know that I can style Images and Image links too. Thanks for this article.

    +7
  • Zeeshan Rasool

    Tuesday, August 3rd, 2010 17:14

    4

    Awesome collection, specially jquery rounded corner. Thanks for such a nice collection

    +3
  • Webster

    Monday, August 9th, 2010 23:40

    7

    Nice, i was looking for something like this nice article thanks Daniels

    -2
  • Suneel

    Thursday, August 5th, 2010 08:23

    6

    Awesome collection to share and bookmark.

    Thanks for taking time and posting this for us.

    Cheers.

    -2
  • Nicolas Gallagher

    Saturday, July 31st, 2010 13:40

    1

    Thanks for linking to one of my articles.

    However, articles 3 and 4 are far more limited versions of one of the techniques I wrote about. Article 3’s implementation doesn’t work for elements that do not have explicitly stated dimensions and makes content links unclickable; Article 4’s implementation also makes content links unclickable and reduces the flexibility of the border’s size and positioning.

    I only mention this to avoid people using code that has significant limitations that can have an impact on the flexibility afforded to the developer and the experience conferred to the user.

    -2
  • Katthren

    Thursday, June 2nd, 2011 13:19

    9

    Thank you for the blog post. Johnson and I are actually saving to buy a new publication on this issue and your writing has made all of us to save all of our money. Your thoughts really solved all our questions. In fact, greater than what we had known prior to when we ran into your wonderful blog. My spouse and i no longer nurture doubts and also a troubled mind because you have attended to our needs here. Thanks

    -2
  • Hanibaal

    Wednesday, August 4th, 2010 03:31

    5

    Great Collection.. thanks
    Now I got to pick one for my project.. ummm.. might do a combination…
    certainly inspiring :)

    -3
  • Sara

    Tuesday, June 7th, 2011 16:16

    10

    All these are good but iam trying to find a flexible border which will work both horizontally and vertically. border of my images is cluttered. paper like effect. I can either make it flexible horizontally or vertically but not in both directions. is there any solution?

    -5
  • esranull

    Monday, August 2nd, 2010 23:31

    3

    very nice list thanks a lot

    -8
  • David

    Tuesday, January 10th, 2012 18:58

    14

    Does anyone know of a good way to use a drop shadow effect with jquery instead of CSS3? Sadly, I have to program for IE (in addition to other browsers). Cheers for the article!

    -11
  • Matt

    Friday, August 19th, 2011 13:41

    12

    Some nice techniques here. I am always looking for new ways to improve our own company and also customer websites. I prefer to do most things in CSS3 / HTML markup if possible, but have recently started using jQuery, SQL and javascript for calculation modules on our company website (www.ndb-europe.co.uk). Websites like this one really help get the creative juices flowing – keep up the good work.

    -11
  • Alex

    Wednesday, December 29th, 2010 22:27

    8

    Excellent, just the list I was looking for. Thanks for posting!

    -12
  • Sam

    Tuesday, April 3rd, 2012 10:16

    15

    Jquery is the best tool in web history!!! Thank god no more flash animations.

    -20
  • Sam

    Tuesday, April 3rd, 2012 10:16

    15

    Jquery is the best tool in web history!!! Thank god no more flash animations.

    -20
  • David

    Tuesday, January 10th, 2012 18:58

    14

    Does anyone know of a good way to use a drop shadow effect with jquery instead of CSS3? Sadly, I have to program for IE (in addition to other browsers). Cheers for the article!

    -11
  • Walter

    Sunday, December 18th, 2011 07:37

    13

    JQuery always fascinating me thanks for great tips. I will try to use this

    +13
  • Matt

    Friday, August 19th, 2011 13:41

    12

    Some nice techniques here. I am always looking for new ways to improve our own company and also customer websites. I prefer to do most things in CSS3 / HTML markup if possible, but have recently started using jQuery, SQL and javascript for calculation modules on our company website (www.ndb-europe.co.uk). Websites like this one really help get the creative juices flowing – keep up the good work.

    -11
  • Ramesh Vishwakarma

    Saturday, July 23rd, 2011 14:36

    11

    Thanks dude nice collection I am going to use one of theme.

    +14
  • Sara

    Tuesday, June 7th, 2011 16:16

    10

    All these are good but iam trying to find a flexible border which will work both horizontally and vertically. border of my images is cluttered. paper like effect. I can either make it flexible horizontally or vertically but not in both directions. is there any solution?

    -5
  • Katthren

    Thursday, June 2nd, 2011 13:19

    9

    Thank you for the blog post. Johnson and I are actually saving to buy a new publication on this issue and your writing has made all of us to save all of our money. Your thoughts really solved all our questions. In fact, greater than what we had known prior to when we ran into your wonderful blog. My spouse and i no longer nurture doubts and also a troubled mind because you have attended to our needs here. Thanks

    -2
  • Alex

    Wednesday, December 29th, 2010 22:27

    8

    Excellent, just the list I was looking for. Thanks for posting!

    -12
  • Webster

    Monday, August 9th, 2010 23:40

    7

    Nice, i was looking for something like this nice article thanks Daniels

    -2
  • Suneel

    Thursday, August 5th, 2010 08:23

    6

    Awesome collection to share and bookmark.

    Thanks for taking time and posting this for us.

    Cheers.

    -2
  • Hanibaal

    Wednesday, August 4th, 2010 03:31

    5

    Great Collection.. thanks
    Now I got to pick one for my project.. ummm.. might do a combination…
    certainly inspiring :)

    -3
  • Zeeshan Rasool

    Tuesday, August 3rd, 2010 17:14

    4

    Awesome collection, specially jquery rounded corner. Thanks for such a nice collection

    +3
  • esranull

    Monday, August 2nd, 2010 23:31

    3

    very nice list thanks a lot

    -8
  • Toyin

    Sunday, August 1st, 2010 11:29

    2

    Great article! This is really an eye opener for me. Now I know that I can style Images and Image links too. Thanks for this article.

    +7
  • Nicolas Gallagher

    Saturday, July 31st, 2010 13:40

    1

    Thanks for linking to one of my articles.

    However, articles 3 and 4 are far more limited versions of one of the techniques I wrote about. Article 3’s implementation doesn’t work for elements that do not have explicitly stated dimensions and makes content links unclickable; Article 4’s implementation also makes content links unclickable and reduces the flexibility of the border’s size and positioning.

    I only mention this to avoid people using code that has significant limitations that can have an impact on the flexibility afforded to the developer and the experience conferred to the user.

    -2

Comments are closed.

54.234.59.94 - unknown - unknown - US