Create a Lightbox effect only with CSS – no javascript needed

You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.

When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.

Courtesy: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

You tube video / menu appears on top, everything else behind

Lightbox / Thickbox / Menu disappears behind flash you tube video [fixed]

* Straight after the Object tag of your video code, place the following snippet:
<param name="WMode" value="transparent"></param>
* Just before the type=”application/x-shockwave-flash” place the following code:
wmode="transparent"

Courtesy: http://www.voodish.co.uk/articles/lightbox-thickbox-menu-disappears-behind-flash-you-tube-video-fixed/

CSS Image Maps: A Beginner’s Guide

While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp.

In this tutorial, we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a "tooltip" like popup.

http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

Ajax Tabs Examples

Nesting Ajax Tabs: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm

50+ Nice Clean CSS Tab-Based Navigation Scripts: http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/

Animated progress/loading bar upon form submit - Javascript

http://www.ryantetek.com/2009/06/animated-progress-loading-bar-upon-form-submit-javascript/

download some cool,customizable and free loading icons at http://www.ajaxload.info

CSS Message Boxes for different message types

http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx

5 Must Read Presentations about CSS Coding

If you are looking for documentation to improve your CSS skills I suggest you to take a look at the following 5 must read presentations about CSS coding. The following presentations help you learn how to write efficient and maintainable CSS code, understand secrets of CSS inheritance, line-height and CSS System approach (a practical way to write high-quality, reusable CSS code with a shared vocabulary for developers), learn Object Oriented CSS in order to develop high performance web applications and websites. Good reading!

http://woorkup.com/2009/10/31/5-must-read-presentations-about-css-coding/

ecsstender - Take control of your CSS

Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.

http://ecsstender.org/

Introduction to CSS3 – Part 1: What Is It?

This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2. We will be starting from the very beginning – taking you from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it

Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/

50 Fresh Useful Icon Sets For Your Next Design

Beautiful and free icon sets always come in handy. Used properly and moderately, icons can be helpful to provide users with memorable metaphors and illustrations that would provide a visual support for otherwise unspectacular text blocks. For instance, in web-applications memorable icons can be very helpful as they can make it easier for users to memorize how to perform some specific task or where to find some specific functions.

This large collection of recently released icon sets is supposed to help designers improve their designs on their web-sites and in web-applications. All icon sets are free. Please read the license agreements carefully before using the icons — the license can change from time to time. The icons provided below may turn out to be useful and helpful in corporate designs, portfolios, blogs, magazines and in Web-applications. Please feel free to suggest more icon sets in the comments to this post.

http://www.smashingmagazine.com/2009/06/07/50-fresh-useful-icon-sets-for-your-next-design/

Coding A HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/