recently came across a really interesting article that showcased some of the sweet goodness that can be achieved using css3 – the end result being a really slick infobox with 3d ribbons, that uses no images at all.

The article was inspired by another similar post, written by piervix from PVMGarage. Both were great articles, but one thing that bugged me in both, was the need for additional presentational markup, which served no purpose to the actual content.

I then came across another awesome article (Multiple Backgrounds and Borders with CSS 2.1 – which I highly recommend you read) by one of my new favorite authors, Nicolas Gallagher. In the article he shows us that it’s actually been possible to implement multiple backgrounds since CSS 2.1 already, utilizing a combination of generated content and the :before and :after pseudo-elements.

It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.

Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS.

First Things First: Blocks Don’t Need 100% Width

When we understand the difference between block-level elements and inline elements, we’ll know that a block element (such as a <div>, <p>, or <ul>, to name a few) will, by default expand to fit the width of its containing, or parent, element (minus any margins it has or padding its parent has).

Most CSS developers understand this concept pretty well, but I thought it would be useful to point it out here as an introduction to explaining how percentages work when used on the width property.

Undoubtedly, the position property is one of the most useful tools that designers have in their CSS toolbox. However, there are a few concepts about positioning that might baffle beginners.

First, what is positioning?

When your browser opens a webpage, it starts rendering elements (divs, paragraphs, headings etc.) in the order they appear in the HTML markup of the page. Positioning is a natural way of organizing how the elements are displayed and an easy resolution to situations like overlaps. There are four types of positioning: static, relative, absolute and fixed.

Elements are statically positioned by default

The default positioning, which is implicitly applied to every element on the page, is static. Static positioning means that every element is positioned in the natural order it is added to the page. Block elements are displayed under other block elements, and inline elements are displayed next to other inline elements.

Relative positioning

Setting the positioning to relative does not by itself produce any noticeable difference in the way the element is displayed on the page. But you can now move it from its normal position with the top, left, bottom and right CSS properties. This comes really handy when dealing with situations in which you need to offset an element, but not anchor it to a specified position on the page.

Fonts on the Web

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.

There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use.

Further, even the most popular browsers support each of these technologies in widely varying degrees.

However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. It seems to be the current rockstar of the bunch, garnering all the attention and causing a number of sites to pop up offering both free and premium fonts in support of it.

This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.

This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS white-space property, and how each one can be used. I’ll do my best to avoid overly-technical jargon, but with this property, it’s not easy to explain without sounding overly-complex.

Some HTML Background

In (X)HTML, anytime you string together a bunch of spaces in your code, the actual page output in your browser will, by default, trim (or collapse) all those spaces down to a single space. This comes in handy, because it allows us to correctly indent and seperate the elements in our (X)HTML so it will be readable and maintainable — without creating extra unwanted space and line breaks in the browser output.

If you want to allow all space and line breaks to occur naturally, then you can use the big ugly cousin of the white-space property — the <pre> tag. All non-tag content inside of the <pre> tag will output virtually identically to what you have in the code. It will even cause a single line to push the boundaries of its parent if no explicit line breaks are used in the markup. So, while the default in HTML is to ignore multiple spaces and line breaks, you can override this using the <pre> tag.

(X)HTML also allows the use of the non-breaking space (&nbsp;). If you want to string together multiple spaces that you don’t want to collapse, you can use the non-breaking space. The older method of doing this involves using the <nobr> tag, but that tag is now deprecated, so it should not be used.

The white-space property is the cleaner CSS answer to the aforementioned (X)HTML methods of controlling white space.

Last week, I published a massive roundup of HTML5 resources, articles, tips and techniques, and it was a big hit within the design and development community.  Since HTML5 is only of the upgrades that is being rolled out, I thought it would be appropriate and helpful to assemble a set of CSS3 resources.

This post serves as the ultimate CSS3 toolbox.  You’ll start with a few introductory articles, then jump right in with tutorials, then see what’s possible with inspiration and finally some more resources.

If you have any resources to add to the list, please, let us know in the comments!

Introduction:

Introduction to CSS3 – What Is It?

An awesome 6-part introduction to what CSS3, why it matters, and why you should care.

