With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a simple image gallery using CSS filters and the CSS3 :not selector.

View demo

Whilst at the beginning we had just WebKit nightlies support, now you can view the filter effects using Chrome Canary too. I encourage you to download it in order to view the CSS filter effects in action. Also, I’m pretty sure that soon we’ll see filters support also in stable Chrome’s releases.

Here are the current filter effects: grayscale, sepia, saturate, hue-rotate, opacity, invert, brightness, contrast, blur, drop-shadow. Read more about them here.

In this article we’ll be using just the blur and grayscale effects in order to create our small gallery. Also, the CSS3 :not selector will help us here as you’ll see below.

The HTML

Getting back to our image gallery, let’s see how the markup looks like:

<ul class="gallery">
  <li><img src="1.jpg"></li>
  ...
  <li><img src="6.jpg"></li>
</ul>

The CSS

I think it’s the first time in a long time when I don’t have too many CSS lines to show you. This time, less is more :)

The interesting part is related to the .gallery:hover li:not(:hover) selector. When you hover over the list, we’ll assume you’ll hover also over a list element and we’ll apply some filters to the non hovered list elements.

This is how the other images looks like when the tulip image is hovered.

.gallery{
  list-style: none;
  margin: 50px auto; padding: 0;
  width: 642px;
  font-size: 0; /* fix inline-block spacing */
}

.gallery li{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 200px; height: 150px;
    margin: 2px;
    border: 5px solid #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    transition: all .3s ease;
}

.gallery:hover li:not(:hover){
    -webkit-filter: blur(2px) grayscale(1);
    opacity: .7; /* fallback */
}

For this example I chose to use inline-block instead float and font-size: 0 is my “kung-fu” move to fight the space between inline-block elements.

Regarding degradation, here’s my method:

• If the browser support CSS filters and :not, then apply filters and also decrease opacity.
• If the browser does not support CSS filters (currently all except Canary) but it does support the :not, then just decrease opacity.
• If the browser is too old and does not support neither opacity nor :not selector, then do nothing.

Browser support

Here’s the current support for the CSS filter effects: Chrome 20.0.1123.0 (currently Canary) and Webkit nightly.

Conclusion

The future sounds good. We already have a Flexbox Module and CSS Filters, I like to think that in the near future we’ll also have variables and the CSS parent selector ready to use. Exciting times for web developers, don’t you think so?

So, in this article you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.

View demoDownload .zip

The idea

The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.

Besides being a menu, this example can also serve as a perfect single page website. For example, just think that a block can be named “Contact” and could contain a nice contact form.

The HTML

Nothing too complicated here, each block has a title that is hidden once its adjacent content will be triggered. Regarding tabindex will discuss a little later.

  <ul class="menu">
    <li tabindex="1">
      <span class="title">One</span>
      <div class="content">Lorem ipsum dolor sit amet...</div>
    </li>
	...
    <li tabindex="1">
      <span class="title">Nine</span>
      <div class="content">Lorem ipsum dolor sit amet...</div>
    </li>
  </ul>

The CSS

In the following rows I’ll try to explain a bit the styles that were used to create this example.

Wrapper

First of all we’re going to add some basic styles for our list wrapper including clearing floats. Also, you may have noticed the counter-reset: li; declaration, you’ve seen it before and we’ll use it further again to create a nice counter effect.

.menu{
  width: 620px;
  margin: 100px auto; padding: 15px;
  list-style: none;
  counter-reset: li;
  background: #eee;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  border-radius: 10px;
}

.menu:before,
.menu:after {
  content: "";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  zoom:1;
}

List element

Below you can find the CSS rules used in order to add some basic styles for list elements.

Things to note:

• On :focus we’ll use the same styling as on :hover. This is necessary when using keyboard’s tab key.
• The CSS .cover class is dynamically added (with jQuery) to an li element when it’s triggered.
• If the trigger is made through ENTER key, using outline: 0; declaration will help removing focus styling.
• Numbering system, similar to CSS3 ordered lists.

.menu li {
  position: relative;
  float: left;
  cursor: pointer;
  height: 120px; width: 200px;
  margin: 10px 0 0 10px;
  color: #fff;
} 

.menu li:hover, .menu li:focus{
  background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}

.menu .cover{
  z-index: 2;
}

.menu .cover:focus{
  outline: 0;
}

/* -------------------------------- */

.menu li::after{
  content: counter(li);
  counter-increment: li;
  font: italic bold 10px serif, georgia;
  position: absolute;
  color: rgba(255,255,255,.1);
  opacity: 0;
  transition: all .2s ease-out;
}      

