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

Animated 3D Bouncing Ball with CSS3, Html5

Hi guys! Today we are going to see another great example of how to use the power of CSS3. We will start by creating a very cool and realistic 3D ball with pure CSS3 properties, and add a little CSS3 animations for giving the ball a “bouncing” effect.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties (gradient, shadow, border-radius, keyframe animation).css-3d-bouncing-ball

THE HTML

Let’s start with some very basic HTML:

<div id="ballWrapper">
     <div id="ball"></div>
     <div id="ballShadow"></div>
</div>

What we have here are 3 simple DIV elements. “#ballWrapper” is the main DIV which wraps the ball. This DIV will determine the ball’s position and height on the screen. Next, we have the “#ball” element which is the ball markup, and finally there is the “#ballShadow” which holds the ball’s shadow separately from the ball itself.

THE CSS

First, we’ll want to set a basic width and height to our ‘#ballWrapper’ DIV. It will help us position it to the center of the screen:

#ballWrapper {
    width: 140px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -70px;
}

Note that I gave the DIV both top and left position properties of  ‘50%’, and a negative top and left margin which is calculated to be exactly half of the original height and width of the DIV. That way we can center the ball on the screen.

Next in line, let’s give our ball some styles (grow up, it’s not that funny… :])

#ball {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
    box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
                inset -2px -1px 40px rgba(0,0,0,0.4), 
                0 0 1px #000;   
}

We are giving the ball equal width and height and a ‘border-radius‘ property with a value of  ’70px’ (which is half of the original width and height we’ve set) so it will be a ball and not an oval shape.

Another thing you’ll notice is the background. I gave the ball’s element a linear background and 3 different box shadow levels so it would get the 3D effect. The first box shadow level is for the dark shadowing at the bottom of the ball (see image). Then, we have the second level that is responsible for the blurry glow – again, at the bottom of the ball. Finally the third level is a hardly noticeable blurry shadow behind the contours of the ball.

If you take a look at the ball you’ll notice that there is another small oval shape on top of the ball that gives it a reflection effect. Here is how I created it:

#ball::after {
    content: "";
    width: 80px; 
    height: 40px; 
    position: absolute;
    left: 30px;
    top: 10px;  
    background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
    border-radius: 40px / 20px; 
}

I used the CSS pseudo element ::after and gave it a linear gradient with an opacity. In addition, I’ve set the border radius to  ’40px / 20px’ so it has an oval shape.
Next, let’s handle the ball’s shadow:

#ballShadow {
    width: 60px;
    height: 75px;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    margin-left: -30px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
    border-radius: 30px / 40px; 
}

view demo

Again, I used the same properties for centering the shadow, but this time I pinned it to the bottom of ‘#ballWrapper’. I also added a semi-transparent background to it, a fitting box shadow and a border radius.

THE BOUNCING ANIMATION

Now let’s take a look at the fun stuff…

I’ll start by adding the animation property to our ball:

#ball {
    animation: jump 1s infinite;
}

All I did was to define the animation’s name (jump), the animation’s duration (1 second) and how many times the animation will happen – in our case we use ‘infinite’ which means that it will run forever.
The animation itself:

@keyframes jump {
    0% {
        top: 0;
    }
    50% {
        top: 140px;
        height: 140px;
    }
    55% {
        top: 160px; 
        height: 120px; 
        border-radius: 70px / 60px;
    }
    65% {
        top: 120px; 
        height: 140px; 
        border-radius: 70px;
    }
    95% {
        top: 0;
    }
    100% {
        top: 0;
    }
}

So, basically what I’m doing here is to play with the ‘top’ position property of the ball.  Starting from 0, through 160 and back to 0. You’ll notice that in the middle of the animation I’m also playing with the ‘border-radius’ property – that way I handle the “impact” of the ball on the ground.

And now the ball’s shadow; first let’s add the shadow’s relevant animation property:

#ballShadow {
    animation: shrink 1s infinite;
}

