In this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

Note that the CSS3 properties will only work in browsers that support them.

Nowadays, it's not only important to develop your clients' websites to look good on all browsers, and on PC and MAC, it's also a must that websites are viewable on tablets and mobile devices. A lot of people opt for making one version of their site for desktop and another for mobile. Others choose Responsive Design, a mix of fluid grids and layouts, flexible images and an intelligent use of CSS media queries. There are quite a few sites dedicated to lending a hand with responsive grids, Gridpak, CSSGrid,  Skeleton and SimpleGrid, just to name a few. Here are 50 (plus 1) examples of responsive websites.

Simple CSS3 3D Cube by Jaydson. This cube is created using 6 divs that are positioned using the translateX, translateY and translateZ properties to create a 3D workspace. The container div is given a perspective of 1000px to create the perspective view rather than the orthogonal view (perspective view is only supported in webkit browsers).

The rotation is performed using the animation and keyframes properties. Please note that this demo works best in webkit browsers only. However, it still works in Firefox but you won't be able to see the perspective view.

A very cool CSS 3D Captioned image with domino effect created by Dudley Storey.