メニュー：立体的に角ばる

ここではulとliでメニューを組み背景に立体的に角ばった画像をを使っている素材を解説しています。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：1px　高さ：30px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

立体的に角ばらせる

まずは好きな色ですべてを塗りつぶします。
そして上半分を少しだけ薄くした色で塗りつぶします。
最後に上下1ピクセルの部分をそれぞれ上をさらに薄く、下を濃い色で塗りつぶせば完成です。

↓：CSSで表示しています

丸みを帯びた感じにする

前回と同様にまずすべてを好きな色で塗りつぶし、上半分つまり15ピクセルにグラデーションをかけます。
下半分の色よりも少しだけ濃い色を描写色に設定し背景色を通常に薄くします。
そして下から上へ描写色から背景色へとグラデーションをかけると上の画像のような感じになると思います。

最後に上の1ピクセルを濃い色で、下の1ピクセルを薄くします。上の画像はわかりやすくするためほかのレイヤーを消しています。
これで完成となります。

↓：CSSで表示しています

CSSで配置

htmlです。

<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>

cssです。

ul{
margin:0;
padding:0;
list-style:none;
width:200px;
color:#ffffff;
}

li{
margin:0;
padding:5px 0 0 10px;
background:url("画像へのパス") repeat-x;
height:25px;
}

解説

repeat-xを使い横方向に繰り返し表示させています。
今回作った画像の高さが30ピクセルとなっているので文字サイズなどを大きくする場合は画像の高さを変える必要があります。

▲トップ