I used the same values that I used with the ball, only with a different keyframes animation called shrink which looks as follows:

@-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
    }
}

In the shadow’s animation I played with different properties then in the ball’s animation. In order to give it all a realistic effect when it comes to the ball’s distance from the floor, I needed to animate the shadow width, height and opacity. While the ball is close to the floor, the shadow needs to be darker and smaller. When the ball jumps up, the shadow should be lighter and bigger.

Last, but not least, let’s add the “click effect” to the ball which makes it appear as if it moves away from us when we click and hold. To achieve this effect, all we have to use is the ‘:active’ pseudo-class, add a transition and play with the CSS3 transform ‘scale’ property like this:

#ballWrapper {
    transform: scale(1);
    transition: all 5s linear 0s;
}

#ballWrapper:active {
    transform: scale(0);
}

The transition from a transform value of scale(1) to scale(0) will make it look as if the element is moving away from you.

view demo

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

CSS3 Transitions Effects on Background Gradients

CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette.

Though, there are some simple ways you can simulate smooth transitions on gradients and below you’ll see how to do that.

faking-transitions-on-gradients

Before writing this article, I was thinking this new article will hopefully be more useful to you as It contains one more extra technique that can help you faking transitions on background gradients.

So, what is this about and why would you care about transitions on gradients? The answer is very simple: just think about the situation when you’re designing some CSS3 icons/buttons. To make them look awesome, it’s almost mandatory to use shadows, rounded corners and gradients.

Read the workarounds described below and you’ll be able to greatly improve your gradient buttons, especially their :hover state.
view demo

Initial styles

For this demo, we’re using three colored boxes to whom are applied the following workarounds.

I extracted only the important styles needed and as you can see, the background-color has the most important role, as it’s the one who’s actually being transitioned here.

.boxes li{
	transition: background-color .2s ease-out;
}

.boxes .red{
	background-color: #da232a;
}

.boxes .red:hover{
	background-color: #e75f64;
}	

.boxes .green{
	background-color: #72b01a;
}

.boxes .green:hover{
	background-color: #9ed354;
}	

.boxes .blue{
	background-color: #269ce9;
}

.boxes .blue:hover{
	background-color: #70b9e8;
}

1. Background-image

Having already a transitioned background-color, you just need to set a semi transparent background using background-image and the result will be a smooth gradient transition for the element to whom these styles are applied to.

background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));

2. Box-shadow

Perhaps this is a bit dirtier, but it’s still a fully working technique. Instead of a semi transparent background as above, this assume using an inset box-shadow:

box-shadow: 0 60px 50px -30px rgba(255, 255, 255, .5) inset;

view demo

Conclusion

As you can see, the workarounds above are quite simple and easy to implement. Also, the big advantage is that they don’t require any additional markup element to work.

Thanks for reading and feel free to share your thoughts!

Posted by: Dhiraj kumar

How to create a cool and usable HTML5, CSS3 search box

In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.

css3-searchbox-default-placeholder

Structure

The form element is used as the wrapper, while the two inputs are used as search field and search button respectively.

searchbox-structure

The HTML code

<form id="searchbox" action="">
    <input id="search" type="text" placeholder="Type here">
    <input id="submit" type="submit" value="Search">
</form>

You may notice the placeholder attribute, but just ignore it for now, as we will talk later about it. The reason why there are so many id’s (instead of CSS3 advanced selectors asinput[type="text"] or input[type="submit"]) is because I wanted this to degrade gracefully for older browsers.

The CSS

Form wrapper

#searchbox{
        background: #eaf8fc;
        background-image: -moz-linear-gradient(#fff, #d4e8ec);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));

        -moz-border-radius: 35px;
        border-radius: 35px;

        border-width: 1px;
        border-style: solid;
        border-color: #c4d9df #a4c3ca #83afb7;
        width: 500px;
        height: 35px;
        padding: 10px;
        margin: 100px auto 50px;
        overflow: hidden; /* Clear floats */
}

Below you can see the current result:

form-wrapper

Inputs

