Over a million developers have joined DZone.
Platinum Partner

8 CSS3 techniques you should learn now

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

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/

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


Published at DZone with permission of jb j , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}