.menu li:hover::after, .menu li:focus::after{
  font-size: 100px;
  opacity: 1;
}

.menu .cover::after{
  z-index: -1;
}

Clean li’s margins and colorize them

Above we’re using margin: 10px 0 0 10px; to add spacing between elements, now we have to clean some of them. Also we’ll colorize the li elements along with its content window and close button.

In this case, to colorize .content and .close for each li, it would have been great to just use background: inherit; declaration. But, due browser inconsistency we’re going to use the “hard” way, as you can see below:

.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
  margin-top: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
  margin-left: 0;
}

/* -------------------------------- */       

.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
  background-color: #2c618f;
}         

.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
  background-color: #91ab31;
}   

.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
  background-color: #714a28;
}

.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
  background-color: #e58600;
}

.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
  background-color: #c33a00;
}

.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
  background-color: #7f5dac;
}

.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
  background-color: #5672b7;
}

.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
  background-color: #69003f;
}

.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
  background-color: #393043;
}

Title, Content and Close

Regarding the styles for .content window:

• When the .expanded class is added to it, its height and width are transitioned to cover the entire list.
• Please notice the comments to see how the elements in the grid “respond” once they’ll be triggered.

In this screenshot, you can see the fifth block hovered.

.menu .content{
  opacity: 0; display: none\9;
  overflow: hidden;
  font: 12px Arial, Helvetica;
  position: absolute;
  height: 120px; width: 200px;
  transition: all .3s ease-out;
}  

.menu .expanded{
  opacity: .95; display: block\9;
  overflow: visible;
  padding: 40px;
  height: 300px; width: 540px; /* Cover the entire area */
}

.menu li:nth-child(3n) .content{ /* 3,6,9 */
  right: 0;
}

.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
  left: 50%;
  margin-left: -310px;
}

.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
  bottom: 0;
}                      

.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
  margin-top: -190px;
  top: 50%;
} 

/* -------------------------------- */    

.menu .title{
  position: absolute;
  height: 100%; width: 100%;
  text-align: center;
  font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
  opacity: .2;
}

.menu li:hover .title{
  opacity: .7;
}    

/* -------------------------------- */

.menu .close {
  /*background: inherit;*/
  display: none;
  border: 5px solid #fff;
  color: #fff;
  cursor: pointer;
  height: 40px; width: 40px;
  font: bold 20px/40px arial, helvetica;
  position: absolute;
  text-align: center;
  top: -20px; right: -20px;
  border-radius: 40px;
}

.menu .cover .close{
  display: block;
}

The jQuery

Below you have the jQuery code, I think it’s quite easy to follow and understand:

(function(){

// Append a close trigger for each block
$('.menu .content').append('x');

// Show window
function showContent(elem){
        hideContent();
	elem.find('.content').addClass('expanded');
	elem.addClass('cover');
}

// Reset all
function hideContent(){
	$('.menu .content').removeClass('expanded');
	$('.menu li').removeClass('cover');
}

// When a li is clicked, show its content window and position it above all
$('.menu li').click(function() {
	showContent($(this));
});

// When tabbing, show its content window using ENTER key
$('.menu li').keypress(function(e) {
	if (e.keyCode == 13) {
		showContent($(this));
	}
});

// When right upper close element is clicked  - reset all
$('.menu .close').click(function(e) {
	e.stopPropagation();
	hideContent();
});

// Also, when ESC key is pressed - reset all
$(document).keyup(function(e) {
	if (e.keyCode == 27) {
	  hideContent();
	}
});

})();

Visible content window for the fifth element.

Graceful degradation

Regarding opacity, due its lack of support for older browsers, you’ll need to use the display toggleing for IE Trident:

  opacity: 0; display: none\9; 	    /* Initially hidden */
  opacity: .95; display: block\9;   /* Expanded */

Other existing CSS3 stuff like transitions and gradients and just play nice where the support allows it.

Selectors

As you already noticed, we’ve used some CSS3 selectors that older browsers like IE8 and below do not support.

So, we need a solution that fixes the example for those browsers. In my opinion, the best solution in this case is to use the Selectivizr tool, as we’ve already included jQuery in our project. That’s because Selectivzr requires one of those JavaScript libraries: jQuery, MooTools, Prototype etc. in order to work.

<!--[if (gte IE 6)&(lte IE 8)]>
	<script src="selectivizr.js"></script>
<![endif]-->

Thoughts on accessibility

