Check out the demos to know what we are going to achieve with pure CSS.

Pure CSS tab Pure CSS Image lightbox Pure CSS notification

Basics of target

Target is a css3 selector. You can select an element using fragment identifier & id.

Clicking on a link with anchor identifier bring you to certain part of the page

By using :target css3 selector we can select the element with same id & can apply style.

Using this we are going to create a tab, image gallery & notification only using CSS. Following codes are bare minimum requirement to build each modules. Please refer each demo’s code for more styling & animation.

In one of Paul Irish’s presentation “The Primitives of the HTML5 Foundation”. He showed creating a simplest code editor using data uri link. Inspired from it, I created a small full fledged JavaScript code editor [code highlight & line number] using Code mirror 2 & data uri.

Following is the code from the presentation. Paste the code in your browser’s adress bar and convert it into a simple code editor.

data:text/html,<pre contenteditable>

Its just a quick post on a small issue I came across, when trying to center a div using absolute. There are couple of methods to make an element center. Quick way is to make it absolute & give 50% top & left and negate margin top & left with a value half of the width & height of the element.

Eg:

#box{
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-right:-100px;
}
<!-- HTML -->
<div id="box">
</div>

Above code will work in all browsers flawlessly. But consider the following css.

After a long time I’m again starting my blog. This theme is Splendio 1.1 developed by DesignDisease (Elena & Vlad Scanteie). I have customized it a bit. To know about me check here.