CSS3 tabs with beveled corners

Organizing content was always an important task for web designers. Just like accordions, using a CSS3 tabbed navigation can help you structuring similar groups of content.

Along with so many rounded corners (which lately became the default), today you’ll learn how to create some good looking CSS3 tabs with beveled corners. We’ll do that using a clever CSS3 gradients technique.


There are a lot of articles in the wild that show you how to create tabs with CSS3 and jQuery. Yet, I decided to create my own CSS3 tabs as well and I hope you’ll like my result.

The idea

A while ago I read this wonderful article by Lea Verou about how to create beveled corners using CSS3 gradients. I found that very clever and we will use that technique in order to create our tabs.


The purpose here, as usual, is to write clean and semantic markup: unordered list for the tabbed navigation and simple div‘s for wrapping content.

So, check the HTML below:

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>
    <li><a href="#" title="tab4">Four</a></li>

<div id="content">
    <div id="tab1">One - content</div>
    <div id="tab2">Two - content</div>
    <div id="tab3">Three - content</div>
    <div id="tab4">Four - content</div>


Minimal and easy to update styles, also no images were used here:

  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;

#tabs li{
    margin: 0;
    padding: 0;
    float: left;

#tabs a{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background:    -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:         linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;

#tabs a:hover{
    background: #c93434;
    background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:         linear-gradient(220deg, transparent 10px, #c93434 10px);

#tabs a:focus{
    outline: 0;

#tabs #current a{
    background: #fff;
    background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:         linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;

    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;

/* Remove the rule below if you want the content to be "organic" */
#content div{
    height: 220px;

The jQuery

The code below it may not be the best possible, but I think it’s pretty decent 🙂

$(document).ready(function() {
        $("#content div").hide(); // Initially hide all content
        $("#tabs li:first").attr("id","current"); // Activate first tab
        $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab

The result

Check out the transparent corners! You can use the tabs with any background image. No side effects, no overlapping colors to match or something else.

Also, the left shadow helps creating the effect of overlapping tabs.


Browser support

If you read my previous articles, then you already know that I like to do stuff that works (even if it just degrades gracefully) also on older browsers like the IE (Trident).

Having said that, this demo is working also for older browsers. Obviously, it just look slightly different, as no CSS3 support is available:

Such a gradient for Safari (lower than 5.1) would be quite complex. So, I decided to skip it (for now).

That’s it!

I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.

Posted by: Dhiraj kumar

How to solve common IE bugs

Lately, I wrote more about HTML5, jQuery, CSS3 features and its awesomeness. Today’s article is about Internet Explorer common CSS bugs and how to solve them.

You may ask me “why this article?” and you have all the reasons to do that. If you read some of my previous articles, then you know I’m a CSS3, jQuery addicted. But sometimes, when working on some projects that require cross-browser compatibility, you need to know how to action when you encounter IE bugs.

Modern browsers are constantly evolving and their bugs or strange behaviors are always fixed due new version releases. But what about old browsers like Internet Explorer 6/7? As they are not maintained anymore, their rendering bugs became sort of “de facto”.

Conditional comments

<!--[if IE 6]>
        IE6 stuff

Internet Explorer 6 conditional comment

<!--[if IE 7]>
        IE7 stuff

Internet Explorer 7 conditional comment

There are also more options here, but I think the above one are to most used.

Specifically target elements

  color: #000;
  color : green\9; /* IE8 and below - just in case */
  *color: red; /* IE7 and below */
  _color: blue; /* IE6 and below */

If you are not a big fan of conditional comments, then you may try this solution.

Just in case, I added the line who can help you target the IE8 browser. But, sincerely, if you will need to target Internet Explorer 8, then you have bigger problems. I mean, you should start reviewing your CSS code!

Doubled Margin

  float: right;
  margin-right: 50px;

This is perhaps the most encountered bug when using floated blocks. For the above example, IE6 will double the right margin. To fix this, add display: inline to the floated element using one of the above methods (conditional comment or specifically targeting).

Button’s padding is ignored

Try to add padding to an button, you’ll see how the padding’s values are ignore on IE6 and IE7. To fix that, add overflow: visible to that button and the problem will be solved. Read more about this here.

Negative margins

IE6 and negative margins weren’t never called friends. When you use a negative margin for an element, to avoid layout problems, you should add position:relative to it.

More bugs/fixes?

To find out more about these common problems check this amazing resource about these bugs.

What are the most annoying bugs you encounter in your daily developing? Share them with us by adding a comment.

In the end

Its name was Internet Explorer 6. Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.

…and I’m not the one who’s saying that. 🙂

Posted by: Dhiraj kumar

10 Web Usability tips for your website

At the beginning, perhaps you were developing websites just for fun or you were just learning some new tricks, but now, when you are developing a website or a web application you can’t afford to skip the usability basics rules.

In this article we’ll try to remember some basic, unwritten web usability rules.


1. Place the logo always in the left corner of the viewport

As drivers use to search for green traffic light to start leaving the intersection, users search the logo in the left side of the website to click on it. They are used to click on it to access the home/main page of the website. Also, as usability tests proved, the left corner of a website is the most visible content.

2. Add CSS states (almost) to everything

Nothing is more annoying that hovering a website menu, or a button, link etc without seeing a change. The user is searching for interactivity and if you, as web developer don’t offer him that, you will lose him. Beside hover, for example a button should have also an active state (pressed style). This way the user will fell he’s always under control.

CSS states example

<a href="#" id="button-style">My Button</a>

  background: #eaeaea;

  background: #9c9c9c;

  background: #777777;

3. Use label’s “for” attribute

When in a form, and you need to click on a checkbox input or radio input, it will always be easier to be able to check/uncheck the input by toggle-ing also on the label. Using labels for forms is also an accesibility “golden rule”. Getting back to usability rules, a common mistake is to use the label tag without it’s for attribute. Here is a good example for using labels when inner a form:

<input type="radio" name="options" id="id-1">
<label for="id-1">First option </label>

<input type="radio" name="options" id="id-2">
<label for="id-2">Second option </label>

As result,selecting a radio option is easier. Cool huh?

First option
Second option

4. Breadcrumbs

Using breadcrumbs could be compared with GPS navigation, the user will know his current position inside the website, it will help him to no get lost. You want to guide him through your website and you don’t want to have him annoyed by the fact he’s lost – because in this case you risk to loose him, he could exit your website immediately. Get inspired by the well known breadcrumbs patterns around the internet.

5. Highlight form fields

If you are dealing with text inputs and textareas you should use CSS focus state to specify when the user has clicked inside an input or textarea. This way user will know which form element he clicked.

Quick CSS example

  border: 1px solid #9c9c9c;
  background: #eaeaea;

  border: 1px solid #323232;
  background: white;

6. Use HTML tags accordingly

Use heading, paragraph, bold elements in the right way, as they should be used. Take advantage of them by using heading to highlighting titles, use paragraphs to add a text section and bold to highlight words in the text section. Make your text easier to read by creating a text flow, this way the user will easier scan titles and sections.

Also keep in mind to use headings in their “normal” order: h1, h2,…etc. It’s recommended again not having more then one h1 per page, usually h1 contains a very important text like main title of the page, for example could be “purchase” or “download”.

7. Create a sitemap

A site map is a website structure representation, a link collection that helps improving user’s website navigation.

8. Rich content footer

Every time you build a site you should keep in mind that a website should have a header, content and footer, in some cases the last one is missing and the website looks a bit strange…it’s like “hmm…something’s missing?!”.  Lately footers are getting richer and richer content, so take advantage and add information to it and do not forget to get inspired.

9. Think as you are the user

Also, you are an user after all, but imagine you are your own website user, try scenarios, act as you have no idea about the content of your site and try finding important links as purchase, download etc. If it’s hard for you, because you already know every comma in your site, ask a friend or colleague for a feedback. Keep in mind that every opinion matters.

10. Read, read and….read again about usability

If you think you know enough, that means you still have a lot to learn. Usability evolves, but the main principles are staying and reading can help you improve yourself.
Here’s a short book list I’d recommend to read:

  • Don’t Make Me Think – Steve Krug
  • Designing Web Usability: The Practice of Simplicity – Jakob Nielsen
  • Designing Web Interfaces: Principles and Patterns for Rich Interactions – O’Reilly

Posted by: Dhiraj kumar

Slick login form with HTML5 & CSS3

We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code.

Knowing that, check out the below preview to see the login form we’re going to create in this article:



<form id="login">
    <h1>Log In</h1>
    <fieldset id="inputs">
        <input id="username" type="text" placeholder="Username" autofocus required>
        <input id="password" type="password" placeholder="Password" required>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href="">Forgot your password?</a><a href="">Register</a>

The HTML5 stuff

New HTML5 attributes descriptions, according to latest specifications:

  • placeholder – A short hint (one word or a short phrase) intended to aid the user when entering data into the control represented by its element.
  • required – Specifies that the element is a required part of form submission.
  • autofocus – Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded.
  • type=”password” – Specifies that its input element is a one-line plain-text edit control for entering a password. (not HTML5 specific)


For this article, I will not paste the whole lines here. Instead, I’ll just add the ones who help creating some cool effects.

Paper stack effect

Box-shadow will help us creating this nice effect by defining multiple shadows that actually overlap.


          0 0 2px rgba(0, 0, 0, 0.2),
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,
          0 7px 0 rgba(0, 0, 0, .2);

Stitch effect

This effect is added using pseudo-elements. Using pseudo-elements helps you avoid extra markup and this is a perfect example: keep the markup clean and let the CSS do the magic.


    position: absolute;
    z-index: 0;

    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;

Styles excerpt.

Subtle gradient lines

I’ve first seen this effect on Gene Locklin‘s page and I thought this is pretty cool. So, I decided to use it for highlighting the “Log in” heading. Using pseudo-elements (again) and CSS3 gradients some cool lines are added to simulate a strikeout effect.


    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;

h1:after, h1:before{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;

    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);
    right: 0;

    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;

The final result

Using the above techniques, here’s the final result:

Login form final result


This login form looks very well also on older browsers, as you can see below:

Internet Explorer 8 screenshot.

As a future improvement, you can add also HTML5 placeholder fallback.

Posted by: Dhiraj kumar

Simple and effective dropdown login box with HTML5, CSS3 and jQuery

Web users log in every day, so imagine how many times log in forms are being used in a single day. Usually, it don’t take too much to fill a form like this, but using a dropdown solution will speed up things for you.

In this article, you will see how to create a good looking dropdown login form using HTML5, CSS3 and a bit of jQuery.


The concept

The main purpose is to avoid waiting to load a separate page in order to log in. This way you can increase user experience, as the user has the possibility to log in immediately.


Remember the CSS3 buttons we’ve created using HTML entities as icons? In this article we’ll use entities again to show an arrow that indicates the current state for our dropdown log in box: expanded/collapsed.


Here’s the markup we’ll use to create our CSS3 dropdown log in:


                <li id="login">
                        <a id="login-trigger" href="#">
                                Log in <span>▼</span>
                        <div id="login-content">
                                        <fieldset id="inputs">
                                                <input id="username" type="email" name="Email" placeholder="Your email address" required>
                                                <input id="password" type="password" name="Password" placeholder="Password" required>
                                        <fieldset id="actions">
                                                <input type="submit" id="submit" value="Log in">
                                                <label><input type="checkbox" checked="checked"> Keep me signed in</label>
                <li id="signup">
                        <a href="">Sign up FREE</a>


There are quite a lot of CSS lines, but I think is worth it:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

nav li {
  float: left;

nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff;

nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff;

nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;

nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;

nav li #login-content {
  right: 0;
  width: 250px;


#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;


#login #actions {
  margin: 10px 0 0 0;

#login #submit {
  background-color: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;

#login #submit:hover,
#login #submit:focus {
  background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);

#login #submit:active {
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

#login #submit::-moz-focus-inner {
  border: none;

#login label {
  float: right;
  line-height: 30px;

#login label input {
  position: relative;

  top: 2px;
  right: 2px;


The following code is quite self-explanatory. The if… else statement helps us indicate the current state for the log in box. It basically toggle the span‘s inner HTML between ▼ and ▲.


                if ($(this).hasClass('active')) $(this).find('span').html('▲')
                        else $(this).find('span').html('▼')

view demo

That’s it!

I hope you enjoyed this tutorial, don’t forget to leave a comment. Thanks for reading!

Posted by: Dhiraj kumar

How to create slick effects with CSS3 box-shadow

Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.

Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.


box-shadow property

The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Rocket science?

Not at all, here’s an quick example:

box-shadow: 3px 3px 10px 5px #000;

This CSS declaration will generate the following shadow:

  • A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.
  • The second length is the vertical offset. A positive value for the vertical offset basically offsets the shadow down, a negative one up.
  • You’re not allowed to use negative values for blur radius. The larger the value, the more the shadow’s edge is blurred, as it can be seen above.
  • Spread distance positive values cause the shadow shape to expand in all directions by the specified radius.
    Negative ones cause the shadow shape to contract.
  • The color is the color of the shadow.
  • The inset keyword (missing above), if present, changes the drop shadow from an outer shadow to an inner shadow

The above theory it’s just a small amount, if you want to read more, than be my guest and check the W3C specs.

Enough theory, let’s see some stuff!

Now let’s see how can you take advantage of this wonderful CSS3 feature. Below I’ll show you how to enhance your designs with the coolest box-shadow techniques!

Add depth to your body


   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);

Drop shadows

  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;

#box:before, #box:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);

  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;

Quick tips

Try spicing up shadows with RGBa (Red-Green-Blue-Alpha) color. The box-shadow property can be used using CSS3 RGBa colors to create shadows with differing levels of opacity. If your browsers supports thebox-shadow property, then it will definitively support the RGBa color mode.

Use multiple shadows in one CSS declaration:

  box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;

Browser Support

  • Internet Explorer 9/10
  • Firefox (from 3.5)
  • Safari/Chrome
  • Opera (from 10.5)

view demo

Final words

You should start using these techniques today and I mean it. Why’s that? Because you can, as box-shadow will not break your layout on older browsers.

Posted by: Dhiraj kumar

Create Icons in CSS Without Image

This is not the kinda stuff you should do in production, but there is a little #CSS trick that might help you.

The problem with us developers is that it’s much quicker and easier for us to write couple of lines of code than find an appropriate image and place it on a page. If that’s about you, then here is a little css hack for you that will make your life easier.

Say you make all sorts of action links on your page, thins like edit, delete, add new and so on. Normally you would just add related css classes to them like so

<a href="/stuff/new" class="add">Other Post</a>
<a href="/stuff/123/edit" class="edit">Edit </a>
<a href="/stuff/123" data-method="delete" class="delete">Delete</a>


The basic idea is that you create some semantically correct links in your #HTML and then paint them with CSS. Often people use icons and so on

a.add {
padding-left: 20px;
background: url('/icons/add.png') left center no-repeat;

The problem is that you will need to bother with the icon images, drag around a collection of some default pictures or something like that and it usually a bit annoying because in early stages of development it doesn’t matter what you put in there, later on your boss will hire a designer who will screw everything anyways.

To save yourself a bit of time and feel more hardcore, you actually can use a simple css hack with the :before constructions and utf-8 symbols. Like that

a.add:before {
content: "\u271A ";
a.edit {
color: gren;
a.edit:before {
content: "\u270E ";
a.delete {
color: red;
a.delete:before {
content: "\u2718 ";

Those weird numbers are the UTF-8 codes of various symbols. You can find them in the Internet, or if you’re under OSX, then you can open up the character viewer, find an UTF-8 icon you like and get your code from the character info. In the end it will look kinda like that

imageless icons with css

The nice thing about this approach is that it’s really quick to implement. You just get an UTF-8 code from the character viewer, paste it in your CSS and that’s it.

Later on, when you have an actual design, you always can replace those things with proper images.

NOTE: your page have to be in UTF-8 encoding, otherwise you’ll see squares in place of the icons

Posted by: Dhiraj kumar

HTML vs. xHTML vs. DHTML : Professional View

htmlHTML:  HTML (HyperText Markup Language): HTML is the most widely accepted language used to build websites. It is the main structure of a website. It builds tables, creates divisions, gives a heading message (In the title bar of programs), and actually outputs text.

XHTML (eXtensible HyperText Markup Language): : XHTML is extremely similar but follows the rules of XML. The main differences between HTML and XHTML are the case-sensitivity, the need to use closing tags for all tags, the need to use quotes around all attribute values and that all attributes must be in lowercase as XML requires. Special characters between tags need to be replaced with its code equivalent. Declaring the correct doctype (first line in source code) and language (in meta tag in the head of the source code) is required.

XHTML is used to be compatible with XML programming. Following the rules now would make it possible to include XML programming in the future. It is not difficult to change HTML pages to XHTML, but it can be time-consuming. Finding all line breaks and images to include closing tags, converting any uppercase to lowercase and any other incompatibility can be a nuisance. Using a find and replace program can allow you to edit your code faster, but you still have to reupload all those changes. It is recommended that programmers try to remember these rules to comply with W3C recommendations, so the web pages appear correctly in most browsers.

When should you be concerned with XHTML instead of just plain HTML? If the website will contain a catalog of items as in an ecommerce site, the site accesses a database, the site accesses information from another source that uses a different programming language or the site is expected to grow and exist for many years. XHTML is used when referring to XML files used for RSS feeds, some music players, some image galleries and many more applications.

XHTML is popular for mobile web design when used with proper CSS code. Try viewing your website in a mobile simulator to see how your website looks. If you want mobile phones like Nokia or iPhone to access your website, you should use XHTML. You may need to change your DOCTYPE, but if you do, you may need to change additional code. Try to avoid JavaScript, large files, large images and tables.

XHTML  is the same as HTML, except it has a cleaner syntax. XHTML uses the same tags as HTML, so people who know HTML know messy XHTML.

Some new rules are followed in XHTML like:
  • XHTML elements must be properly nested.
  • XHTML elements must always be closed.
  • XHTML elements must be in lowercase.
  • XHTML documents must have one root element.
  • In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
  • In XHTML, all elements must be properly nested within each other, like this:
 <b><i>This text is bold and italic</i></b>

DHTML(Dynamic HyperText Markup Language): is a combination of different technologies to make your HTML interactive. Common languages used are HTML (of course), Javascript and Stylesheets. is not a language, but the art of using HTML, JavaScript, DOM and CSS together to create dynamic things, such as navigation menus.

Sample HTML code of .html file

<title>The Professionals Point</title>
\\ Here we add path of javascript and css files.
\\ Here we write code for designing the page.

Posted by: Dhiraj kumar

Practical CSS3 tables with rounded corners

css3-tables-browser-supportThere has been some discussion in the past about how/when to use tables in web development. Though, the conclusion is the same: when you’re dealing with tabular data, tables are absolutely required.

Designing a table is a challenge – and here I’m not talking only about the way it looks. It’s (mostly) about how easy is your table to read. If your table isn’t easy to scan, usually users get annoyed as they lose focus when trying to find the right column and row.

Having said that, today we’re going to create beautiful and practical tables styled using CSS3. Also, jQuery will be used to create fallbacks for older browsers.

What’s so cool about these tables?

In this article you’ll see how CSS3 and tables can work together to create some cool and usable results.

  • Rounded corners with no images
  • Very easy to update – there are no extra CSS id’s or classes added
  • User-friendly and easy to read

Rounded table corners

Here’s the trick: while border-collapse‘s default value is separate, we need also to set theborder-spacing to 0.

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;

For IE7 and lower, we need to add a specifically line, in order to create a good fallback for the tables.

Then, we just need to round some corners:

th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;

th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;

    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;

jQuery hover fallback

You may already know that when it comes about IE6:hover does not actually work on non-anchor elements.

So, to make it work, instead the CSS solution we’ve used:

.bordered tr:hover{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;

you could use some jQuery code to simulate the hover effect:

$('.bordered tr').mouseover(function(){

and here’s also the styles for the CSS highlight class:

  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;

The above is basically the .bordered tr:hover duplicate.

jQuery zebra fallback

To create the zebra effect, using CSS3, we’ve selected the even rows within the tbody:

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

Now, the above selector is a CSS3 one – so no support for older browsers. Below you’ll see how we may target and style the even rows for all browsers:

$(".zebra tbody tr:even").addClass('alternate');

A simple jQuery line.

.alternate {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

The CSS class that will style the even rows.

Browser support

The tables already degrade very nice on older browsers, so it’s up to you if you want to use also the above jQuery solutions. It’s all about the visitors audience you’re targeting.

view demo


Do you like the CSS3 tables I made? Feel free to comment about the final result and thanks for reading this article!

Posted by: Dhiraj kumar

What Slated for CSS4 Selectors?

css4-selectorsThe CSS Working Group recently published the first working draft of CSS4 Selectors. “Wait…CSS 4? I thought CSS3 was still incomplete” you might ask. The spec process changed after CSS2.1. Instead of one monolithic spec, CSS3 was broken down into smaller bite sized chunks. Each chunk or module graduate to the Recommendation stage independently when they’re ready. As each module doesn’t depend on each other (typically. Some related modules might have dependancies, such as CSS3 Selectors on CSS Namespaces) work can start on the next level of the module–if there is demand for a new version–after the current level reaches REC. Therefor work on CSS4 specs will go on in parallel with CSS3 modules. The selectors specification is one such module where there is demand for some new features .

Introducing Selectors level 4

The CSS4 Selectors spec has already seen a large number of revisions since level 3. As it is still the first draft of the spec, it will likely change in numerous ways before it becomes a recommendation itself and there are browser implementations. Lets have a quick dig into the draft and see what has changed.

Moving homes. In-N-Out the spec

There are some selectors that were moved into CSS4 Selectors from other specs, and some that were removed and are looking for a new home:


One of the first things you may notice about the spec is that pseudo-elements are gone from the spec. Don’t worry though, they will find a new home in a different spec in the future. I’m not sure if this will be its own spec or merged into another one. I wonder if this is to prepare for styling the Shadow DOM.

UI state pseudo-classes

While pseudo-elements were moved out, the user interface state pseudo-classesfrom CSS3 Basic User Interface have been moved into the spec. These target various states that UI components can be in, such as if checkbox is checked or unchecked or if a value is required or not. They were mapped to XForms states in CSS3 UI, but they are in general language agnostic. They’re perfect for styling HTML5 Form elements. I assume they were moved to put all the selectors in one place except pseudo-elements. Makes sense to me.

Contextual reference element pseudo-class

What a mouthful. This is the :scope pseudo-class. You might not have heard of this, but it comes from Selectors API Level 2.

If you don’t understand what the :scope pseudo-class does then don’t worry. It is quite difficult to understand from the spec, and I had to ask the Lachlan Hunt myself. As far as I understand it, the :scope pseudo-class acts as a placeholder in the selector list. It is replaced by a specified reference element. In the case of Selectors API 2, the element can be specified as an argument in the querySelector,querySelectorAll and matchesSelector methods. This is much easier to understand if I show it in an example:

    var el = document.querySelector("#foo"); // returns first element with ID of foo
    var bar = document.querySelector(":scope > p", el); // returns equivalent of "#foo > p"

In the above example, “:scope > p” and “#foo > p” are not 100% equivalent. The later will return the first p element that is a child of an element with ID of “foo”. With the former, instead of any #foo, it will only use the first #foo in the document. As multiple IDs are illegal the difference in this particular example will not show off too often, but as you can imagine, the difference is important when using a reference element can appear multiple times in the document.

The :scope selector is most useful when reference elements are generated programatically, so it is not possible to write a static selector string. The selector is not currently implemented in any browser.

Changes to existing selectors

In CSS3 selectors, the negation selector (:not) can only accept a simple selector. A simple selector is either a type selector (an element name such as p or em), universal selector (the selector), attribute selector (those that target attributes such as [att], [att=val], etc.), class selector, ID selector, or a pseudo-class selector. Pseudo-elements and combinators (e.g. ul liul >li etc.) are not supported, and the negation selector can not be nested. These restrictions have been relaxed somewhat in CSS4 Selectors to also allow a selector list. Both simple and compound selectors are allowed. Pseudo-elements and nested selectors are still not supported however.

New proposals

There are quite a few new selectors that have been proposed in the new spec, including one that has been much demanded by web developers.

Matches-Any Pseudo-class

The :matches() pseudo-class is the standardised version of Mozilla’s :-moz-any()pseudo class. This is useful for when you need a number of similar selector strings, but change one part such as the pseudo-classes. Instead of writing li a:link, li a:hover, li a:visited, li a:focus, you can write li a:matches(:link, :hover, :visited). Only simple or compound selectors are allowed. Complex selectors, nesting and using within :not()is forbidden.

Directionality pseudo-class

The dir() pseudo-class selects elements depending on its directionality. This is commonly the direction of any potential text in the element, set with the HTML dirattribute. Note that the dir attribute does not need to be set directly on the element. It could be inherited from its parent. It does not match based on the CSS directionproperty.

The currently defined values are rtl (right to left, e.g. used with Hebrew or Arabic text) and ltr (left to right, e.g. used with latin text). Other values are not invalid, but are not defined to do anything. This allows the spec to be extended if new values are needed (top to bottom for example?).

Hyperlink pseudo-class

The any-link() pseudo-class matches links, no matter if their history state is unvisited (:link) or visited. This is needed because once a link is visited the regular:link pseudo-claass does not apply any longer. This saves you having to specify both when you want to style both states the same way. The name is not set in stone, so if you have a better suggestion then get in touch with the working group.

Local link pseudo-class

The :local-link pseudo-class selects elements whose links are local links. If you use the plain :local-link pseudo-class, without parenthesis, then it matches elements that link to the current page. That is exactly the same URL as the document, sans any fragment identifier. Parenthesis can be added, taking a digit as a value. Using 0 (a:local-link(0)) will match a link that is the same domain. A value of 1 matches the domain and the first path segment. A value of 2 matches the domain and the first two path segments, and so on. For example, if the URL of the document is http://www.example.com/foo/bar/baz, the a:local-link(1) would matcha elements with links that matches http://www.example.com/foo, while a:local-link(2) would match a elements with links that matcheshttp://www.example.com/foo/bar.

Time-dimensional pseudo-classes

There are three time-dimensional pseudo-classes: :past:current, and :future. These relate to time related rendering (or time-dimensional canvas as the spec says), such as speech rendering of HTML documents (text to speech). The :currentpseudo-class matches the element that is currently being rendered (such as styling the image that is currently being spoken). The :past pseudo-class styles matches elements that were rendered in the past (e.g have already been spoken), and:future matches elements that will be rendered in the future (will be spoken). There is also a version of :current that takes arguments in parenthesis. This works in much the same way as the :matches() pseudo-class, where it matches any of the comma separated selector compound selector strings. I am not 100% if I got this one right, as I am not familiar enough with time-dimensional canvas.

New tree-structural pseudo-classes

There are two new tree-structual pseudo-classes: nth-match and nth-last-match. These work much the same way as nth-child and nth-last-child, using the samean+b notation. However you also include the of keyword and a selector string that is used to match a subset of the results. This is difficult to understand when reading the spec, but an example makes it clearer. If you have the selector button:nth-match(even of .active), instead of selecting all even button elements as withbutton:nth-child(even), it will first match the subset of elements with a class of active, then match the even elements from that subset.

Grid-structure pseudo-classes

There are three grid-structure pseudo-classes: :column():nth-column(), and:nth-last-column. In HTML individual cells of tables are marked up in rows (using the tr element). The column the cell belongs to is implied rather than than the cell being a child of the col element. Due to this one dimensional hierarchy, to style individual table cells based on the column it belongs to, we need the :column()selector. It accepts a list of one or more selectors. Based on the semantics of the language, it calculates if the cells belong in the columns that match the selector list. For example :column(col.total) selects all the td cells in the total column.

The nth-column() and nth-last-column accept an+b notation as their argument, in the same way as other similar pseudo-classes. For example, :nth-column(odd)would select all table cells in odd columns.

Reference combinators

Reference combinators allow you to select elements that are referenced by ID by another element. One of the most common occurrences of this is when a labelreferences the ID of its related control in the for attribute. You define a reference combinator by surrounding the attribute with forward slashes (/). For example, if you wanted to style an input element when you hover over its label, you could use the selector label:hover /for/ input (providing the label has a for attribute with the correct ID).

The mythical unicorn: parent selector

That most demanded of selectors is now in the spec. Well not quite. It isn’t just a parent selector. You can now select which element is the subject of the selector. Traditionally this is the right most compound selector in the selector string. This is currently defined with the dollar sign ($), but there is currently some debate on the mailing list, and will likely change. The compound selector that is marked as the subject is the one that will be styled by the CSS rule. If you have a selector such asul li.selected, it will match an element that is of type li that is a decedent of aul element. However, if you want to only style a ul if one of its li elements has a class of selected, you need to make the ul the subject of the selector like so: $ul li.selected. Now all your prayed are answered!

This is the current state of play with the first CSS4 Selectors draft. Anything can and will change as the spec progresses. There are very little in the way of implementations of these features, so I can’t check if I understood them all 100% correctly. If I didn’t then let me know and I’ll update the post.

Posted by: Dhiraj kumar