The cool part is that along with HTML5, the tabindex attribute can be used on any HTML element. We’ll be using that in our example to enable tabbing navigation: <li tabindex="1">.

I really wanted this example to be accessible via keyboard and I made it. When tabbing, you have the possibility to trigger a window by pressing the ENTER key and then close it by pressing the ESC key:

// ENTER
$('.menu li').keypress(function(e) {
	if (e.keyCode == 13) {
		showContent($(this));
	}
});

// ESC
$(document).keyup(function(e) {
	if (e.keyCode == 27) {
	  hideContent();
	}
});

That’s it!

I hope you liked this article and I’m looking forward to read your thoughts about it. Thanks for reading!

View demoDownload .zip

But, what is this having to do with the CSS we all know? The latest news is that the first working draft of CSS Variables just got released.

Why CSS variables?

Variables in CSS is something that people have been asking and wanting for a quite long time.

Think about all those colors, heights, widths and sizes: will not be great to define them just once? After all, this is what we all want: write less & do more.

A CSS common practice

When people asked about defining color variables in CSS, adding a comment at the top of the CSS file was sort of variable’s behavior simulation:

/*--------------------------
link color: #99D1FF (light blue)
box color: #555 (dark gray)
--------------------------*/

Later, to update you’d need to search and replace content.

The LESS/Sass ways to do it

The idea of using variables for style sheets was one of those that have propelled LESS or Sass.

LESS

Sass

How it will work

First of all, please keep in mind that there’s no browser support actually. But this is how it will work: var-foo for definition, var(foo) for usage.

According to the draft:

Any property name starting with the prefix “var-” is a variable property

Quick example

The following rule declares a variable property named “var-header-color” on the root element, and assigns to it the value “#99D1FF”:

:root {
  var-header-color: #99D1FF;
}

Further, its value can be referenced via the “header-color” variable:

h1 {
  color: var(header-color);
}

Using color variables within gradient declarations can be very helpful too. You’d just need to replace values for the variables, and voila: all gradients updated. Sounds pretty cool if you ask me.

Also, when creating a layout, variables together with the calc() function can help you making interesting calculations.

Conclusion

CSS is not a programming language and it neither shouldn’t be complicated too. Though, I think you agree that using CSS variables will be able to help you avoiding redundancy and creating more flexible style sheets.

Now, with the first module for CSS Variables release, we’re looking forward to seeing browsers implementing it in the near future.

So, in this article you’ll see an experiment about how to create a simple CSS3 loading animation.

View demo

For this example, I’ll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect.

The HTML

Initially, I wanted to use pseudo-elements in order to have less markup elements. But, the thing is that generated content can’t be animated yet in other browsers than Mozilla Firefox.

Here’s how the markup looks like:

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

The CSS

There are some things you may find interesting here:

• For a nice color fade across all three triangles, you need to increment the animation-delay.
• Notice the gap between 20% and 100% for the rotation keyframes. This helps adding a stop effect for the animation.

.loading-wrap {
  width: 60px; height: 60px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -30px 0 0 -30px;
  background: #777;
  animation: rotation ease-in-out 2s infinite;
  border-radius: 30px;
}

.triangle1, .triangle2, .triangle3 {
  border-width: 0 20px 30px 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #67cbf0;
  height: 0; width: 0;
  position: absolute;
  left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;
}

.triangle2, .triangle3 {
  content: '';
  top: 20px; left: 30px;
  animation-delay: 1.1s;
}

.triangle3 {
  left: -10px;
  animation-delay: 1.2s;
}

@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}

View demo

Conclusion

This is an experiment and you must be aware of it. For now, I think an animated GIF will do the job better in most of cases.

Also, this isn’t that example that advocates for using CSS3 stuff instead images to save HTTP requests. It is not applicable here as limited browser support for CSS3 animations has something to say. Though, I hope you’ll find this example useful and inspiring for your future projects.

Thanks for reading and I’m looking forward to read your opinions!

In this article you’ll find out how to design a clean and attractive CSS3 signup form.

View demo

In the past, I have designed some sign in forms, but never a signup form. So, to get the job completely done, I decided to write this article.

The HTML

Here’s how the markup looks like for this signup form:

<form id="signup">
	<h1>Start doing cool stuff in seconds.</h1>
	<input type="email" placeholder="john.doe@email.com" required="">
	<input type="password" placeholder="Choose your password" required="">
	<input type="password" placeholder="Confirm password" required="">
	<button type="submit">Sign up for free!</button>
</form>