You might be familiar with the plugin jQuery Dock which allows you to create a menu like Apple Dock. With this tut, you will learn how to create a similar menu with bubble effect by using only pure CSS. The tutorial includes two methods: CSS sprites (basic) and image swapping (advanced).

Collection of following useful CSS3 techniques

• Bubble Effect with CSS
• Pure CSS Speech Bubbles
• SlickMap CSS — A Visual Sitemapping Tool
• Perfect Full Page Background Image
• Accordion Using Only CSS
• Social Media Icons in Pure CSS
• Pure Css Data Chart
• CSS Bar Charts
• Pure Css Line Graph
• Pure CSS Animated Progress Bar
• CSS Navigation: No JavaScript, jQuery or Image Required
• Add a “Loading” Icon to Larger Images
• Super Awesome Buttons
• CSS-Only Tabbed Area
• Clean and Pure CSS FORM Design
• Pure CSS Vignette
• Pure CSS Scrollable Table with Fixed Header
• Beautiful Dropdown Blogroll Without JavaScript
• Pure CSS Sticky Footer
• “Checkmark” Your Visited Links with Pure CSS
• Sexy Bookmark Effect Using Pure CSS
• Text Rotation with CSS
• CSS Sprite Powered Menu
• Curtis CSS Typeface
• Elegant Drop Menu with CSS Only
• Snazzy Hover Effects Using CSS
• CSS Image Map
• Pure CSS Timeline
• Valid Non-Javascript Lightbox
• Create a Content Slider Using Pure CSS
• A Stationary Logo That Changes on Page Scroll

One of the great new features of CSS3, is its ability to have rounded borders, which if used correctly will look much better than using images! Whilst not all web browsers currently support rounded corners, all of the newer, popular browsers do. Today I’m going to show you how to create CSS based rounded content boxes on your website!So, why use CSS to make rounded corners, instead of the traditional image method? Well, there’s a number of reasons:

• Lower overheads due to no images being loaded
• Very easy to change colors or use a CSS style switcher to instantly change the colors of those rounded boxes
• Supported in CSS3, so is a web-standard that will be supported by modern browsers
• Allows your rounded boxes to be flexible. They can be enlarged (width and height) without causing the corners to become distorted or misshaped.

Supported Browsers

CSS3 rounded corners are supported in most modern browsers. A few browsers adopted their own method of doing rounded corners before it became a standard, so the examples below will contain CSS code that is compatible with these individual browsers. Overall, its possible to do CSS based rounded corners in the following browsers:

• Firefox (3+)
• Safari (3+)
• Internet Explorer 6 (buggy)
• Internet Explorer 7
• Internet Explorer 8
• Google Chrome (all)
• KHTML Browsers (e.g Konqueror)
• Opera (10.5+)

Ever wondered how a particular effect was achieved in a web design, and, after zooming in several clicks, you found that the author added several subtle shadows, borders, gradients, etc? In the past, this was achieved simply by slicing out an image, and setting it as a background of some element. Luckily, with CSS3, we can be afforded much more flexibility. Now, while the code for such a simple effect might be a bit tedious, it’s well worth it, and that’s what we’ll review in today’s written and video quick tip!

It’s amazing that something this simple requires that much code, but, it’s not too rough, and can easily be abstracted away to a snippet for future use.

Steps involved :

1. Create the Mark-up
2. Create the Canvas
3. Styling the Box
4. Rounded Corners
5. Border Colors
6. Compensating for Webkit
7. CSS Background Gradients

Since Last some days we are writing articles on CSS3. And today we will learn here to create animated navigation menu with css3. Here will try to create animated menu with css3 and also will create the same animation using jQuery. So lets start..

Check Out Demo First

So now we assume that we guys have checked the demo. Now we know what we really going to create so here first of all we need HTML documentation. We need here unordered list and will have two div elements with different attributes in li tags. We will use two div elements in li tags because we will separate them with margin in our css codes later with setting ul tags overflow to hidden and when as soon as user hover over li tag we will move the displayed div element to top to show the hidden element. Anyways lets first code HTML codes. Then we will go to css coding.

Now CSS.. Explanation is in codes only as comments

Set Overflow of UL tag as hidden so when the slide animation will start div up will hide and div slide will shown

Here we will use CSS3 Gradient to style menu background, Text shadow, Box shadow and CSS3 Animation for animation purpose.