CSS3 .info - Community News

CALL FOR ACTION: THE OPEN WEB NEEDS YOU NOW

tdomf_ea55c — Thu, 16 Feb 2012 15:39:38 +0000

Not so long ago, IE6 was the over-dominant browser on the Web. Technically, the Web was full of works-only-in-IE6 web sites and the other browsers, the users were crying. IE6 is dead, this time is gone, and all browsers vendors including Microsoft itself rejoice. Gone? Not entirely… IE6 is gone, the problem is back.

3D Gallery with CSS3 and jQuery

tdomf_ea55c — Thu, 16 Feb 2012 14:22:32 +0000

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

Page Transitions with CSS3

tdomf_ea55c — Wed, 15 Feb 2012 15:10:39 +0000

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.

CSS3 ordered list styles

tdomf_ea55c — Tue, 14 Feb 2012 13:27:04 +0000

In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.

CSS3 & jQuery folder tabs

tdomf_ea55c — Wed, 08 Feb 2012 16:16:28 +0000

Check this article to learn how to create cool folder tabs using nothing more than pure CSS3. Pseudo-elements are also used here.

Animated Web Banners With CSS3

admin — Tue, 07 Feb 2012 19:22:44 +0000

Hey there folks! Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.

Multi-line text-trimming in tables > to hell with css3′s single-line trim.

tdomf_ea55c — Tue, 31 Jan 2012 21:54:43 +0000

A fairly common technique employed when display data in tables is to trim a cell’s text content when it is over a certain amount of characters to keep your table rows & columns relatively the same size. CSS3 allows us to do this, but, due to the nature of the way the DOM is rendered, you can only trim a value to be in one-line. But what if you want control over where the trim occurs? This is key to doing a multi-line trim. It just takes a bit of javascript magic.

[Interview] Håkon Wium Lie – CTO, Opera and Creator of CSS

tdomf_ea55c — Mon, 30 Jan 2012 15:46:59 +0000

We spoke to Håkon Wium Lie, CTO, Opera and spoke about the latest trends in open web standards.

Filter Functionality with CSS3

admin — Fri, 27 Jan 2012 12:43:21 +0000

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Thumbnail Proximity Effect with jQuery and CSS3

tdomf_ea55c — Thu, 26 Jan 2012 19:33:01 +0000

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.