For this example, I decided to use a buttton instead of the classic input type="submit". This way, further, it will be a lot easier to target the form’s elements (without adding any id’s or classes).

Placeholder polyfill

You can easily notice the new HTML5 stuff like type="email", placeholder or required. For the placeholder attribute, we’ll add a HTML5 polyfill that will simulate its effect for older browsers.

In this example, we’ll be using Mathias Bynens‘s Placeholder jQuery plugin. That’s a very cool one and it’s highly recommended.

The CSS

As usual, I’ll list below the styles used for this example. Prefixed properties are missing here, but you can find them in the demo page source.

Form styles

After I created a simple 3x4 image pattern, I converted it into a base64 string. To do that, I used this wonderful Image to Base64 Converter tool. You can see it in the styles as a background for #signup.

Regarding the paper stack effect, this time we’re using the ::before and ::after pseudo-elements to do that. Here‘s one of my previous articles where I used a similar technique.

#signup {
	width: 550px;
	height: 330px;
	margin: 100px auto 50px auto;
	padding: 20px;
	position: relative;
	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAMAAAB883U1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7+/v7u7u////REBVnAAAAAN0Uk5T//8A18oNQQAAABZJREFUeNpiYGJiYmBiYgRiBhAGCDAAALsAFJhiJ+UAAAAASUVORK5CYII=);
	border: 1px solid #ccc;
	border-radius: 3px;
}

#signup::before,
#signup::after {
	content: "";
	position: absolute;
	bottom: -3px;
	left: 2px;
	right: 2px;
	top: 0;
	z-index: -1;
	background: #fff;
	border: 1px solid #ccc;
}

#signup::after {
	left: 4px;
	right: 4px;
	bottom: -5px;
	z-index: -2;
	box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
}

Heading

I tried to create a nice and abstract design for the form’s heading, so here’s my result:

#signup h1 {
	position: relative;
	font: italic 1em/3.5em 'trebuchet MS',Arial, Helvetica;
	color: #999;
	text-align: center;
	margin: 0 0 20px;
}

#signup h1::before,
#signup h1::after{
	content:'';
	position: absolute;
	border: 1px solid rgba(0,0,0,.15);
	top: 10px;
	bottom: 10px;
	left: 0;
	right: 0;
}

#signup h1::after{
	top: 0;
	bottom: 0;
	left: 10px;
	right: 10px;
}

Using pseudo-elements (again) :)

Form elements

Not so much to say here. For the submit button, please notice the gradient transition workaround.

::-webkit-input-placeholder {
   color: #bbb;
}

:-moz-placeholder {
   color: #bbb;
} 				    	

.placeholder{
	color: #bbb; /* polyfill */
}		

#signup input{
	margin: 5px 0;
	padding: 15px;
	width: 100%;
	*width: 518px; /* IE7 and below */
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#signup input:focus{
        outline: 0;
        border-color: #aaa;
	box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}		

#signup button{
	margin: 20px 0 0 0;
	padding: 15px 8px;
	width: 100%;
	cursor: pointer;
	border: 1px solid #2493FF;
	overflow: visible;
	display: inline-block;
	color: #fff;
	font: bold 1.4em arial, helvetica;
	text-shadow: 0 -1px 0 rgba(0,0,0,.4);
	background-color: #2493ff;
	background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
	transition: background-color .2s ease-out;
	border-radius: 3px;
	box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;
}

#signup button:hover{
  	background-color: #7cbfff;
        border-color: #7cbfff;
}

#signup button:active{
	position: relative;
	top: 3px;
	text-shadow: none;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}

That’s it!

View demo

I’m aware that this example does not contain revolutionary techniques, but neither shouldn’t. The possibilities are endless when it comes about web forms styling, as long as you follow up the best and recommended practices.

This is just another cool example created using CSS3′s great power. I hope you will find it useful for your projects, and please don’t forget to leave a comment if you liked it (or not). :)

In this article I’ll try to show you some tips and tricks that can definitely help you when writing CSS.

Buttons styling

I’ll begin with classical HTML buttons. When trying to style buttons like input type"submit" or button, if you want to achieve pixel perfection in your designs, don’t forget about the following:

/* removes extra side spacing in IE */
.button{
  overflow: visible;
}

/* removes extra inner spacing in Firefox */
.button::-moz-focus-inner{
  border: 0;
  padding: 0;
}

Want to see some buttons that are using the above snippet?

• Just some other awesome CSS3 buttons
• Design a beautiful CSS3 search form
• Cool CSS3 search box

Using pseudo-elements

