CSS おれおれ Advent Calendar 2012 – 20日目
いわゆるBK (Bad Knowhow) というやつですな。（BKって和製英語の類？）
現象
画像にborderを付けてborder-radiusも付けると、なんかChromeでうまく表示されないんです。
Firefoxなんかだと正常でした。
Chromeで画像の角丸枠線がボケるのを回避する。（CSS おれおれ Advent Calendar 2012 – 20日目）
カテゴリー:
CSS
タグ: border-radius
角が丸いグループのCSSを組むチュートリアル。あのiOSっぽいやつ。（CSS おれおれ Advent Calendar 2012 – 04日目）
カテゴリー:
CSS
CSS おれおれ Advent Calendar 2012 – 04日目
iOSでよくみるあのメニューっぽいのをCSSで組んでみたいと思います。
必要になる知識はこんな感じ:
border-radius:first-child,:last-childbox-shadow
デモ
先に完成品です。
CSSだけで円を描く方法と、それを使った閉じるボタンの例。（CSS おれおれ Advent Calendar 2012 – 02日目）
カテゴリー:
CSS
CSS おれおれ Advent Calendar 2012 – 02日目
円を描く前に、角丸の話をしましょう。というか、角丸の丸をめっちゃ丸くしたのが円です。（ネタバレ）
角丸 border-radius
.curled-box {
border-radius: 4px;
}
上記の例では半径4pxの円を使って、角を丸くします。
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。
元ネタはこちら：
細部にこだわったWebデザインって？
ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。
- グラデーションを加える
- 1pxのラインを加える
- シャドウを加える
- ノイズを加える
- レタープレス効果
元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。
デモ
先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。）
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS
CSS3のミサワのつくりかた。
カテゴリー:
CSS
CSSを駆使して「地獄のミサワ」風のキャラクターを描いてみました。