0

メニューに3Dのルックアンドフィールを与える2つのPNG画像を左側と右側に含むモダンなメニュースタイルを使用しています。

サイトのスタイルをカスタマイズできるようにしたいので、クライアントの色の希望に基づいて色を変更するためにこれらの画像も必要です。

私の問題は、これをどのように達成するかわからないことです。

私が意味することをスマイリーで示すものを見つけましたが、私の場合、それはcssで作成されたスマイリーではなく、png画像です（http://lab.artlung.com/css3-smiley/）

ありがとうございました。

4

1 に答える 1

1

border-radius を使用して角を丸くするのは非常に簡単です。小さな三角形を作成するには、css 三角形を作成し (このフィドルを参照)、その三角形をグラデーションでスタイルして、3D っぽい効果を出すことができます。角の丸い長方形の左下に小さな三角形を配置するだけで、出来上がりです! これが png なしの 3D 効果です!

三角形のコード:

CSS:

.arrow-left {
margin-left:50px;
width: 0; 
height: 0; 
border-top: 50px solid transparent;
border-bottom: 50px solid transparent; 

border-right:50px solid blue; 
transform:rotate(135deg);
-ms-transform:rotate(135deg); /* IE 9 */
-moz-transform:rotate(135deg); /* Firefox */
-webkit-transform:rotate(135deg); /* Safari and Chrome */
-o-transform:rotate(135deg); /* Opera */

} </p>

HTML

<div class="arrow-left"></div>​
于 2012-12-30T20:40:00.643 に答える