50 Brilliant CSS3/JavaScript Coding Techniques

Advertisement

CSS3 is coming. Although the browser support of CSS 3 is still very limited1, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.

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 & Co. Please notice that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as they use jQuery or other JavaScript-library.

Visual Effects and Layout Techniques With CSS3

CSS3 Analogue Clock2
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

Creating a clock in CSS3

Use CSS3 to Create a Dynamic Stack of Index Cards4
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Use CSS3 to Create a Dynamic Stack of Index Cards5

dynamic PNG shadow position and opacity6
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

dynamic PNG shadow position and opacity7

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS38
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS39

Awesome Overlays with CSS310
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Awesome Overlays with CSS311

CSS3 and Flexible UI: Avoid Recutting UI Graphics for Mobile12
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

CSS3 and Flexible UI: Avoid Recutting UI Graphics for Mobile 13

How To Create Depth And Nice 3D Ribbons Only Using CSS314
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

How To Create Depth And Nice 3D Ribbons Only Using CSS3 15

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS316
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS317

Drop-In Modals with CSS318
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.

Drop-In Modals with CSS319

Newspaper Layouts with Columns and Image Masks20
The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

Newspaper Layouts with Columns and Image Masks21

Navigation Menus With CSS 3

Sweet AJAX Tabs With jQuery 1.4 and CSS322
This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4.

 Sweet Tabs23

Sweet tabbed navigation bar using CSS324
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

Sweet tabbed navigation bar using CSS325

Halftone Navigation Menu With jQuery and CSS326
Today we are making a CSS3 and jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Halftone Navigation Menu With jQuery and CSS327

Building Coverflow With CSS Transforms28
I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

Building Coverflow With CSS Transforms29

CSS3 Hover Tabs without JavaScript30
With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.

CSS3 Hover Tabs without JavaScript 31

CSS 3 Transitions and Animations

Going Nuts with CSS Transitions32
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

24 ways: Going Nuts with CSS Transitions33

Sliding Vinyl with CSS334
We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

Sliding Vinyl with CSS3 - ZURB Playground - ZURB.com35

Fun with CSS3 and Mootols36
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

CSS3 Animations37

Star Wars HTML and CSS: A NEW HOPE38
There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for tomorrows browsers: the Star Wars Episode IV opening crawl in HTML and CSS.

 Star Wars HTML and CSS: A NEW HOPE39

Fun with 3D CSS and video40
Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

 Fun with 3D CSS and video41

CSS3 animations and their jQuery equivalents42
This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.

CSS3 animations and their jQuery equivalents43

CSS Animations44
No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes.

24 ways: CSS Animations45

Snowy CSS3 Animation46
It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.

Merry Christmas47

What You Need To Know About Behavioral CSS48
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

What You Need To Know About Behavioral CSS 49

3D Cube using new CSS transformations50
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

 3D Cube using new CSS transformations51

Playing around with WebKit Animations52
I’ve been playing around doing a KeyNote like animation done with CSS and some JS to hook up the necessary events. The animation is kind of like a deck of cards. When you go to the next one the current one zooms in and fades out, symbolizing getting closer to the viewer. The next card then zooms and fades in from the back and to give a fancy effect-

 Playing around with WebKit Animations53

More on 3D CSS Transforms54
Various 3D CSS Transforms in an overview.

 More on 3D CSS Transforms55

Gradients, RGBA and HSL with CSS 3

Working With RGBA Colour56
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.

24 ways: Working With RGBA Colour57

CSS3 Gradients: No Image Aqua Button58
I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images! Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

 CSS3 Gradients: No Image Aqua Button59

CSS3 HSL and HSLA60
A tutorial on using the HSL and HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.

CSS3 HSL and HSLA61

Super Awesome Buttons with CSS3 and RGBA62
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.

 Super Awesome Buttons with CSS3 and RGBA63

Using the Shadow-Property in CSS3

Create a Letterpress Effect with CSS Text-Shadow64
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Create a Letterpress Effect with CSS Text-Shadow65

Shadows and CSS366
I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.

Owltastic - by Meagan Fisher67

Learning New CSS3 Selectors

CSS3 + Progressive Enhancement = Smart Design 68
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 + Progressive Enhancement = Smart Design 69

A Look at Some of the New Selectors Introduced in CSS370
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.

A Look at Some of the New Selectors Introduced in CSS3 71

Cleaner Code with CSS3 Selectors72
In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code.

24 ways: Cleaner Code with CSS3 Selectors73

The CSS3 :target Pseudo-class And CSS Animations74
It’s no secret that I’m always looking for an easy way out using CSS instead of trying to replicate things with convoluted code — there are so many underused techniques that we could be applying to our designs as an enhancement layer! In this experience, I take a brief look into the :target pseudo-class and a very simple CSS animation.

