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.

Multiple borders methods with CSS

I know that many times we are in need to have a box or a side bar where we need multiple borders. And because the box could be rendered dynamically we just can’t afford to have a background and limit the width or height to be fixed.

What I’ll present in this tutorial multiple ways to build a box with borders with CSS. I did found several methods that we could use 8 by now.

Here is a demo page with the boxes.

In this demo I used width and height fixed so they can stay in the same line but that doesn’t mean that it can’t have dynamically width or height.

Minify CSS files using PHP

Recently I needed a PHP script to minify my CSS files. There are many tools out there but the process was complex.
So I did found a PHP function that compress the CSS files. The process is done using preg_replace PHP function.

In order to save your precious bandwidth, you should compress your css files. Doing so is not hard at all using this snippet.

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.