CSS3 :target Pseudo-class – Pure CSS Based Tab


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.

target selector CSS3

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

target selector CSS3

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

target selector CSS3

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.

Simplest Full Fledged Code Editor Using Data:text/html

Javascript code Editor

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>

Centering an Element With Percentage Height & Width Using CSS [Experiment]

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.


<!-- HTML -->
<div id="box">

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

Hello World!!!

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.