2013-03-30 3 views
0

Я смотрел на сайте, нашел довольно классный стиль для класса span, но я не мог понять, как он был создан. Я посмотрел файлы css, где я думал, что код будет. Кто-нибудь видел этот стиль раньше или использовал его? Мне бы очень хотелось узнать, как воссоздать этот эффект.CSS Styled Span Class

enter image description here

код, который я смотрел был следующий

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

Любая помощь будет принята с благодарностью

+0

CSS-градиенты - один из способов достижения этого. Вы можете играть с этим генератором, чтобы узнать больше. http://www.colorzilla.com/gradient-editor/ – VKen

ответ

1

Я мог бы производить код CSS вам нужно:

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

вы можете получить помощь от http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/ и играть с ним.

+0

epic спасибо, что мне нужно – ondrovic

0

Они используют образ, который они, вероятно, созданные с помощью Photoshop и просто настройки это изображение в качестве фона для пролета.

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

Либо это, либо они используют css3 gradients