前回、GIF画像を使った角丸を紹介しましたが、GIF画像の代わりに透過PNG画像を使った場合、HTMLは同じですが、CSSで少し調整が必要になります。(なお、透過PNG画像は IE6以下では未対応です。) この図を見ればわかると思いますが、それぞれの背景画像に透過PNGを使った場合、重なった部分が見えてしまいます(サンプル)。したがって、各 div に margin を入れて調整します。margin の大きさは、c の背景画像の横幅と同じにします。
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01:小さ目な角丸 02:大き目な角丸 03:斜線の角丸(背景画像をループ) 04:ストライプの角丸(背景画像をループ) 05:木模様の角丸(背景画像をループ) 06:リボンのついた角丸(背景画像を固定) 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
Neurotic es una joven pero experimentada consultora de internet que se dedica a la produccin prpia de pginas web y a ofrecer soluciones web para terceras empresas. Solicita ya un presupuesto para tu proyecto sin compromiso o consulta nuestros precios Neurotic, SCP Tel: 938 492 028 Fax: 938 403 568 C\Can Cabatx s/n Les Franqueses del Valls - 08520
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く