CSS3

CSS level 3 is currently under development. The W3C maintains a CSS3 progress report. CSS3 is modularized and will consist of several separate recommendations. The W3C CSS3 Roadmap provides a summary and introduction.

Because not all browsers comply identically with CSS code, a coding technique known as a CSS filter can be used to show or hide parts of the CSS to different browsers, either by exploiting CSS-handling quirks or bugs in the browser, or by taking advantage of lack of support for parts of the CSS specifications.Using CSS filters, some designers have gone as far as delivering entirely different CSS to certain browsers in order to ensure that designs are rendered as expected.

Because very early web browsers were either completely incapable of handling CSS, or render CSS very poorly, designers today often routinely use CSS filters that completely prevent these browsers from accessing any of the CSS. Internet Explorer support for CSS began with IE 3.0 and increased progressively with each version. By 2008, the first Beta of Internet Explorer 8 offered support for CSS 2.1 in its best web standards mode.

Introductory articles and related resources.

The Power of HTML 5 and CSS 3

Get Started with CSS 3

Accessibility Features of CSS

Introduction to CSS3

A Marriage Made in Heaven? HTML 5 & CSS 3

Steve Smith on HTML5 and CSS3

CSS Advanced Layout Module

Six Questions: Eric Meyer on CSS3

CSS3 Opacity: Transparency of an Element in CSS

The css3 property opacity allows to change the transparency of an element. The property opacity needs a value in between 0.0 (equal to 100% transparency) and 1.0 (no transparency).

3 Gifts for User Interface in CSS3

Box-sizing let’s you change the behavior of the browser in calculating the width of an element. By default, box-sizing is set to content-box. With that set, it calculates width and height as specified by CSS 2.1, adding the border-width and border-height and the padding to the size of the box.

Text-shadow, Photoshop like effects using CSS

This produces the following text with a shadow 2px right and below of the text, which blurs for 2px: Users of Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab should see a grey drop-shadow behind this paragraph.

CSS3 Multiple Columns

Use CSS3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column.

Multiple Backgrounds (CSS3)

<!– /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} –>

Now that Safari announced there support of CSS3‘s multiple backgrounds developers can have a taste of the future. In this article I will describe how multiple backgrounds work, how you can profit from them and how to do the fix for browsers who don’t support it.

Box-shadow: shadow effect on elements in css3

Thanks to the different values of the box-shadow, we can specify that the shadow is positioned to the left/right or top/bottom on the outside of the element, its gradient of blur and its color.

Rounded Corner Boxes the CSS3 Way

The technique is fiendishly simple, and I think we’ll all be a lot better off once the W3C stop arguing over the details and allow browser vendors to get on and provide the tools we need to build better websites.

Border-image: using images for your border

Another exciting new border feature of CSS3 is the property border image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties border image and border corner image..

CSS3 Borders

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

CSS3 Colors

Super Awesome Buttons with CSS3 and RGBA

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

CSS Template Layout

The “Holy Grail” layout. Flexible content but fixed-width sidebars.

CSS 3: RGBA

Some parts of CSS 3 are implemented in some browsers, and you can use them today. One of the features that particularly interests me is RGBA colour which still has limited support, but is still worth looking at.

CSS3 Embedding a Font Face

Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face!

Creating a polaroid photo viewer with CSS3 and jQuery

By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

CSS3 Corporate Fun

The pushing of the buttons is simulated by adjusting the size of the top and bottom border. Also, top-level lists have a bigger border (“bevel”) in order to improve the understanding of hierarchy.

CSS3 Links Creation and Usage

Links are very vital for any web page to navigate through the site and so is also with CSS3. In CSS3 it is possible to handle links even more powerful and effectively as it is possible to handle various states of links which are link, visited, hover, and active states.

Tooltips with CSS3

Up until now, there were a few options in existence; ugly Javascript-based methods, or solutions that use blank anchor tags (for IE6 compatibility). Another possibility is to ignore IE6 altogether and make use of the hover pseudo class in conjunction with the parent element that contains the tooltip text.

Styling Forms with Attribute Selectors

Attribute selectors have been a part of the World Wide Web Consortium’s CSS specification since version 2 was finalised – that was in 1998. Sadly, support for attribute selectors hasn’t been widely available in popular browsers until very recently.

Using CSS 3 selectors to apply link icons

The first list item uses the general attribute selector to look for any tags with an accesskey attribute and display an icon to alert users to its presence:

Simple CSS3 rounded corners with support for IE

Rounded corners are a common element of web designs. Unfortunately, they have been frustratingly difficult to express in clean CSS / HTML. The long term solution is CSS3’s border-radius property, which is nicely supported in the current versions of Safari and Firefox.

The Shadow effect in CSS3

Shadow in website design is something that can be achieved by using CSS and images, to achieve shadow in CSS2 you would use images and positioning, it can be achieved but it usually means that you have to create multiple divs.

Liquid faux columns with background-size

Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns. This is a good technique, but the drawback is that it only works with fixed-width columns.

CSS3 Wrappping

Wrapping is a vital property for proper display of contents in web pages for if wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless

CSS text shadows and background sizing

Together both CSS properties can add unique twists to everyday Web design with minimal effort. In this article I will explore both of these, showing how they work with some simple examples

A mock-up interface using CSS3 Colour

I recently posted a preview of the CSS3 colour module on my own blog, but avoided using any actual examples. This was because of the things that have been implemented, the true power isn’t really seen using a simple example.

Making an image gallery with :target

One of the selectors new to CSS3 is the :target pseudo-class, which can be used to apply rules to an element with a fragment identifier; that is, an anchor name or an id. For example, let’s assume you have a section heading with an id of ‘chapter_2′:

Stay on :target

In this article, I want to introduce you to a really powerful CSS3 pseudo selector called :target.

<!– /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} a:link, span.MsoHyperlink {color:blue; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {color:purple; text-decoration:underline; text-underline:single;} p {mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} –>

Sign up for 642-165 training program and get some of amazing CSS3 Tutorials & Resources to learn graphic designing. Become expert graphic designer using 70-291 guide and 642-524 live demos.

Semantic code: put more in, get more out

IE7 is gaining market share and we can start to use more CSS3 selectors in our day to day code. Because of this, it’s worth a quick reminder that the more semantic we make our (X)HTML, the easier to implement the selectors will be.

Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0)