I’m sure you already know that using pseudo-elements like :before and :after helps you specifying which content should be inserted before (or after) the content of that element. Besides that, elements like input or img have no content, therefore, the pseudo-elements will not render anything for them. An exception is the hr element, which, for some reason, allows adding pseudo-elements to it.

Also, keep in mind the difference between :before and ::before. To summarize it, IE8 is the only reason to use the single colon syntax.

Gradient background for whole body

If you tried before to add a CSS3 gradient for your body, then you noticed that it will not stretch and it will repeat instead. To fix that, just add the following lines:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Fake transitions on gradients

Speaking of gradients, want transitions for CSS3 gradients? Unfortunately, there’s no browser support for gradients transitions (yet).

But, this can be done using some tricks like:

• Use background-position on :hover to give the illusion that the gradient is transitioning. Actually, it’s shifted using the Y-axis only. This technique is used by Twitter’s Bootstrap.

  a{
      background: linear-gradient(orange, red) repeat-x;
      display: inline-block;
      padding: 20px;
  }
  
  a:hover{
      background-color: red;
      background-position: 0 -15px;
      transition: background-position .1s linear;
  }
  

• The second option (and my favorite) is to transition the background-color and apply a gradient image to it which fades to transparent value. Again, this gives the illusion of an transitioning gradient.

  a{
      background-color: orangered;
      background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
      transition: background-color .1s linear;
      display: inline-block;
      padding: 20px;
  }
  
  a:hover{
    background-color: red;
  }
  

Inline-block gaps

Let’s say you’d like to use inline-block instead float for a horizontal list. When doing that, a horizontal space will appear between your inline-block elements. To avoid that, you’ll need to use a dirty (also good) method, namely adjust your markup.

So, instead using a clean structure like the below one:

<ul>
	<li>one</li>
	<li>two</li>
	<li>three</li>
</ul>

you’ll have to use something like this:

<ul>
	<li>one</li><li>two</li><li>three</li>
</ul>

Read more about the CSS display inline-block value: Why it rocks, and why it sucks.

When height 100% actually works?

It’s actually quite simple: when you set a height: 100% for an element, always think about the parent’s height. If the parent’s height is not defined in your styles, then the inner element will have height: 100% of nothing.

Please consider the following working (and rough) example:

<div id="parent">
    <div id="child">2</div>
</div>

and

#parent{
    height: 400px;
    padding:10px;
    background:red;
}

#child{
    height: 100%;
    background:green;
}

In the above example, the green colored #child, using height: 100%, will stretch and fill the whole 400px vertical space. Also, you can check my CSS3 progress bars for a live example of the above trick.

Rounded corners for tables

The trick consist of setting the table’s border-spacing to 0. The border-collapse‘s default value is separate, you’ll only need to set it to collapse for IE7 and lower ( for a graceful degradation).

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    border-radius: 5px;
}

Check my CSS3 tables with rounded corners article to read more about it.

Inputs box model

When designing a search box, for example, you’ll notice that after setting the same height or width for your input type="submit" and input type="text", the result will most likely disappoint you.

Quite frustrating, but the thing is that input type="submit" has a border-box box model, while input type="text" has a content-box box model (on IE and FF).

To overcome this kind of of issue, you can set for both form’s inputs (text and submit) the same box sizing model. This can be done using CSS3 box-sizing:

      box-sizing: content-box | padding-box | border-box;

Conclusion

The above are just some tricks I often use when writing CSS. I found them very useful, and I sincerely wish I knew them at the beginning.

I hope you enjoyed these and feel free to share yours by adding a comment below. Thank you for reading!

In this article I’ll show you how to create a fancy FAQ page using CSS3 only, no JavaScript.

View demo

The idea

When I visited Facebook’s Help Center section (theirs FAQ’s), I noticed a cool effect for the answers previews. They show a small, faded and clipped text preview for the answer, and then, when the question is clicked, the complete answer is revealed.

After seeing it, of course I immediately thought about how can I create a similar effect using CSS3 only. So, further you’ll see how I made it.

The HTML

We will start as usual with the markup structure:

<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Question?</label>
    <p>... The intro paragraph that will be clipped ...</p>
    <p>... Extra and optional paragraph ...</p>
</section>

• In the above image, the label is the proper heading of the section. But, if you want to use better semantic, you can wrap the label into a h1.
• Using label::before allow us to create the right triangle shape. On a side note, double colon for pseudo-elements is the CSS3 way.
• The first paragraph for each section is the intro preview for the complete answer. For this example, I used the adjacent sibling combinator to target it.

