We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn’t make sense to use CSS3 today. Yes, Internet Explorer doesn’t support most CSS3 properties. And yes, CSS3 vendor prefixes are bad for maintainability (and this is why we recommend extracting vendor prefixes in a separate CSS3 file).
But it’s OK to accept that Web is a dynamic medium, and it’s OK to create rich, interactive, beautiful designs for those who are already using a modern browser or will be using one soon. It just doesn’t make sense to keep looking back, beiDang afraid of looking forward and therefore avoid experimenting and learning about new CSS3 properties today. And this is why we keep publishing articles about CSS3.
You may be interested in the following related articles:
In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 and Co.
- Take Your Design To The Next Level With CSS32
This article covers the essential of what you need to know about CSS3 with examples and useful links.
- CSS3 Solutions for Internet Explorer3
This articles shows a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).
What’s Possible With CSS3? Link
Let’s start with a review of some truly remarkable design techniques and experiments that show what can be done with a bit of coding, patience and creativity by using simple CSS3 properties.
Pure CSS3 Page Flip Effect4
Create a Vibrant Digital Poster Design with CSS36
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.
CSS3 Leopard-style Stacks
Fun With CSS Gradients14
This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.
Creating a Realistic Looking Button with CSS3
“I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3.”
Turn on the light! Works with Webkit and Firefox.
Pure CSS3 Animated AT-AT Walker from Star Wars
In this article you;kk walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. The author starts off by reviewing some CSS3 properties that made this animation possible. Then, he follows up with a list of the sections required to construct the AT-AT and the CSS3 code to move each section.
Pure CSS Icons
An experiment by Zander Martineau. with a large scoop of border-radius, Zander created various ‘common’ icons that could be used in your web apps.
Create a Content Slider Using Pure CSS24
Sexy Tooltips with Just CSS26
Creating a Polaroid photo viewer with CSS3 and jQuery28
This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.
Animated Photoshop selection using CSS330
When part of an image is selected in Photoshop, the area is highlighted by an animated dashed line. Matthew James Taylor figured out a way to get exactly the same effect using CSS3.
CSS3 Dropdown Menu34
A multi-level dropdown menu that was created using
text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
Contextual Slideout Tips With jQuery and CSS338
By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips.
Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius 40
Learning CSS3 Properties Link
This section provides you with a general overview of the introductory articles about CSS3. This is a nice starting point to learn what CSS3 is, which properties it has and how designers apply them to web designs.
Introduction to CSS344
A great series of articles by David Appleyard which covers most new features of CSS3 including borders, text effects, user interface features, multiple columns and backgrounds. The series also contains many examples and code snippets. Very useful.
CSS3 Examples and Best Practices46
The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. Check out my previous post on “CSS3 Animation Demos” to see the things that you can do with it. However, don’t get too excited so soon because it is not fully supported by all browsers yet. But this doesn’t mean you shouldn’t use it at all. So, when should you use CSS3 new features? Well, continue on this post to see some excellent examples.
CSS of the Future: How CSS3 can Optimize Design 48
The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.
Practical Uses of CSS350
A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.
CSS3 makes a designer’s work easier because they’re able to spend less time hacking their CSS and HTML code to work in IE and more time crafting their design. It is the future of web design and can be used today. This article will hopefully show you to care a little less about making everything pixel perfect in IE. It will inspire you to spend more time making your designs exquisite in the rest of the browsers while serving up a working and perfectly accessible website for IE.
CSS3 + Progressive Enhancement = Smart Design 52
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.
CSS3 Selectors Link
Taming Advanced CSS Selectors55
The best way to avoid these plagues spreading in your markup and keep it clean and semantic, is by using more complex CSS selectors, ones that can target specific elements without the need of a class or an id, and by doing that keep our code and our stylesheets flexible.
The Skinny on CSS Attribute Selectors56
Every single CSS element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector.
Meet the Pseudo Class Selectors58
Pseudo class selectors are immensely useful in a variety of situations. Some of them are CSS3, some CSS2… it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support of them.
A Look at Some of the New Selectors Introduced in CSS3
A very practical article, introducing concrete examples and code snippets for using CSS3 in your design (e.g. alternate row styling, specific row styling, first and last element styling as well as styling enabled and disabled input fields).
CSS3 Selectors Browser Support59
The following is a range of CSS tests of the most common browsers’ support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3).
IE-CSS3.js: CSS3 pseudo-class selector emulation for IE
This library allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them.
Getting Buggy CSS Selectors to Work Cross-Browser via jQuery66
A simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each.
CSS3 Borders and Backgrounds Link
border-radius is most certainly a godsend for developers. Implementing rounded corners with 4 images of fixed size, using them with CSS background image property and adding a couple of unnecessary
div‘s just to make it all work sounds like a nightmare, and indeed it was a nightmare. CSS3 makes it possible to use a standard CSS property to achieve the same effect. Besides, we can use some nifty advanced background features to add border-image or multiple backgrounds to our designs. Advanced border and background features do not work in IE, so we will need workarounds again.
An Ode To Border-radius67
Border-radius: web designer’s sweetheart and (sadly) the one that IE8 forgot, destroying many a web designer’s dreams. This post explains how it works, what are some of the cross-browser alternatives, and showcases some websites that took a step ahead and implemented it.
CSS3 borders, backgrounds and box-shadows69
This general article showcases some examples made using the new properties in the W3C’s CSS3 Backgrounds and Borders specification. It explains the properties background-clip, background-origin, border-radius, Multiple background images, background-attachment, box-shadow and border-image.
Multiple Backgrounds and CSS Gradients72
Among CSS designers, there are those who are venturing ahead with CSS3 and are likely to run into a world of interesting quirks across the various platforms. Multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting.
CSS3 Background-Clip and @Font-Face 75
An experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this.
Backgrounds In CSS: Everything You Need To Know77
This article shows some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties).
Cross-Browser Multi-background images, including IE78
One of the biggest problems with using the CSS3 Multi-backgrounds is that it is not usable in Internet Explorer, however by using the: ‘AlphaImageLoader IEFilter’, it is possible to place two background images in an element.
Multiple backgrounds with canvas drawing79
box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE.
Emulating CSS3 border-radius and box-shadow in IE7/883
A thread on StackOverflow that explains how to emulate
box-shadow on IE7/8.
CSS3 Media Queries Link
How to use CSS3 Orientation Media Queries 88
For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.
Detecting device size and orientation in CSS89
Gone are the days when we could safely assume that most our site visitors would have at least a 1024px-wide screen resolution. With smartphones and tablet computers on the rise, you visitors could also be browsing the web with screen widths ranging from 320px upwards. Does your site look good on a 768px-wide canvas? That’s how people will see it using a portrait-oriented iPad.
How to use CSS3 Orientation Media Queries91
For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied.
Different Stylesheets for Differently Sized Browser Windows92
CSS 3 Media Queries for all Browsers (jQuery Plugin)94
The script adds basic Media-Query-Support (min-width and max-width in px units ) to the browsers. It helps you to create a dynamic resolution dependent layout with Web standards in mind.
CSS3 Multi-Column Layout Link
CSS3 Multi-Column layout module proposes a new technique for web layouts. As an alternative to relative/absolute positioning and floats, you can also use multi-column properties for cross-browser multi-column layouts. Obviously, this feature is great for magazine layouts and designers using grids or horizontal layouts. Support: Firefox 3.0+, Safari 3.2+, Chrome 3.0+. Neither Opera nor Internet Explorer support these features, and it’s not clear if Opera will include multi-column layout support in the upcoming version. Again, a workaround is necessary here.
Remembering: The CSS3 Multi-Column Layout Module96
Multi-column layout module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout. Some of these Modules are at a more advanced stage of development and closer to being final than others. You can take a look at the Current Work table here97.
Using CSS3 media queries to achieve multiple columns on browser resize
This article explains how to combine CSS3 media queries and Multi-column layout module in CSS3 to create an adaptive CSS layout.
Multi-column layout Module99
The ever more delayed CSS 3 specification has a Multi-column layout module. Unsurprisingly, this module specifies ways and means of creating multi-column texts. This article contains a few tests of the column declarations.
Columnizer jQuery Plugin103
The primary problem with static column layouts, is that they break down when viewed on a variety of widths. There’s no good way to have multiple dynamic columns for your content. What’s needed is to adapt to the user’s screen width, and allow content to easily be resized and refit to as many columns as needed. What’s needed is the JQuery Columnizer Plugin. And, obviously, it works in Internet Explorer, too.
CSS3 – Multi Column Layout JS Library
Multi Column List with jQuery104
“Instead of relying on consistent line heights, and applying different margin settings to list elements, I decided to decompose the large source list into several smaller lists (one for each column) and then use a CSS float parameter to make them all appear side-by-side.”
CSS3 Color: Opacity, RGBa, HSLa Link
With CSS3, web designs will be gaining more depth in the future. We can easily define the alpha transparency level of design elements in CSS, without extra images and extra markup. Support: Firefox 3.0+, Safari 3.2+, Chrome 3.0+, Opera 10.1+. Until yet, Internet Explorer does not support RGBa and HSLa, and Internet Explorer 9.0 will be supporting RGBa.
Working With RGBa Colour105
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBa. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.
RGBa CSS Generator for Internet Explorer109
If you’ve been keeping up with how recent browsers have been implementing parts of the CSS3 spec, you may already be using RGBa to define semi-transparent background colors. You’d also know that this works in recent versions of Firefox and Safari, but not in any version of Internet Explorer. This generator should solve your headache when you want to apply RGBa to your next project.
This article explains how you can apply opacity to change the transparency of an element and offers a cross-browser solution for that.
RGBa vs Opacity: The Difference Explained111
When we apply an opacity value to an element, the opacity value is inherited by all its child elements. RGBa sets the opacity of the color value of that particular element and the transparency is not inherited by its child elements. In other words, RGBA sets the opacity value only for a single declaration.
HSL, RGB and Alpha Transparency113
This article explains how the HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) color models work (and the alpha transparency options in both color models).
CSS3 Gradients Link
Many regular tasks that we are performing using Photoshop today, will be easy to implement with simple CSS3 styles. One of such task is adding gradients to our design elements. The advantage is clear: we are creating scalable vector graphics in the browser and we save HTTP requests. CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images), so that browsers that don’t support them just use the image instead. Good news: using different syntax for different rendering engines119, we can use gradients in all browsers.
Playing with CSS3 gradients120
CSS3 gradients and masks are so powerful together that the average web application would never need an image for layout anymore. And it’s not about making simple buttons. Mixing multiple gradients, masks, box-shadow and text-shadow you can achieve extremely complex results.
Speed Up with CSS3 Gradients122
WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. But what if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.
CSS: Radial gradients syntax125
In this article you’ll explore the various properties of radial gradient backgrounds as implemented by the WebKit and Gecko rendering engines. Gradients can used as backgrounds, pseudo-images and image masks among other things.
CSS3 Gradient Buttons126
CSS3 Gradient Generator187128
This tools generates CSS3 snippet for Webkit and Mozilla that can be used everywhere, be it a background-image, mask, border, or list item bullet. Another CSS3 linear gradient generator and yet another one129.
CSS Gradients For All Web Browsers, Without Using Images131
Robert Nyman explains how to code cross-browser CSS gradients that work even in Internet Explorer.
Quick Tip: Understanding CSS3 Gradients132
We can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.
(Kind of) Cross-Browser CSS Gradients via Canvas133
CSS Gradients via Canvas provides a subset of WebKit’s CSS Gradients proposal for browsers that implement the HTML5 canvas element. Unlike WebKit, this implementation does not currently allow gradients to be used for border images, list bullets, or generated content. Rudimentary gradients may be achieved in IE by means of its non-standard gradient filter134.
CSS3 Typography (incl. CSS 2.1 @font-face) Link
Technically, @font-face attribute is not a CSS3 features, as it was proposed already in CSS 2.1. However, it is now being heavily used and provides designers with more freedom in their choice of typography in web design. @font-face is supported by all major browsers (Firefox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+, Internet Explorer 6.0+). However, Trident (Internet Explorer) only supports EOT fonts. Opera does not support the font when ‘format(“opentype”)’ is used, although it does otherwise appear to support OTF fonts. For Internet Explorer, we need to use EOT-Kits such as FontSquirrel’s one135 to make IE play nicely. Another option is to use commercial and/or open source font embedding services such as TypeKit136 or Google Fonts API137.
The Future Of CSS Typography138
In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.
An older, yet still useful article that provides a detailed
introduction to the CSS property
text-shadow. Browser support table is provided as well. Text-shadow is support in Firefox 3.5+, Safari 4.0+, Chrome 3.0+, Opera 9.6+, and not supported by the whole Internet Explorer family.
The Essential Guide to @font-face141
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.
An advanced generator of ready-to-use @font-face kits for various font formats, CSS styling and options. Also, check FontSquirrel144 for dozens of useful, freely available @font-face font kits.
The New Lens Flare
“By abusing the
text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo.”
Text-Shadow In IE With JQuery146
One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. Works in Internet Explorer 5.5+.
CSS3 Text Shadow is not supported by Internet Explorer, but it is however possible to create an equivialant effect with the IE proprietary CSS Filter Blur147 and served with the jQuery plugin jquery.textshadow.js.
jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer148
Another approach that uses IE’s shadow filter instead of blur filter. IE6, IE7 and IE8 do not support the CSS3 text-shadow property, and one form of shadowing they support is the proprietary shadow filter149.
CSS3 Flexible Box Model, Box Sizing and Box Shadow Link
Another nice feature is the flexible box model which makes it much easier to create fluid layouts which adapt themselves to the size of the browser window or elastic layouts which adapt themselves to the font size. Also, you can specify a border/padding value in relation to a fluid length element with the new ‘box-sizing’ property (supported by IE8+ and all major browsers). Finally, you can also define box shadow to add more depth to your design elements (unavailable in IE 9, available in all major browsers).
CSS3 box-sizing attribute150
CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width. Further details.
The CSS 3 Flexible Box Model152
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space. Take a look at the support table and tutorial153, too.
Resizing, Box Sizing, Outline154
CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. This article focuses on three of the most significant user interface enhancements.
Cross-browser CSS3 box-shadow158
There is a simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version). The solution uses VML and behaviour.
CSS3 box-shadow for IE 6-8160
This article presents a very dirty way of making CSS3 Box Shadow work in Internet Explorer. The idea is to use Microsoft Shadow Filters161 and
zoom-property. In German, but the code should be self-explanatory.
CSS3 Transitions, Transforms, Animations Link
CSS designers with sympathy for eye candy will find many intriguing features in CSS3 Transitions, Transforms and Animations. These are most useful when used in a subtle way, for visual feedback and smoothing user interaction. Until yet, transitions and animations are supported only in Webkit-browsers, transformations are supported only in Safari 5.0+. Unfortunately, there are no real alternatives or workarounds. So using these features makes sense only with progressive enhancement in mind.
CSS3 Transitions – Are We There Yet? 164
The whole topic has been split in two parts. The first part is offering a general overview in current status of CSS3 Transitions. Second part is called “CSS3 Transitions — Problems and Solutions”, which will explain in details how CSS3 Transitions behave in different browsers.
Sexy Interactions with CSS Transitions
While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification. With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.
Using CSS3 Transitions, Transforms and Animation166
Currently transitions and 2D transforms are available in all current browsers (at least in a dev build) apart from Internet Explorer. 3D transforms and animations are only in Safari. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation.
CSS Transitions 101 168
Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary. What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.
CSS Fundamentals: CSS 3 Transitions
This article explains the basics of using CSS3 transitions and animations to add an extra layer of polish.
CSS3 loading spinners without images170
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of web-apps and of course on the iPhone.
First Ever 3D CSS WordPress Theme174
CSS3 offers great opportunities for 3D transforms, perspective, and animation. Currently Safari is the only browser that fully supports it, but Firefox and Chrome will add support soon. With that we can take regular objects (WordPress posts in this case) and animate them.
CSS3 Generators Link
- CSS3 Border Radius Generator176
A simple generator that produces code for rounded corners using
- CSS Corners177
Yet another generator that produces the code for rounded elements with a linear gradient.
- CSS3 Generator178
Generator of code snippets for
@font-face, multiple columns,
- CSS3 Please!179
Another generator and tester of CSS3 rules on the fly. Supports
- CSS3 Sandbox180
Westciv’s set of tools generates linear gradients181, radial gradients182, text shadows183, box shadows184, transforms185 as well as text stroke186. Produces the code for Gecko and Webkit.
- CSS3 Gradient Generator187128
Generates the code for linear gradients for Mozilla and WebKit browsers.
- CSS Border-Image Generator188
Generates the code for various border sizes, allows for border offsets and allows you to select vertical or/and horizontal repeat.
- @font-face Generator189
CSS3 @font-face kit generator.
Useful References Link
- CSS3 Click Chart190
A detailed overview of CSS3 features, with descriptions, syntax, examples and browser support details for each CSS3 property.
This tools explains CSS2 and CSS3 selectors in plain English (or Spanish). Once you submitted a CSS code, it provides the description of what the style will apply to.
- Printable CSS 3 Cheat Sheet (PDF)192
This cheat sheet provides a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.
- CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)193
These cheat sheets contain most important properties, explanations and keywords for each CSS 2.1 and CSS 3 property.
Last Click Link
Will You Use CSS3 In Your Next Designs? Link
- 2 https://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
- 3 https://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
- 4 http://www.romancortes.com/blog/pure-css3-page-flip-effect/
- 5 http://www.romancortes.com/blog/pure-css3-page-flip-effect/
- 6 http://line25.com/tutorials/create-a-vibrant-digital-poster-design-with-css3
- 7 http://line25.com/tutorials/create-a-vibrant-digital-poster-design-with-css3
- 8 http://www.marcofolio.net/css/wicked_css3_3d_bar_chart.html
- 9 http://www.marcofolio.net/css/wicked_css3_3d_bar_chart.html
- 10 http://trentwalton.com/2010/03/24/css3-background-clip-text/
- 11 http://trentwalton.com/2010/03/24/css3-background-clip-text/
- 12 http://neography.com/journal/our-solar-system-in-css3/
- 13 http://neography.com/journal/our-solar-system-in-css3/
- 14 http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/
- 15 http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/
- 16 http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/
- 17 http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/
- 18 http://www.subcide.com/articles/pure-css-twitter-fail-whale/
- 19 http://www.subcide.com/articles/pure-css-twitter-fail-whale/
- 20 http://lensco.be/2010/04/04/css-world-clocks/
- 21 http://lensco.be/2010/04/04/css-world-clocks/
- 22 http://css-tricks.com/3d-text-tower/
- 23 http://css-tricks.com/3d-text-tower/
- 24 http://www.nealgrosskopf.com/tech/thread.php?pid=45
- 25 http://www.nealgrosskopf.com/tech/thread.php?pid=45
- 26 http://sixrevisions.com/css/css-only-tooltips/
- 27 http://sixrevisions.com/css/css-only-tooltips/
- 28 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html
- 29 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html
- 30 http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page#
- 31 http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page#
- 32 http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/
- 33 http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/
- 34 http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
- 35 http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
- 36 http://css-tricks.com/middle-box-links/
- 37 http://css-tricks.com/middle-box-links/
- 38 http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
- 39 http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
- 40 http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/
- 41 http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/
- 42 http://www.webdesignerwall.com/tutorials/the-basics-of-css3/
- 43 http://www.webdesignerwall.com/tutorials/the-basics-of-css3/
- 44 http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
- 45 http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
- 46 http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/
- 47 http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/
- 48 http://www.seo.com/blog/css-future-css3-optimize-design/
- 49 http://www.seo.com/blog/css-future-css3-optimize-design/
- 50 http://www.viget.com/inspire/practical-uses-of-css3/
- 51 http://www.viget.com/inspire/practical-uses-of-css3/
- 52 http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/
- 53 http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/
- 54 http://www.quirksmode.org/css/contents.html
- 55 https://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
- 56 http://css-tricks.com/attribute-selectors/
- 57 http://css-tricks.com/attribute-selectors/
- 58 http://css-tricks.com/pseudo-class-selectors/
- 59 http://kimblim.dk/css-tests/selectors/
- 60 http://kimblim.dk/css-tests/selectors/
- 61 http://sizzlejs.com/
- 64 http://www.alistapart.com/articles/keepelementskidsinlinewithoffspring/
- 65 http://developer.yahoo.com/yui/selector/
- 66 http://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/
- 67 http://webdesignernotebook.com/css/an-ode-to-border-radius/
- 68 http://webdesignernotebook.com/css/an-ode-to-border-radius/
- 69 http://dev.opera.com/articles/view/css3-border-background-boxshadow/
- 70 http://dev.opera.com/articles/view/css3-border-background-boxshadow/
- 71 http://dev.opera.com/articles/view/css3-border-background-boxshadow/
- 72 http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
- 73 http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
- 74 https://www.smashingmagazine.com/2010/05/27/css-three-connecting-the-dots/
- 75 http://trentwalton.com/2010/04/06/css3-background-clip-font-face/
- 76 http://trentwalton.com/2010/04/06/css3-background-clip-font-face/
- 77 https://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/
- 78 http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing
- 79 http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing
- 80 http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing
- 81 http://cubiq.org/dropbox/cssgrad.html
- 82 http://cubiq.org/dropbox/cssgrad.html
- 83 http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8
- 84 https://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
- 85 http://www.alistapart.com/articles/switchymclayout/
- 86 http://www.slideshare.net/maxdesign/css3-media-queries
- 87 http://www.slideshare.net/maxdesign/css3-media-queries
- 88 http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
- 89 http://mislav.uniqpath.com/2010/04/targeted-css/
- 90 http://mislav.uniqpath.com/2010/04/targeted-css/
- 91 http://addyosmani.com/links/2010/04/27/how-to-use-css3-orientation-media-queries/
- 92 http://css-tricks.com/resolution-specific-stylesheets/
- 93 http://css-tricks.com/resolution-specific-stylesheets/
- 94 http://www.protofunc.com/scripts/jquery/mediaqueries/
- 95 http://code.google.com/p/css3-mediaqueries-js/
- 96 http://webdesignernotebook.com/css/remembering-the-css3-multi-column-layout-module/
- 97 http://www.w3.org/Style/CSS/current-work.html
- 98 http://webdesignernotebook.com/css/remembering-the-css3-multi-column-layout-module/
- 99 http://www.quirksmode.org/css/multicolumn.html
- 100 http://www.quirksmode.org/css/multicolumn.html
- 101 http://www.stuffandnonsense.co.uk/archives/css3_multi-column_thriller.html
- 102 http://www.stuffandnonsense.co.uk/archives/css3_multi-column_thriller.html
- 103 http://welcome.totheinter.net/columnizer-jquery-plugin/
- 104 http://codeasily.com/jquery/multi-column-list-with-jquery
- 105 http://24ways.org/2009/working-with-rgba-colour
- 106 http://24ways.org/2009/working-with-rgba-colour
- 107 http://css-tricks.com/yay-for-hsla/
- 108 http://css-tricks.com/yay-for-hsla/
- 109 http://kimili.com/journal/rgba-css-generator-for-internet-explorer
- 110 http://kimili.com/journal/rgba-css-generator-for-internet-explorer
- 111 http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/
- 112 http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/
- 113 http://dev.opera.com/articles/view/color-in-opera-10-hsl-rgb-and-alpha-transparency/
- 114 http://css-tricks.com/examples/HSLaExplorer/
- 115 http://css-tricks.com/examples/HSLaExplorer/
- 116 http://www.slideshare.net/LeaVerou/colors-in-css3?src=embed
- 117 http://www.slideshare.net/LeaVerou/colors-in-css3?src=embed
- 118 http://css-tricks.com/rgba-browser-support/
- 119 http://css-tricks.com/css3-gradients/
- 120 http://cubiq.org/playing-with-css3-gradients
- 121 http://cubiq.org/playing-with-css3-gradients
- 122 http://css-tricks.com/css3-gradients/
- 123 http://css-tricks.com/css3-gradients/
- 124 http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
- 125 http://www.the-art-of-web.com/css/radial-gradients/
- 126 http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
- 127 http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
- 128 http://gradients.glrzad.com/
- 129 http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc
- 130 http://gradients.glrzad.com/
- 131 http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
- 132 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/
- 133 http://weston.ruter.net/projects/css-gradients-via-canvas/
- 134 http://msdn.microsoft.com/en-us/library/ms532997%28VS.85%29.aspx
- 135 http://www.fontsquirrel.com/fontface/generator
- 136 http://typekit.com/
- 137 http://code.google.com/apis/webfonts/
- 138 https://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
- 139 https://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
- 140 http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
- 141 http://sixrevisions.com/css/font-face-guide/
- 142 http://sixrevisions.com/css/font-face-guide/
- 143 http://www.fontsquirrel.com/fontface/generator
- 144 http://www.fontsquirrel.com/fontface
- 145 http://www.fontsquirrel.com/fontface/generator
- 147 http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx
- 148 http://www.nealgrosskopf.com/tech/thread.php?pid=61
- 149 http://msdn.microsoft.com/en-us/library/ms673539%28VS.85%29.aspx
- 150 http://helephant.com/2008/10/css3-box-sizing-attribute/
- 151 http://helephant.com/2008/10/css3-box-sizing-attribute/
- 152 http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
- 153 http://webtint.net/tutorials/future-of-css-the-flexible-box-model/
- 154 http://designshack.co.uk/tutorials/introduction-to-css3-part-4-user-interface
- 155 http://www.westciv.com/tools/boxshadows/index.html
- 156 http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
- 157 http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
- 158 http://dimox.net/cross-browser-css3-box-shadow/
- 159 http://dimox.net/cross-browser-css3-box-shadow/
- 160 http://dimox.net/cross-browser-css3-box-shadow/
- 161 http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx
- 162 http://24ways.org/2009/going-nuts-with-css-transitions
- 163 http://24ways.org/2009/going-nuts-with-css-transitions
- 164 http://samuli.hakoniemi.net/css3-transitions-are-we-there-yet/
- 165 http://samuli.hakoniemi.net/css3-transitions-are-we-there-yet/
- 166 http://css3.bradshawenterprises.com/
- 167 http://css3.bradshawenterprises.com/
- 168 http://www.webdesignerdepot.com/2010/01/css-transitions-101/
- 169 http://www.webdesignerdepot.com/2010/01/css-transitions-101/
- 170 http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
- 171 http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
- 172 http://www.marcofolio.net/css/3d_animation_using_pure_css3.html
- 173 http://www.marcofolio.net/css/3d_animation_using_pure_css3.html
- 174 http://legendthemes.com/2010/05/14/3d-css-wordpress-theme/
- 175 http://legendthemes.com/2010/05/14/3d-css-wordpress-theme/
- 176 http://border-radius.com/
- 177 http://csscorners.com/
- 178 http://css3generator.com/
- 179 http://css3please.com/
- 180 http://westciv.com/tools/index.html
- 181 http://westciv.com/tools/gradients/
- 182 http://westciv.com/tools/radialgradients/
- 183 http://westciv.com/tools/shadows/
- 184 http://westciv.com/tools/boxshadows/
- 185 http://westciv.com/tools/transforms/
- 186 http://westciv.com/tools/textStroke/
- 187 http://gradients.glrzad.com/
- 188 http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B34%2C27%2C27%2C27%5D%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D
- 189 http://www.fontsquirrel.com/fontface/generator
- 190 http://www.impressivewebs.com/css3-click-chart/
- 191 http://gallery.theopalgroup.com/selectoracle/
- 192 https://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
- 193 https://www.smashingmagazine.com/2010/05/13/css-2-1-and-css-3-help-cheat-sheets-pdf/
- 194 http://www.modernizr.com/
- 195 http://www.modernizr.com/
- 196 http://polldaddy.com/poll/3358100/
- 197 http://polldaddy.com/features-surveys/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.