Build a social box using CSS adjacent sibling selectors

Have you ever found yourself in a small problem where you have a box with some elements that were floating? But let’s say that the third or the second element had to do something else like: not to float or to have border, and you couldn’t change the class name? How can you do that from CSS but not changing the class name?

Register form with HTML5 using placeholder and CSS3 part 1

In this first part of the tutorial I’m going to talk about the HTML5 attribute placeholder.The placeholder attribute shows text in a field until the field is focused upon, then hides the text. You’ve seen this technique a billion times with JavaScript, but native HTML5 support is even better!

This is the demo of this first part of the tutorial.

What I’m going to do in this tutorial is create a register form. But I’ve inserted an textarea so you can see that the placeholder attribute it’s working even in textarea and on input type password.

CSS :before and :after Pseudo-elements

As you already know from the launch of CSS2.1 they implemented the :before and :after pseudo-elements. I know not many people use it but I find it quite helpful.
What are they doing after all?

The :before selector inserts content before the selected element(s).
The :after selector inserts content after the selected element(s).

Browser Compatibility:
IE8 support both pseudo-elements
Firefox
Safari
Opera
Chrome

You can see 3 examples here.