How it works?

There’s no rocket science here. The technique we will use today is called the checkbox hack and it relies on the ability of toggle-ing an <input type="checkbox" id="abc"> using the <label for="abc">. Also, in the same time, the checkbox input will be hidden.

I played before with this cool technique, but never had the opportunity to create a practical example actually. So, this is my shot! :)

If you want to read more about this technique, Chris Coyier wrote a while ago an article where he shows some cool stuff you can do with the checkbox hack.

The CSS

Below you have the styles, I commented some lines for a better understanding:

/*Add some spacing*/
.faq-section{
	margin: 40px 0;
        position: relative;
}

/*Hide the paragraphs*/
.faq-section p{
	display: none;
}	

/*Hide the checkboxes */
.faq-section input{
	position: absolute;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	display: none\9; /* IE8 and below */
	margin: 0;
	width: 100%;
	height: 36px;
}

/*Show only the clipped intro */
.faq-section label+p{
	display: block;
	color: #999;
	font-size: .85em;
	transition: all .15s ease-out;
	/* Clipping text */
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/*If the checkbox is checked, show all paragraphs*/
.faq-section input[type=checkbox]:checked~p{
	display: block;
	color: #444;
	font-size: 1em;
	/* restore clipping defaults */
	text-overflow: clip;
	white-space: normal;
	overflow: visible;
}

/*Style the label*/
.faq-section label{
	font-size: 1.2em;
	background: #eee;
	display: block;
	position: relative;
        height: 20px;
	padding: 7px 10px;
	font-weight: bold;
	border: 1px solid #ddd;
	border-left: 3px solid #888;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	transition: all .15s ease-out;
}

/*Remove text selection when toggle-ing*/
.faq-section label::selection{
	background: none;
}

.faq-section label:hover{
	background: #f5f5f5;
}

/*If the checkbox is checked, style the label accordingly*/
.faq-section input[type=checkbox]:checked~label{
	border-color: #ff7f50;
	background: #f5deb4;
	background-image: linear-gradient(to bottom, #fff, #f5deb4);
	box-shadow: 0 0 1px rgba(0,0,0,.4);
}

/*Label's arrow - default state */
.faq-section label::before{
	content: '';
	position: absolute;
	right: 4px;
	top: 50%;
	margin-top: -6px;
	border: 6px solid transparent;
	border-left-color: inherit;
}

/*Update the right arrow*/
.faq-section input[type=checkbox]:checked~label::before{
	border: 6px solid transparent;
	border-top-color: inherit;
	margin-top: -3px;
	right: 10px;
}

Browser support

What about the older browsers? That’s a normal question, and the answer is graceful degradation:

Using the following snippet, we’re targeting browsers like IE8 and below. So, we’ll enable the HTML5 elements like section and then add some custom styles in order to keep the FAQ’s content readable.

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <style>
		.faq-section label,
		.faq-section label:hover{
			cursor: default;
			background: #eee;
		}
		body .faq-section p{ /* Increase specificity */
			display: block;
			color: #444;
			font-size: 1em;
			text-overflow: clip;
			white-space: normal;
			overflow: visible;
		}
    </style>
<![endif]-->

View demo

Update: i0S support

You asked for it, now you have it: iOS browser support. I had some time to think about it and I made updates regarding hiding the checkbox.

Here’s my fix, tested on iPhone and iPad using the latest iOS versions:

.faq-section input{
	position: absolute;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	display: none\9; /* IE8 and below */
	margin: 0;
	width: 100%;
	height: 36px;
}

• position: absolute – While .faq-section wrapper is relative positioned, we’ll need this to visually place our checkbox above the label.
• z-index: 2 – Make sure it will be above section content, including label.
• cursor: pointer – Optionally, this will add a pointer cursor when you hover on it.
• opacity: 0 and display: none\9 – Visually hide the checbox, while on browsers like Internet Explorer 8 and below will be hidden.
• margin: 0 – Remove default margin.
• width: 100% and height: 36px – The checkbox height value matches the height of the label. Also, using 100% for the width will expand the checbox in order to fully cover the label.

Done!

That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas about the result.

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

The idea

When I first read Roger Johansson’s article about styling ordered list numbers, I must admit I seriously felt in love with that technique. Using that technique, I will try to go a bit further and show you two different styling possibilities for ordered lists.

View demo

The HTML

Below you’ll find nothing than simple ordered list markup:

<ol class="rounded-list">
	<li><a href="">List item</a></li>
	<li><a href="">List item</a></li>
	<li><a href="">List item</a>
		<ol>
			<li><a href="">List sub item</a></li>
			<li><a href="">List sub item</a></li>
			<li><a href="">List sub item</a></li>
		</ol>
	</li>
	<li><a href="">List item</a></li>
	<li><a href="">List item</a></li>
</ol>

The CSS

Further, I’ll try to explain how this works in a few words.

This technique uses Automatic counters and numbering. Basically it’s about using two CSS 2.1 properties: counter-reset (this initiate a counter) and counter-increment (kinda self-explanatory, this increments the previous counter). As you will see below, the counter-increment will be used along with CSS generated content (pseudo-elements).

ol{
	counter-reset: li; /* Initiate a counter */
	list-style: none; /* Remove default numbering */
	*list-style: decimal; /* Keep using default numbering for IE6/7 */
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0;
	margin-bottom: 4em;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{
	margin: 0 0 0 2em; /* Add some left margin for inner lists */
}

Rounded-shaped numbers

.rounded-list a{
	position: relative;
	display: block;
	padding: .4em .4em .4em 2em;
	*padding: .4em;
	margin: .5em 0;
	background: #ddd;
	color: #444;
	text-decoration: none;
	border-radius: .3em;
	transition: all .3s ease-out;
}

.rounded-list a:hover{
	background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);
}

.rounded-list a:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;
	left: -1.3em;
	top: 50%;
	margin-top: -1.3em;
	background: #87ceeb;
	height: 2em;
	width: 2em;
	line-height: 2em;
	border: .3em solid #fff;
	text-align: center;
	font-weight: bold;
	border-radius: 2em;
	transition: all .3s ease-out;
}

Rectangle-shaped numbers

.rectangle-list a{
	position: relative;
	display: block;
	padding: .4em .4em .4em .8em;
	*padding: .4em;
	margin: .5em 0 .5em 2.5em;
	background: #ddd;
	color: #444;
	text-decoration: none;
	transition: all .3s ease-out;
}

.rectangle-list a:hover{
	background: #eee;
}	

.rectangle-list a:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;
	left: -2.5em;
	top: 50%;
	margin-top: -1em;
	background: #fa8072;
	height: 2em;
	width: 2em;
	line-height: 2em;
	text-align: center;
	font-weight: bold;
}

