3

CSS画像スプライトを使用する代わりに、 を使用してボタンを作成しようとしています。

これらは異なるテキストでサイト全体に表示されるため、特にボタンのサイズがテキストによって異なるため、大きな画像スプライトを作成しても意味がありません。

戻る

これが私が達成できたことです:(元のものとは非常に異なります)

バックウィズCSS

フィドルリンク

a {
    display: inline-block;
    line-height: 20px;
    text-decoration: none;
    font-family: 'Arial';
    font-size: 19px;
    font-weight: 700;
    color: #ddd;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #001151;
    text-shadow: 2px 2px 4px rgba(32,70,97,.55);
    background: #002483;
    background: linear-gradient(
      to bottom,
        rgba(0,36,131,1) 0%,
        rgba(0,44,151,1) 27%,
        rgba(0,61,166,1) 55%,
        rgba(15,77,180,1) 82%,
        rgba(23,83,185,1) 100%);
}

PS : (ブラウザー サポート >= IE9)

のみを使用してこれらのようなボタンを作成できますHTML + CSSか?

4

3 に答える 3

1

グレアのある例を次に示します。divあなたは2秒でそれをする必要があります

デモhttp://jsfiddle.net/kevinPHPkevin/hZgxV/

HTML

<div id="blue_button" >
    <div class="blue_glare"></div>
</div>

CSS

#blue_button {
margin-top:20px;
height: 30px; width: 150px; 
border-radius: 16px; 
border: 2px solid #ccc; 
text-align: center; 
background-color: rgba(60, 132, 198, 0.8); 
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9))); 
background-image: -moz-linear-gradient(top, #1c5b9b, #6cbfff); 
border-top-color: #8ba2c1; 
border-right-color: #5890bf; 
border-bottom-color: #4f93ca; 
border-left-color: #768fa5; 
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; 
float: left;
margin-right: 30px;
}

.blue_glare {
top: 0;
left: 5px;
border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
margin: 0 auto;255
z-index: 10;
}
于 2013-08-15T20:00:07.197 に答える
-1

残念ながら、CSS はこの点でかなり制限されています。ただし、 Base64形式を使用していつでも画像を CSS に埋め込むことができます。

于 2013-08-15T19:57:25.113 に答える