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.

css3-jquery-tabs

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 HTML

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>
</ul>

<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>
</div>

The CSS

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

#tabs{
  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;
}

#content{
    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) {
        e.preventDefault();
        $("#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.

css3-jquery-tabs-result

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:

css3-jquery-tabs-browser-support
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

Advertisements

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
<![endif]-->

Internet Explorer 6 conditional comment

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

Internet Explorer 7 conditional comment

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

Specifically target elements

p{
  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

p{
  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.

usability-tips

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>

a#button-style{
  background: #eaeaea;
}

a#button-style:hover{
  background: #9c9c9c;
}

a#button-style:active{
  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

input[type=text]{
  border: 1px solid #9c9c9c;
  background: #eaeaea;
}

input[type=text]:focus{
  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:

login-form

Markup

<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>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href="">Forgot your password?</a><a href="">Register</a>
    </fieldset>
</form>

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)

The CSS

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.

paper-stack-effect

#login{
    box-shadow:
          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.

stitch-effect

#login{
    position: absolute;
    z-index: 0;
}

#login:before{
    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.

heading-gradient-lines

h1{
    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;
}

h1:after{
    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;
}

h1:before{
    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
Login form final result

Conclusion

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

login-form-final-result-ie8
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.

drop-down-login

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.

Ingredients

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.

HTML

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

drop-down-login-html-markup

<nav>
        <ul>
                <li id="login">
                        <a id="login-trigger" href="#">
                                Log in <span>▼</span>
                        </a>
                        <div id="login-content">
                                <form>
                                        <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>
                                        <fieldset id="actions">
                                                <input type="submit" id="submit" value="Log in">
                                                <label><input type="checkbox" checked="checked"> Keep me signed in</label>
                                        </fieldset>
                                </form>
                        </div>
                </li>
                <li id="signup">
                        <a href="">Sign up FREE</a>
                </li>
        </ul>
</nav>

CSS

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;
}

jQuery

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 ▲.

$(document).ready(function(){
        $('#login-trigger').click(function(){
                $(this).next('#login-content').slideToggle();
                $(this).toggleClass('active');                                  

                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.

css3-box-shadow

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:
box-shadow-values

  • 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

box-shadow-depth

body:before{
   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

#box{
  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%;
  max-width:300px;
  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);
}

#box:after{
  -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