.rectangle-list a:after{
	position: absolute;
	content: '';
	border: .5em solid transparent;
	left: -1em;
	top: 50%;
	margin-top: -.5em;
	transition: all .3s ease-out;
}

.rectangle-list a:hover:after{
	left: -.5em;
	border-left-color: #fa8072;
}

Circle-shaped numbers

.circle-list li{
    padding: 2.5em;
    border-bottom: 1px dashed #ccc;
}

.circle-list h2{
    position: relative;
    margin: 0;
}

.circle-list p{
    margin: 0;
}

.circle-list h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    z-index: -1;
    left: -1.3em;
    top: -.8em;
    background: #f5f5f5;
    height: 1.5em;
    width: 1.5em;
    border: .1em solid rgba(0,0,0,.05);
    text-align: center;
    font: italic bold 1em/1.5em Georgia, Serif;
    color: #ccc;
    border-radius: 1.5em;
    transition: all .2s ease-out;
}

.circle-list li:hover h2:before{
    background-color: #ffd797;
    border-color: rgba(0,0,0,.08);
    border-width: .2em;
    color: #444;
    transform: scale(1.5);
}

Small bonus

Some CSS3 numbers animations are also included in this demo. Unfortunately, as far as I know and at this time, Firefox is the only one who supports animated pseudo-elements. Let’s hope that will improve sooner or later.

Browser support

These list looks well also on older browsers, as you can see below:

View demo

That’s all!

Thank you all for reading and I hope you enjoyed it. Feel free to share your thoughts, I appreciate your comments.

While in my previous CSS3 tabs tutorial I tried to simulate some beveled corners for the tabs, this time I will show you how to create folder tabs using nothing more than pure CSS3.

View demo

The HTML

The markup is self explanatory. While the title attributes might seem to be extra, in this case they are needed for the jQuery stuff. After reading your comments, I decided to update the title attribute with name. This way, you will avoid seeing unnecessary tooltip when hovering on the tabs.

<ul id="tabs">
    <li><a href="#" name="tab1">One</a></li>
    <li><a href="#" name="tab2">Two</a></li>
    <li><a href="#" name="tab3">Three</a></li>
    <li><a href="#" name="tab4">Four</a></li>
</ul>

