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?

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.