1個の画像でシンプルに角丸を実装するCSSサンプル:phpspot開発日誌
Simple Round Corners in CSS (revisited) We are going to use a single image (20px x 20px) to provide our rounded corners and to save on using different images we will use one image only and simply place each corner into place using the background-position property. 1個の画像でシンプルに角丸を実装するCSSサンプル。 使うのは次の1枚の300バイトの画像。 なるほど、これでポジションをずらしてあげれば、画像は1枚でシンプルに実装できるわけですね。 HTMLマークアップとCSSの紹介と解説がされてます。 関連エントリ CSSで角丸テ
グラデーション角丸＋リキッドレイアウトをCSSでコーディングする時の考え方 | Blog hamashun.com
追記 2007-11-03 サンプルのDLを追加 ご注意 この記事は、「考え方」を紹介する物です。 「サンプルソースをコピペして使いまわせる！」という類の物ではありませんので、ご注意ください。 魔の角丸 マークアッパーの頭を悩ませるデザインの一つに、角丸があります。 ただの角丸ならまだいいんですが、グラデーションがかかっていて可変幅だったりすると途端に厄介な存在になります。 安直に考えたスライス 厄介さの原因は、画像の枚数の多さです。 グラデ角丸＋可変幅の場合、通常であれば8枚の画像をスライスする事になります。 CSS2.1では1つの要素に指定できる背景画像は1枚だけなので、要素も8つ必要になります。 もちろんdivを8個使ってしまえば実現は容易ですが、その手法は躊躇するべきです。 文書の意味付けにならないdivを増やす事になるので。 考え方とサンプル ではどうするかと言うと、その文書に元
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