Quick tip:

When adding float: left to an element, there’s no need to add also display: block. The last one it’s implied.

#search, #submit{
        float: left;
}

#search{
        padding: 5px 9px;
        height: 23px;
        width: 380px;
        border: 1px solid #a4c3ca;
        font: normal 13px 'trebuchet MS', arial, helvetica;
        background: #f1f1f1;

        -moz-border-radius: 50px 3px 3px 50px;
         border-radius: 50px 3px 3px 50px;
         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

/* ----------------------- */

#submit{
        background: #6cbb6b;
        background-image: -moz-linear-gradient(#95d788, #6cbb6b);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));

        -moz-border-radius: 3px 50px 50px 3px;
        border-radius: 3px 50px 50px 3px;

        border-width: 1px;
        border-style: solid;
        border-color: #7eba7c #578e57 #447d43;

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

        height: 35px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 90px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;

        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover{
        background: #95d788;
        background-image: -moz-linear-gradient(#6cbb6b, #95d788);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}       

#submit:active{
        background: #95d788;
        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;
}

#submit::-moz-focus-inner{
       border: 0;  /* Small centering fix for Firefox */
}

css3-searchbox-default-placeholder

HTML5 placeholder attribute

This new HTML5 attribute shows a text in a field as long as the field is empty and not focused, then hides the text. You surely have seen this technique before with JavaScript! Browser support:

  • Firefox 3.7+
  • Safari 4.0+
  • Chrome 4.0+
  • Opera 11+
  • IE10+

Opera 11 supports it, but you cannot style it (yet). As for the others above, here’s how you can style it:

#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}  

#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

css3-searchbox-default-placeholder

Fallback support

For web browsers that are not supporting the this new HTML5 attribute, I made a fallback. I used Modernizr to detect native support for the HTML5 placeholder attribute. Even if this could have been done by writing a short function, I love Modernizr as it also enables you to use more semantic elements from the HTML5 specs.

#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
}
$(document).ready(function() {
        if (!Modernizr.input.placeholder) {
                var placeholderText = $('#search').attr('placeholder');

                $('#search').attr('value',placeholderText);
                $('#search').addClass('placeholder');

                $('#search').focus(function() {
                        if( ($('#search').val() == placeholderText) )
                        {
                                $('#search').attr('value','');
                                $('#search').removeClass('placeholder');
                        }
                });

                $('#search').blur(function() {
                        if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) )
                        {
                                $('#search').addClass('placeholder');
                                $('#search').attr('value',placeholderText);
                        }
                });
        }
});

Chrome’s inset box-shadow bug

chrome-inset-box-shadow-bug

There is a bug on Chrome (<10) when both border-radius and inset box-shadow are used. Anyway, there is good news about that.  But it has been fixed with Chrome (10) or a greater version.  So, if you’re using Chrome beta 10.0.648.119 or a greater version, this should work just perfect!

view demo

Conclusion

This example it’s mostly about progressive enhancement. Regarding the CSS, as you will notice, this example will degrade gracefully for other old browsers. Now, regarding the HTML5 placeholder attribute, if native support is missing, then the Javascript code will do it for you.

Posted by: Dhiraj kumar

CSS3 Webkit gradient support updated

A while ago, I wrote another article here about the CSS3 gradients. At that time, you saw the browser support, the advantages of using them and their syntax.

So, what’s new since then?
The CSS3 Webkit syntax, which was quite different than Mozilla at that time, has been updated!

webkit-gradient-updated

Latest news

About some time ago, the WebKit dev team announced they were updating the CSS3 gradient support in the rendering engine.

The most important point of their announcement was the that they will bring the CSS3 Webkit syntax in line with Mozilla’s implementation. Pretty cool huh? Now, you will have less headache pain when you’ll use both rendering engines (Webkit and Gecko) gradients.

What about the old syntax?

Now, beside the old old -webkit-gradient value, nightly WebKit builds include support for-webkit-linear-gradient and -webkit-radial-gradient.