The CSS3 :target Pseudo-class And CSS Animations75

The CSS3 :not() selector76
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

The CSS3 :not() selector77

IE CSS3 pseudo selectors78
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE… Honest…!

IE CSS3 pseudo selectors79

CSS3 Galleries

How To Create a Pure CSS Polaroid Photo Gallery80
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

How To Create a Pure CSS Polaroid Photo Gallery81

An Awesome CSS3 Lightbox Gallery With jQuery82
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

An Awesome CSS3 Lightbox Gallery With jQuery83

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?84

 If That Is An Awesome CSS3 Gallery, How Would You Call Mine?85

Editable CSS3 Image Gallery86
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Editable CSS3 Image Gallery87

Replacing CSS Hacks with CSS 3

Rounded corner HTML elements using CSS3 in all browsers88
This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css.

Rounded corner HTML elements using CSS3 in all browsers89

Using Rounded Corners with CSS390
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

Using Rounded Corners with CSS3 91

Better Image Preloading with CSS392
Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images.

Better Image Preloading with CSS3 93

Saying Goodbye to the overflow: hidden Clearing Hack94
I’m now saying goodbye to overflow: hidden and the deciding factor for me is CSS3. Specifically box-shadow. At least in the sense that box-shadow was the first property I noticed being negatively impacted by the use of overflow: hidden. Like the positioned child elements mentioned above, box-shadow can get clipped when the parent (or other ancestor) element has overflow applied. And there are several other things to consider as we move forward using more CSS3. Text-shadow and transform can also potentially be clipped by overflow: hidden.

Saying Goodbye to the overflow: hidden Clearing Hack 95

General articles about CSS 3

How to bring CSS3 features into your design96
Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.

How to bring CSS3 features into your design 97

Practical Uses of CSS398
In this article I’ll show you some practical uses for CSS3.

 Practical Uses of CSS399

11 Classic CSS Techniques Made Simple with CSS3100
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

11 Classic CSS Techniques Made Simple with CSS3 101

Mobile optimised websites using CSS3 Media Queries102
A while ago I wrote about using CSS3 Media Queries on my website redesign to provide mobile visitors with an optimised view designed for smaller screens. I thought it might be useful if I went into a bit more detail on how I’m doing this.

Mobile optimised websites using CSS3 Media Queries103

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3104
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3105

Get the best out of CSS3106
Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

Get the best out of CSS3107

Practical Uses of CSS3108
“One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. 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.”

Practical Uses of CSS3109

A Crash-Course in Advanced CSS3 Effects110
This video tutorial reviews a bunch of different neat effects that can be used in Safari 4, Chrome, and for all iPhone development.

