0

画像を使用して影付きのクロスブラウザの丸みを帯びたボタンを作成する方法を一度読んだことがありますが、残念ながらブックマークを失ったので、テクニックを覚えている人はいますか?

左側の写真があります。

ここに画像の説明を入力

そして、次のように右に曲がった境界線/影で終わる非常に広いボディ画像:

ここに画像の説明を入力

最終的には、複数のサイズで使用できる 1 つのボタンになるのでしょうか。私はこれをグーグルで調べていましたが、今では誰もが画像なしでcssを使用しているようです.

このテクニックがどのように呼び出されるか知っている人はいますか、またはリンクを参照できますか? またはコード例を教えてください。それらのいずれかをいただければ幸いです

4

4 に答える 4

1

ボタンの開始と終了に画像を使用する場合、これらの手法は「引き戸」と呼ばれ、どの検索エンジンでも無数の検索結果があります…</ p>

紹介については、A List Apartの記事を読んでください：http：//www.alistapart.com/articles/slidingdoors

しかし、Neurofluxationが上記のコメントであなたに尋ねたように、CSSでボタンをスタイリングする他の複数の方法があった後、なぜあなたはその年に何をするのでしょうか？たとえば、A List Apartの記事は、インターネット用語での時代である2003年のものです。

于 2012-10-15T15:19:34.803 に答える
0

この手法は、「引き戸」手法のバリエーションです。

基本的に、次のようなマークアップを使用します。

<button><span>Text</span></button>

span次に、親要素のメインの背景画像と重なるように、エッジ画像を横に向けてスタイルを設定します。このようなもの：

button {
    background:url(main-image.png) top right no-repeat;
    border:0;
    padding:0;
    width:80px;  /* with only 1 "door", you might need to set a width */
    /* other resets may be necessary */
}
span {
    background:url(left-door.png) left top no-repeat;
}
button, span {
    height:37px; /* height of your sprite */
    display:block;
}​

デモ： http： //jsfiddle.net/Kqs3m/

結果は、スプライトとコンテンツの自然な幅によって異なる場合があります。

于 2012-10-15T15:21:41.133 に答える
0

画像の代わりにCSSプロパティを使用すると、アプリケーションを高速化できます。

この場合は、Border-Radius、Box-Shadowをグラデーションの背景と組み合わせて使用​​できます。

ここでは、優れたグラデーションエディタを見つけることができます。

http://www.colorzilla.com/gradient-editor/

Border-radiusとBox-shadowの使用方法：

http://www.css3.info/preview/rounded-border/

http://www.css3.info/preview/box-shadow/

于 2012-10-15T17:14:37.900 に答える
0

あなたが探していると思うテクニックは次のとおりです（添付した同じ画像を使用）：

HTML:

​&lt;a href="#" class="button">
  <span>Small</span>
</a>
<a href="#" class="button">
  <span>Large button</span>
</a>​​​​​​​​​​​​

CSS:

​.button {
    background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
    padding-left: 9px;
    height: 37px;
    display: inline-block;
    text-decoration: none;
    color: #555;
    text-shadow: 0 1px 1px #FFF;
    font-family: sans-serif;
    font-size: 0.8em;
}
.button span {
    background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
    display: inline-block;
    height: 37px;
    padding: 5px 12px 5px 3px;
}
.button:hover span {
    ​color: #333;
}​

デモへのリンク: http://jsfiddle.net/v284q/

于 2012-10-15T17:02:11.687 に答える