<div id="content">
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
</div>

So, here are the ingredients:

• #tabs – an unordered list that holds the tab navigation items.
• #content – a wrapper for each tab content.

The CSS

Below you’ll find the CSS lines necessary for creating these tabs. Also, the demo source contains all the prefixed CSS3 properties.

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li{
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a{
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
  background: #fff;
}

#tabs a:focus{
  outline: 0;
}

#tabs a::after{
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;
}

#tabs #current a,
#tabs #current a::after{
  background: #fff;
  z-index: 3;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 220px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

The jQuery

There is nothing to add here, it’s similar to my previous tabs article.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return
        }
        else{
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});
</script>

Again, I updated a bit the above code to add detection when clicking on the current tab. Now, everything should be just fine. Thanks for your suggestions!

View demo

The end (of this tutorial)

This is just another small example that shows the CSS3 awesomeness. Everything is great also for older browsers, the tabs degrade nice.

So, having said that, I hope you liked this article and thanks for reading it!

So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

View demo

The HTML

Tha markup is simple and minimal, based on an unordered list.

<ul id="breadcrumbs-one">
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Vivamus nisi eros</a></li>
    <li><a href="">Nulla sed lorem risus</a></li>
    <li><a href="">Nam iaculis commodo</a></li>
    <li><a href="" class="current">Current crumb</a></li>
</ul>

The CSS

First, let’s add a mini CSS reset for our unordered lists:

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

Secondly, I’d like to add that all the breadcrumbs I made for this tutorial are using CSS pseudo-elements. I bet there’s no need to specify what pseudo-elements are and how cool they are.

First example

Here I used a similar technique to the one I used for creating these CSS3 tooltips. Basically, to create a right-bordered triangle effect, the triangles created with pseudo-elements are placed one above another. The darker triangle will be shifted a bit in order to achieve the border.

#breadcrumbs-one{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-one li{
  float: left;
}

#breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}

#breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-one a:hover{
  background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs-one a::after{
  z-index: 2;
  border-left-color: #ddd;
}

#breadcrumbs-one a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}

#breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
  content: normal;
}

Second example

The CSS shapes built with the pseudo-elements are placed before, respectively after.

#breadcrumbs-two{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
  content: normal;
}

Third example

Using border-radius we will round the corners for our rectangle and square shapes. The square will be rotated, in order to achieve a rounded diamond.

#breadcrumbs-three{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-three li{
  float: left;
  margin: 0 2em 0 0;
}

#breadcrumbs-three a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  background: #ddd;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-radius: .4em 0 0 .4em;
}

#breadcrumbs-three a:hover{
  background: #abe0ef;
}

#breadcrumbs-three a::after{
  background: #ddd;
  content: "";
  height: 2.5em;
  margin-top: -1.25em;
  position: absolute;
  right: -1em;
  top: 50%;
  width: 2.5em;
  z-index: -1;
  transform: rotate(45deg);
  border-radius: .4em;
}

#breadcrumbs-three a:hover::after{
  background: #abe0ef;
}

#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-three .current::after{
  content: normal;
}

Fourth example

Again, with the pseudo-elements you’ll add two rectangles before and after the element. Then you’ll round the outer sides for each one. The rest is nothing but poetry. :)

#breadcrumbs-four{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-four li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-four a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}

#breadcrumbs-four a:hover{
  background: #efc9ab;
}

#breadcrumbs-four a::before,
#breadcrumbs-four a::after{
  content:'';
  position:absolute;
  top: 0;
  bottom: 0;
  width: 1em;
  background: #ddd;
  transform: skew(-10deg);
}

#breadcrumbs-four a::before{

  left: -.5em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-four a:hover::before{
  background: #efc9ab;
}

#breadcrumbs-four a::after{
  right: -.5em;
  border-radius: 0 5px 5px 0;
}

#breadcrumbs-four a:hover::after{
  background: #efc9ab;
}

#breadcrumbs-four .current,
#breadcrumbs-four .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-four .current::after,
#breadcrumbs-four .current::before{
  content: normal;
}

View demo

CSS3 breadcrumbs advantages

• No images, so it’s easy to update and maintain.
• Everything is scalable, em based.
• Contains fallbacks for older browsers.

Final words

I didn’t merged the common styles for the above breadcrumbs with a purpose. I thought that if you need a certain breadcrumbs style, just copy&paste that, without other CSS inheritances issues.

Thank you for reading and I hope you liked this tutorial. Have any questions or just want to share your thoughts? Feel free to leave a comment!