Animated Content Tabs with CSS3

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. View demo Download source 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. The Markup We will be using input elements to connect to the division with the class content. Every input element has a value, and we can always make an input selected by default by adding the checked attribute. The CSS The first thing we need to do is to define some dimension and hide the inputs by setting their opacity to 0: The inputs will be covering the labels. Next, we will make the labels look like tabs by defining some neat style for them.

LESS « The Dynamic Stylesheet Animated Content Tabs with CSS3 About us You think water moves fast? You should see ice. How we work Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. Services Do you see any Teletubbies in here? Excellence Portfolio The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Examples Now that we know who you are, I know who I am. Contact You see? Get in touch Well, the way they make shows is, they make one show.

CSS Specific for Internet Explorer As much as we don't like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments... View Demo IE Specific #1 IE Conditional Comments IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8). <! <! #2 CSS Rules Specific to Explorer (IE CSS hacks) Another option is to declare CSS rules that can only be read by Explorer. IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon. #3 Conditional HTML Class The third option, which was founded by Paul Irish, is to add an CSS class with the IE version to the HTML tag by using IE conditional comments.

Nettoyez vos feuilles de style CSS avec CSS Trashman - ressources Découvrez CSS TRASHMAN, un outil web pour nettoyer au mieux vos fichiers CSS ! CSSTrashMan est un service web actuellement gratuit et en bêta, tout récent, qui permet de nettoyer vos feuilles de style. Donnez-lui simplement une page de votre site web et c'est parti ! Grâce à une architecture PhantomJs et cette library, il va analyser le Dom de votre site, et nettoyer votre CSS en fonction. Au final, le résultat vous est fournis en CSS ou MEME EN SASS ! En théorie, car le site ainsi que la lib reste en version bêta, et que tout ne marche pas tout le temps comme prévu. Pour donner votre avis dirrectement à l'auteur, et voir ce qu'en pense les utilisateurs, allez donc faire un tour sur le sujet hacker-news dédié (en anglais). Et si vous découvrez un bug, n'hésitez pas a l'entrer dans le bug-tracker de la lib utilisée pour qu'il puisse être corrigé au plus vite.