css - CSS Styled Span Class

Question

I was looking on website an found a rather cool style for a span class, but I couldn't figure out how it was created. I looked at the css files, which is where I thought the code would be. Has anyone seen this style before or used it? I would really like to know how to re-create this effect.

the code that I was looking at was the following

 <p>
 <span class="new">New</span>
 </p>

Any help would be greatly appreciated

Answer 1

I could produce the css code you need:

span.new {

padding-right:5px;    
padding-left: 25px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

/* Next 6 lines do the same thing but they are used to prevent compatibility issiues in different browsers */
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #EFA718 100%);
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #EFA718 100%);
background-image: -o-linear-gradient(left, #FFFFFF 0%, #EFA718 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #EFA718));
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #EFA718 100%);
background-image: linear-gradient(to right, #FFFFFF 0%, #EFA718 100%);
}

you can get help from http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/ and play with it.

Answer 2

They are using an image that they probably created using Photoshop and just setting that image as the background to the span.

span{
    background: url('path to image') repeat-none left;
}

Either that or they are using css3 gradients