No need to worry about the old syntax, it will still be supported.

We’ll maintain support for -webkit-gradient for the foreseeable future for all the existing content out there that uses it.

Webkit team assurances

Linear gradients

linear-gradient

background-image: -moz-linear-gradient(#81a8cb, #cde6f9); /* Firefox */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb)); /* Webkit */

Mozilla, Chrome and Safari CSS3 linear gradients.

Now

background-image: -moz-linear-gradient(#81a8cb, #cde6f9); /* Firefox */
background-image: -webkit-linear-gradient(#81a8cb, #cde6f9); /* Webkit */

Check out the above Webkit updated syntax

Radial gradients

radial-gradient

background-image: -moz-radial-gradient(#cde6f9, #81a8cb); /* Firefox */
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,400, from(#cde6f9), to(#81a8cb)); /* Webkit */

Mozilla, Chrome and Safari CSS3 radial gradients.

Now

background-image: -moz-radial-gradient(#cde6f9, #81a8cb); /* Firefox */
background-image: -webkit-radial-gradient(#cde6f9, #81a8cb);  /* Webkit */

Check out the above Webkit updated syntax

Pros

This syntax update has just pros, no cons! Why’s that?

  • Less complexity
  • No need to search for online CSS3 gradients generators anymore. Both syntax are similar now and you can make the translation easier.

Conclusion

Still not using CSS3 gradients for your website? What are you waiting for?

Posted by: Dhiraj kumar

CSS3 gradients – quick tutorial

CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now.

However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 4+) browsers.

With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).

css-gradients

But first… why use CSS3 gradients?

If CSS can help you to get rid of extra images, then you should consider this as a good solution for your design, because:

  • You will get fewer HTTP requests
  • CSS gradients are scalable, meaning less headaches for you
  • CSS3 it’s so cool 🙂

Firefox syntax

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Webkit syntax

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

IE trident gradient example

I would suggest you to use these filters only in conditional CSS files, otherwise these filters will affect your files performance.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#6191bf, endColorstr=#cde6f9); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#6191bf, endColorstr=#cde6f9)"; /* IE8 */

Cross-browser CSS linear gradient

But, lets see how it works. Use the following lines of code from above together and you will get a cross-browser gradient box.

css-linear-gradient

background: #6191bf; /* Fallback background color for non supported browsers */         

background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#cde6f9'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#cde6f9')"; /* IE8 */

CSS3 radial gradient

IE gradient filters doesn’t support color-stop, gradient angle, and radial gradient. This means you can only specify just horizontal and vertical linear gradients (as above) with two colors, one for start and one for end.

But lets see how you can define a CSS3 radial gradient for Firefox, Safari and Chrome.

css-radial-gradient

background: #6191bf; /* Fallback background color for non supported browsers */          

background-image: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #6191bf);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#cde6f9), to(#6191bf));

Conclusion

Although CSS gradients are great, not all browsers support it (yet). So, you shouldn’t totally rely on CSS gradient when coding your web design and you should always use a fallback for it.

If you have anything to add, feel free to do it in the comments below. Let me know your opinion.

Further reading

Update

Since I wrote this article, Webkit gradient syntax was updatedInternet Explorer 10 Test Drive was launched (glad to see CSS3 gradients are supported) and Opera 11 also added CSS3 gradients to its features.

So here is the latest CSS3 gradients syntax:

  background-color: #6191bf; /* Fallback background color for non supported browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#cde6f9));
  background-image: -webkit-linear-gradient(top, #81a8cb, #cde6f9);
  background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9);
  background-image: -ms-linear-gradient(top, #81a8cb, #cde6f9);
  background-image: -o-linear-gradient(top, #81a8cb, #cde6f9);
  background-image: linear-gradient(top, #81a8cb, #cde6f9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8cb', EndColorStr='#cde6f9'); /* IE6–IE9 */

Quick tip for you

To stay updated with latest CSS3 gradients syntax, check this wonderful CSS3 resource.

Posted by: Dhiraj kumar