background preloader

CSS Decorative Gallery

CSS Decorative Gallery
Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack Look and Feel

http://webdesignerwall.com/tutorials/css-decorative-gallery

Related:  HTML - CSS - PHPPrincipes

Perfect Full Page Background Image By Chris Coyier On This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it: Spacegallery - jQuery plugin About Again another image gallery. Click on the images bellow to see it in action. Download spacegallery.zip (205 kb): jQuery, Javscript files, CSS files, images, examples and instructions.

Video Screencasts #130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. 15 jQuery Plugins to Create Stunning Image Zoom Effects With jQuery image zoom effect plugins, you can create amazing image zoom effects with minimal coding effort. This is very useful if you have large images that will otherwise take up too much space on your web pages. With a jQuery zoom script you can keep the image smaller and allow visitors to zoom in as needed. Using jQuery zoom image effects is an elegant way to show details e.g, in photographs, art or designs. 100 Great CSS Menu Tutorials Aug 23 2011 Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

HOW TO: Get Started with Less Framework The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. For the past few years, CSS grid systems have become increasingly popular with web designers. Thanks to efforts like Nathan Smith's 960.gs, designing with a grid is less complicated, and better looking sites can be crafted with ease. One of my favorite CSS grid systems of late is Less Framework. Now in its fourth revision, Less Framework takes the power of a CSS grid system and adds in support for CSS media queries to support multiple design and typography layouts.

Labs - GreyBox A pop-up window that doesn't suck. Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio.

Web-kreation - 100 + 1 FREE photo/image galleries (AJAX, Flash, PHP) This post is an attempt to collect all the major Flash/AJAX/PHP photo galleries in jut one place. Most of them are entirely free of charge. Some, however, have some limitations to their free versions but is should not stop you from trying them. 55 - CSS3 Animation Effects Demos I created 55 CSS3 animation demos for your website/blog etc. Using CSS3 keyframe property, you can create cool animation effects without using any JavaScript frameworks, CSS3 & HTML5 is helping to solve many web problems in a simple way. For any help visit my website : www.pawanmall.net

Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative Semantic CSS3 Lightboxes The rise of jQuery, MooTools, and JavaScript frameworks has given many web designers a new lease on life, adding more unique functionality into their sites. Most notably among the various cool and interesting features you can find being injected into a design is the humble lightbox (modal window). If you’ve ever come across a link or image which — upon clicking — increases in size and where the rest of the screen gets "shaded" to focus on the content, you’ll know what I’m talking about. This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all. Sound like fun?

Related: