Cool inset Text Effect with CSS3 Text-Shadow

So, I have seen a few tutorials online about using text-shadow to create a basic inset text effect, but they are all lacking the real design aspect that makes the type look like it is actually INSET. That aspect is the inner shadow.

Introduction

I played around with trying to hack box-shadow into background-image in the same way that you can add linear gradients to text, but to no avail.

Well, in any case, I finally was able to get something to work, and yes, it is pretty killer.


insetText

That’s it right there. But, let’s take a look at how and why this works.

First let’s start with defining our class and setting our font. We have styled our div and our body and now we want this text to look like it is stamped into to page.

The CSS

.insetText {
        font-family: Lucida Grande;
}

The next step we want to take is to set the background-color of the text to the color that we want the inset to be. So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
}

Next, we are going to use the background-clip CSS3 property to create a clipping mask using the text to mask the background. Now if you are a designer, you probably already know how a clipping mask works. The color black is transparent to the background and the color white is opaque. Thus, the image behind the mask will show through on only the black parts and the white parts will ‘clip’ it. Remember that, because it’s important.

Remember, CSS3 is not standard yet and may not be supported in older browsers. For now, it’s best to use the standard AND browser specific properties for any CSS3, so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}

Now, I know. It doesn’t look like that did anything, whatsoever. We are back where we started, right? Wrong, in truth, the background color has been clipped behind the text, so it only shows through where the text is. The problem is that the browser default CSS is to make text black. So, now we simply use color to make the text transparent.

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
}

Now we’re getting somewhere. We have taken transparent text and used it to clip it’s grey background. Here is where the magic happens. We will use the text-shadow property with rgba colors. Since the text is transparent, the entire shadow, even what is normally hidden by the text in front of it, will show. If we offset the shadow vertically, it will appear as if it is on the inside of the text. And if we blur the edges, it should actually appear like an inset shadow, since the darker clipped background fading into the white shadow right? And the shadow that falls outside of the clipping mask should appear to glow slightly, since that it’s closer in color to the contrasting background! So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,1.0) 0px 3px 3px;
}

Yeah, that looks pretty good, right? I just don’t like how the inside of the text in now white. It looks kind of unnatural, and it really takes away from the outer glow that gives it the inset look. So let’s revise our shadow color by dropping it’s opacity or ‘a’ value to 0.5. Like so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Perfect! Now we have a completely CSS based inset text effect! We can now add this class to any text element on our websites, without having to open Photoshop or Illustrator, create the document, design the effect, save the image, upload the image, and then place the image in our markup where it will slow down our load time. You would add this to your markup like so…

<h1>This is inset text</h1>

This solution is great for headings. The smaller you make your text the smaller you will need to make your text-shadow.

NOTE: This method is currently only supported by Webkit browser like Google Chrome and Apple Safari.

Thanks for reading, and I hope this helped!

view demo

Posted by: Dhiraj kumar

CSS3 Buttons with Cool Effects – Pure CSS

Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you’ll see what I’ve been working on lately.

css3-patterned-buttons

view demo

I wrote before about CSS3 buttons, so you may want to check also these articles:

CSS3 patterned buttons features

  • Easy-to-use.
  • Contain the transitions on gradients hack.
  • As you may have expected, no images used here. Instead, an base64 string is used to create the patterned effect.
  • Stilish pressed behavior when grouped.

Buttons

Basically, to create a button, the only thing you have to do is this:

<a href="" class="button">Button</a>

or

<button class="button">Button</button>

You could also use something like <input type="submit"> but for best cross-browser rendering, just stick to the above.

THE CSS

.button{
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: linear-gradient(top, rgba(255,255,255,1),
                                         rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC); 
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
              0 2px 2px -1px rgba(0, 0, 0, .5),
              0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);  
}

.button:hover{
  background-color: #eee;
  color: #555;
}

.button:active{
  background: #e9e9e9;
  position: relative;
  top: 1px;
  text-shadow: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

Different buttons sizes

If you want to make a more prominent or a less prominent call-to-action button, you have options:

css3-patterned-buttons

<button class="small button">Button</button>

or

<button class="large button">Button</button>

THE CSS

/* Smaller buttons styles */

.button.small{
  padding: 4px 12px;
}

/* Larger buttons styles */

.button.large{
  padding: 12px 30px;
  text-transform: uppercase;
}

.button.large:active{
  top: 2px;
}

Various buttons colors

You’ll need custom colors for successful actions or negative ones as delete:

css3-patterned-buttons

<button class="button">Button</button>
<button class="color red button">Button</button>
<button class="color green button">Button</button>
<button class="color blue button">Button</button>

THE CSS

.button.color{
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  background-image: linear-gradient(top, rgba(255,255,255,.3), 
  					 rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC);
}

/* */

.button.green{
  background-color: #57a957;
  border-color: #57a957;
}

.button.green:hover{
  background-color: #62c462;
}

.button.green:active{
  background: #57a957;
}

/* */

.button.red{
  background-color: #c43c35;
  border-color: #c43c35;
}

.button.red:hover{
  background-color: #ee5f5b;
}

.button.red:active{
  background: #c43c35;
}

/* */

.button.blue{
  background-color: #269CE9;
  border-color: #269CE9;
}

.button.blue:hover{
  background-color: #70B9E8;
}

.button.blue:active{
  background: #269CE9;
}

Disabled states

In case you’re using buttons or inputs, in some cases you’ll need them to be disabled until a certain task is triggered:

css3-patterned-buttons

<button class="button" disabled>Button</button>
<button class="color red button" disabled>Button</button>
<button class="color green button" disabled>Button</button>
<button class="color blue button" disabled>Button</button>

THE CSS

.button[disabled], .button[disabled]:hover, .button[disabled]:active{
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Usually, !important should be avoided but here it's really needed :) */
  box-shadow: none !important;
  text-shadow: none !important;
}

.green[disabled], .green[disabled]:hover, .green[disabled]:active{
  border-color: #57A957;
  background: #57A957;
  color: #D2FFD2;
}

.red[disabled], .red[disabled]:hover, .red[disabled]:active{
  border-color: #C43C35;
  background: #C43C35;
  color: #FFD3D3;
}

.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{
  border-color: #269CE9;
  background: #269CE9;
  color: #93D5FF;
}

Grouped buttons

There will be cases when you’ll need to group similar call-to-action buttons:

css3-patterned-buttons

<ul class="button-group">
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
</ul>

THE CSS

.button-group,
.button-group li{
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.button-group{
  font-size: 0; /* Inline block elements gap - fix */
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .04);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  padding: 7px;
  border-radius: 7px; 
}

.button-group li{
  margin-right: -1px; /* Overlap each right button border */
}

.button-group .button{
  font-size: 13px; /* Set the font size, different from inherited 0 */
  border-radius: 0; 
}

.button-group .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              5px 0 5px -3px rgba(0, 0, 0, .2) inset,
              -5px 0 5px -3px rgba(0, 0, 0, .2) inset;   
}

.button-group li:first-child .button{
  border-radius: 3px 0 0 3px;
}

.button-group li:first-child .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

.button-group li:last-child .button{
  border-radius: 0 3px 3px 0;
}

.button-group li:last-child .button:active{
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
              5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

Browser compatibility

CSS3 patterned buttons works in all major browsers. But of course CSS3 features used here do not work in oder browsers like IE8 and below.

view demo

This is it!

There are so many CSS3 buttons in the wild and I know it. Yet I’m confident that my CSS3 patterned buttons might inspire you and I hope you’ll find it useful for your future projects.

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