css - CSS スタイルの Span クラス

Question

私はウェブサイトを探していて、スパンクラスのかなりクールなスタイルを見つけましたが、それがどのように作成されたのかわかりませんでした. コードがあると思っていた css ファイルを調べました。このスタイルを見た、または使用したことのある人はいますか? この効果を再現する方法を知りたいです。

私が見ていたコードは次のとおりでした

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

どんな助けでも大歓迎です

Answer 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/からヘルプを取得 して、それで遊ぶことができます。

Answer 2

彼らは、おそらく Photoshop を使用して作成した画像を使用し、その画像をスパンの背景として設定しているだけです。

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

それか、CSS3グラデーションを使用しています