A Crash-Course in Advanced CSS3 Effects111

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles112
An extensive overview of CSS3-techniques, tools, articles and resources.

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Sweet!

    edit: Why is every thumbnail (on the frontpage) replaced by a photo of a cat?

    5
  2. 2

    I’m sure you’ve showcased a few of these before. ‘Awesome Overlays with CSS3′ springs to mind, that was only on SM last week.

    0
  3. 3

    Smashing Editorial

    February 1, 2010 5:36 am

    Exactly. This round-up presents this and many other CSS3 techniques in a compact overview.

    1
  4. 4

    I just want to inform you that I’ve received a trackback to my blog from this post without a reason (there are no links in this post to my blog). I’m puzzled.

    0
  5. 5

    I think this also useful for java users.

    1) Add class=”default” and value=”Some default text…” to your field. The value can be anything.
    2) Include this little jquery function on the page.

    $(function() {
    $(‘.default’).each(function () {
    var default_val = $(this).val();

    $(this).focus(
    function() {
    if(default_val == $(this).val()) {
    $(this).val(”);
    }
    }
    ).blur(
    function() {
    if(” == $(this).val()) {
    $(this).val(default_val);
    }
    }
    );
    });
    });

    Thanks

    Jennie

    0
  6. 6

    Whoah – great roundup! I really love CSS3 combined with JavaScript. Also pretty cool to see that many others created nice “spin-offs” from my “Polaroid Photo Viewer with CSS3 and jQuery”. Thanks for including 2 (!) Marcofolio.net articles :D !

    0
  7. 7

    because every day is caturday ;-)

    2
  8. 8

    cool – I didn’t expect to get featured “Fun with CSS3 and Mootools” FTW! Thanks Smashing Magazine :)

    0
  9. 9

    Nice article. But some techniques were mentioned multiple times in older articles.

    0
  10. 10

    Superbe!!!

    0
  11. 11

    Great to have alot of examples in one place! :-)

    0
  12. 12

    I was wondering the same thing earlier…

    1
  13. 13

    awesome article. it’s really helpful for designer for future development.

    -mebaze

    0
  14. 14

    Love this article! Thank you very much!

    0
  15. 15

    You know, progressive enhancement is great and all, but what’s the point of spending time implementing half this stuff when 95% of your visitors won’t even see it?

    Instead of posting links to cool CSS3 effects, someone should be spending their time canvassing Microsoft to hurry up and start implementing some of these things :) Or getting the w3 to hurry up and finish a few more modules.

    Also, some of these transforms have obscene amounts of code – you could write some PHP to transform an image in fewer lines of code than the CSS3 equivalent!

    0
  16. 16

    What about the compatibilty issues with CSS3, when can we use CSS3 without any problems in all relevant browsers?

    0
  17. 17

    Some cool stuff… but it’s hard for me to get too excited about all this CSS3 when IE is still so dominant and offers so little support.

    Even if the next version of IE offers full CSS3 support, it will be YEARS before most users actually upgrade. How depressing for designers & developers: some people are still using IE 6, which was released in 2001 (!), and many are “perfectly happy” with IE7 (2006). That came out four years ago, yet lots of people still haven’t even upgraded to IE 8!

    0
  18. 18

    I think this demo http://webstuffshare.com/demo/PuzzleEffect/ using css3 too (linear-gradient) cmiiw.

    0
  19. 19

    It really seems that CSS3 will do almost everything: great! Just one question, when it is likely to become a standard? Otherwise it will remain a fantastic game for designers and developers, but I think it will not be 100% appreciated by “normal users” (and clients!)

    0
  20. 20

    Daniel Kurdoghlian

    February 1, 2010 8:04 am

    Thank you for featuring my dynamic png shadow! :)
    (even if it’s done with jQuery)

    ~Daniel Kurdoghlian

    1
  21. 21

    If you want to play around with the new CSS3 rgba() color options, to see how the colors blend check out this online RGBA inspector : http://mediaupstream.com/labs/rgba-inspector

    also on the site is a nice HEX to RGB (and vice versa) converter…

    Great article, I was glad to see fellow Minnesotan Zach Johnson’s isocube make the list!

    0
  22. 22

    Nice article but, as people said… its useless…
    When you develop web pages for clients, they need support for all browsers, not only “those kings that fully support css3″… so, while there won’t be one standard for all browsers it would be pain in the @ss to implement any of this great features..

    0
  23. 23

    Totally agree with you Scott – the massive hype which we are seeing for CSS3 techniques baffles me. Whilst I am truly excited for all that CSS3 is going to be providing, it is irrelevant until more browsers can support it.

    A client pays for a design – they won’t understand that most of the nicities will not work in some browsers because they do not support the code.

    0
  24. 24

    Amazing stuff !!!

    Although we still have to deal with IE so sadly we wont be using much of this stuff for a while…

    0
  25. 25

    sweet, this is awesome. now I just have to wait to get out of class to start experimenting.

    0
  26. 26

    Great collection with some amazing CSS3 and javascript effects.
    Thousand thanks for featuring my Dynamic Stack of Index Cards as well :)

    0
  27. 27

    Some of these are absolutely amazing, such as the lightbulb and the css clock. Work like this really highlights the power of CSS3, and also shows us why we don’t need to forever rely on flash for dynamic effects on the web.

    0
  28. 28

    Definitely is a concise overview of the sweet benefits of CSS 3. Great job guys!

    0
  29. 29

    Cool, thanks!

    0
  30. 30

    I’ve faked the iPhoto-Application of the brand new iPad with CSS3 and JavaScript. http://www.augentier.eu/ipad-demo/

    0
  31. 31

    I really like these tutorials. Keep ‘em coming! :)

    0
  32. 32

    A great compilation. Although not all browser supports CSS3, but so far we can see there’s many designer already integrate CSS3 into their website design.

    This is a definitely must bookmark.

    0
  33. 33

    Thanks! These will definitely help in the future!

    And I laughed when I read “A solid “friggin’ right” if in Cape Breton.” Is the person who wrote this by any chance is from Nova Scotia? If so, great to see some content from a fellow Nova Scotian/Caper!

    0
  34. 34

    why so many cat?

    0
  35. 35

    Please, please can someone explain why you are all sooooooo excited about being able to do something which technology made available ten years ago, browser / platform / device INDEPENDENT ??

    The irony is dripping from this – you are all gagging to be able to do techniques which flash made available a decade ago – what you are witnessing here is the most boring, unimaginative, backwards, efforts which are only inspiring due to a complete rejection of new technologies – Luddites.

    Come back to me when your delivering one tenth the capacity of flash – becuase as it is you are almost ten years behind – it is simply sad.

    -3
  36. 36

    Amazing :D thx!

    0
  37. 37

    Gr8 collection …thanks for sharing it !!!

    0
  38. 38

    Even i was wondering about it.. Meanwhile i found some really cool effects of CSS3.. Nice demo

    http://www.webdeveloperjuice.com/2010/01/18/7-javascript-effect-alternatives-using-css3-for-webkit-browsers/

    -2
  39. 39

    Thanks for featuring my CSS tabs tutorial – http://www.kamikazemusic.com/quick-tips/css3-hover-tabs-without-javascript/

    Hope people find it useful and go and experiment with CSS

    0
  40. 40

    @Jenniue….Wooow excellent script…thanks …Love You :)

    0
  41. 41

    @Dev – the effects themselves are not new, but being able to provide them without the download time upfront is pretty exciting.

    @others – if these techniques are used more often and IE users hear again and again that they are missing out maybe, just maybe folks will start moving away from it (MS’s browser market share has shrunk somewhat in the past couple of years) and this may be enough to prompt them to enter the 21st century. If everyone conforms to the status quo, there will be no reason for users to change.

    just my $.02

    2
  42. 42

    We need have content this level. :) But we need have care with technology in development.

    Very nice article.

    0
  43. 43

    great tutorial smashingmag =)

    1
  44. 44

    eeeeeeeee!!!
    there is some beautiful tutorials too
    protime.je1.ru/

    0
  45. 45

    Great examples!
    Here is another CSS3 Example for an Simple Language Selection Menu: http://www.kollermedia.at/archive/2010/01/11/css3-language-selection-menu/

    0
  46. 46

    Because CSS does not rely on a plug in to work, and promotes semantic, accessible, search engine optimised code…

    1
  47. 47

    Grrr! Hurry up Microsoft. That findmebyIP link is just depressing.

    0
  48. 48

    I’m not completley agreeing with you, Scott.
    If you take my tutorial (Dynamic Stack of Index Cards) and compare it with my visitor browser stats, then over 90% of my visitors will be able to use and see the effects as intended.

    I would say you can use these effects, if you know that you are developing a site for an appropriate audience (technically versatile, etc.).

    Many of these techniques also offer appropriate fallbacks (hello progressive enhancement)…

    0
  49. 49

    The Google Chrome Frame extension is one way of bringing your IE users kicking and screaming into CSS3. We’ve been using it passively on our sites for the last few months.

    0
  50. 50

    I think Scott is right.
    It’s nice to have such an inspiring collection of features. But until compatibility is improving (or some of the old browsers have been securely phased out), many of these fancy and doubtlessly valuable scripts are almost pointless. For a web designer/developer this is just mouthwatering without the satisfaction of being able to take a bite. I could not recommend 1/2 of these features to any client, because of lack of browser support :o(

    Was fun checking them out, though. Thanks!

    0
  51. 51

    Funny, Dev, I find Flash boring, often clunky, limiting and mostly annoying. Show me an example for a userfriendly, well designed, perfectly SEOed, compatible, fast loading and accessible Flash site, and I shut up already.

    Until then, I’m enjoying the excitement.

    2
  52. 52

    Incredible CSS3 tutorial list I ever seen

    0
  53. 53

    “Offtopic: By the way” hehe, that’s an oxymoron.

    0
  54. 54

    great tutorial, thanks

    0
  55. 55
  56. 56

    nice article!

    0
  57. 57
  58. 58

    too many examples. too many bad examples. please make a selection of the best stuff. like max 10 things. then this article will have much more value.

    -1
  59. 59

    Unfortunately browser relics like IE aren’t going to move without provocation. Because of this it will take bold designers stepping out and using the latest technology in order to show IE that they are the ones falling behind. I agree that companies with money invested may not go for this – so use CSS3/HTML5 principles on lower profile sites that will showcase the power of the newer web standards and degrade well (if you can actually say that…) in IE.

    1
  60. 60

    This is a really great collection. These resources have been very helpful. Thanks for sharing.

    -1
  61. 61

    how way done it my java script

    1
  62. 62

    Your title says “50 Brilliant CSS3-Javascript Techniques”. First, I’d hardly call some of them brilliant. Second, one of them says in the screenshot it does NOT support IE. Really? That doesn’t sound too brilliant to me. If you write code that cannot support a web browser – your code is not brilliant.

    -1
  63. 63

    The link Snowy CSS3 Animation (URL: http://clearleft.com/news/36) is broken. It is returning HTTP 404 file not found error when it is opened.
    Please update with latest link.

    -1
  64. 64

    Hi smashingmagazing,

    I definitely love your articles and especially this one. I have been following you on twitter for quite some time and look forward to your next update. I welcome you to check out javascript-codes.com/ for more javascript ideas.

    -1

↑ Back to top