Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
29 May

Decorate Your Images and Photos with CSS

  • Gallery, Information
  • Leave a Comment

Nick La has made another great great tutorial for us. Nick La shows us how to decorate our images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). To change the look and feel, simply edit the CSS specifications of the span element. To show how flexible it is, Nick La has created 15 different styles as examples for us (notice the HTML markup is same).

Image Decoration

Source: CSS Decorative Gallery

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
How to Create CSS3 Rounded Image with jQuery

How to Create CSS3 Rounded Image with jQuery

Turns Select Element into User Friendly Graphical Interface

Turns Select Element into User Friendly Graphical Interface

How Well Does Your Browser Support HTML5?

How Well Does Your Browser Support HTML5?

Advanced CSS Menu from WebDesignerWall

Advanced CSS Menu from WebDesignerWall

Zooming Images Easily with jQuery Zoom Plugin

Zooming Images Easily with jQuery Zoom Plugin

Lightview Overlay Your Images with Style

Lightview Overlay Your Images with Style

Comments
  • http://antoine.olbrechts.eu/ Antoine

    Wow, great stuff, thanks a lot for the share !!

  • http://www.brainbackup.net Greg

    I like the idea of using this for artistic purposes. I did something similar about a year ago when I developed http://www.aitginc.com. I overlayed different logos on the products depending on which product line they were in. Connecting this concept with a database can be very powerful. Anyway, I like his designs.

  • http://davidcarreira.com D. Carreira

    Another great tutorial for Nick!

    Thanks for sharing this, David Carreira

  • http://www.latitudv.com Santiago

    Nice alternative for quick photo editing…

  • http://snapshark.co.uk Jake

    Wow, this is awesome!

    Webdesignerwall do it again!

  • MASSO

    WOAH THIS MAN IS THE CSS DESIGN GOD!
    GREAT ARTISTIC TOUCH

  • http://photoshop-dersi.blogspot.com grafik tasarim

    css layer examples / properties and layer attributes
    http://css-lessons.ucoz.com/css-layer-properties.htm

  • http://www.fedmich.com fedmich

    Very nice and easy to implement.
    Thanks for sharing

  • http://coachflash.com Coach

    Knocks my socks off!

  • jackiecookie

    Thank you!
    Beautiful and smart.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Make FullScreen Page Transitions with CSS
  • Super Smooth CSS Transitions for jQuery
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework215
  • Hosting13
  • Information239
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA