Amazing CSS3 techniques you should know

by Jean. 18 Comments -

CSS3 is taking web development and web design to a higher level. In this article, I have compiled examples of amazing CSS3 techniques that will probably become very popular when CSS3 will be fully supported by most browsers.

Color animate any shape with CSS3 and a PNG


Let’s start this compilation with an interesting effect created using only CSS3: A png image with a changing background. The background is using CSS3 transitions. Not the kind of effect you’ll put on your website, but definitely an interesting demo of what CSS3 can do.
View source: http://jsfiddle.net/chriscoyier/vhKhT/

Create adaptable layout using CSS3 media queries


CSS3 media queries allow you to adapt a web layout to the browser width. Which means that you can easily create an adaptable layout that fits both big displays and mobile devices. You probably already checked my article on that subject, so I’ve picked another informative tutorial written by webdesigner Nick La. A technique any web developer should know!
View tutorial: http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries

Dim entire page when certain link is rolled over, css way


Very cool for web apps: Once a particular link is rolled over, the rest of the page is dimmed. This technique may also be a starting point for other great experiments.
View source: http://jsfiddle.net/chriscoyier/pVsKe/1/

Clipping text with CSS3 text-overflow


text-overflow is a new CSS3 property which allows you to define how to handle a text which is bigger than its container. This example will show you anything you need to know about this property. Unfortunely, as I’m writing this post text-overflow is only supported by Opera and IE9.
View source: http://www.456bereastreet.com/archive/201105/clipping_text_with_css3_text-overflow/

Full Browser Width Bars


Another goldie from Chris Coyier: In this tutorial, he’ll teach you how to create full browser width bars easily.
View source: http://css-tricks.com/examples/FullBrowserWidthBars/

CSS Mask-Image & Text


A great text effect using CSS3 and mask images. Unfortunately, the effect is not supported by some browsers, but it degrades gracefully. This effect will probably be very popular when CSS3 will be fully supported by all major browsers.
View source: http://trentwalton.com/2011/05/19/mask-image-text/

Image slider with CSS3 transitions


Who’s never heard of JavaScript sliders, such as NivoSlider? That kind of effect is very popular for the past two or three years. With the new CSS3 animations, it is now possible to enhance transitions between images. This tool, called Flux Slider, supports either jQuery or Zepto.js. It works on any browser supporting CSS3 transitions.
View source: http://blog.joelambert.co.uk/2011/05/05/flux-slider-css3-animation-based-image-transitions/

Flared Borders with CSS


Remember that time when you had to create images just to display a box with rounded corners? Thanks to the border-radius, this painful process is no longer needed. This very cool tutorial will show you how to create an element that flares into another using only CSS. The whole code degrades gracefully in older browsers.
View source: http://orderedlist.com/blog/articles/flared-borders-with-css/

  • http://anton.trollback.se Anton Trollbäck

    Great list, the first on is really nice.
    May I add http://anton.trollback.se/shine-effect/ ;)

  • http://www.cloudburstdesign.com Chris Anton

    The mobile detection and adaptable layouts are HUGE right now….this is a great solution – thanks!

  • http://paginasinternetpuertorico.com Dave

    Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level.

  • http://superdit.com aditia

    thanks that flared border is really smart

  • http://www.joelambert.co.uk Joe Lambert

    Thanks for mentioning the Flux Slider. Its a great list of the power of CSS3, can’t wait for browser support to be more widespread!

  • http://des.igner.co.uk Phil

    There are some really cool effects here. I’ve been trying to keep to grips with all the CSS3 things that are starting to be used, but there’s some here that I didn’t even know about. Thanks very much… now just the eternal wait for full browser support! :)

  • http://harmonicdesign.ca Alex

    I can definitely see how CSS Mask-Image & Text will come in handy. Thanks for this list!

  • http://www.comforthost.net/ Eddie

    These features are very nice! Certainly worth using in a site where you expect a lot of visitors with modern browsers! I wouldn’t rely on them in site with a wider audience though!

  • http://www.ibabstraining.com barbara

    These are great!!!
    Thanks so much!!!

  • http://www.seohatch.com Corey

    Thanks for the tutorial. Definitely will be useful!! Love the FLux slider

  • http://www.exquisitecrap.com Josh

    I love the idea of dimming the page when a link is rolled over. Could work for an awesome lightbox-esque approach to text content. I’ll be thinking of a way to use that for something awesome.

  • http://www.snogglenews.com/ Snoggle News

    Cats who Code provides some amazing code snippets. I’ve personally used quite a few in my time.. I love everything they do. Truly! I find their work very inspirational. And thanks for sharing these CSS3 techniques.

    I find the best web designers are those willing to apply time and work. It’s great! Keep it up guys

  • http://www.bluelinemedia.co.uk Simon Jackson

    Nice collection this. The only thing that concerns me with using any CSS3 now is the sheer volume of code required to implement all the vendor specific fallbacks necessary to get the widest support for the effects. It makes the CSS really bloated and difficult to edit as if you change 1 value you need to remember to update all the others and then retest all the target browsers too!

  • http://www.100webhosting.com Jasmine

    Wow, these techniques and effects are truly amazing! CSS3 rocks. Oh, I like Flux Slider, looks really cool!

  • http://www.tapparhar.se magnus

    Thanks for the tutorial.
    And thanks for sharing these techniques.
    /magnus

  • http://www.cramie.net Refly

    Some nice effects. The first is not applicable to any general website, cool effect though. I’ve been looking for a CSS3 documentation site. Please let me know if you know one.

  • http://pencilportraittutorial.com chris

    Awesome tips. I am particularly interested in the flared borders that are kind of becoming a trend in mag themes etc for separation lines and widget area. I guess CSS3 along with HTML5 will rock the web for the years to come.

  • http://webcreationtips.com/ Abe

    Useful tips.
    However, they can not be used in everyday applications yet.
    Unfortunately, only few browsers support these techniques.