CSS おれおれ Advent Calendar 2012 – 20日目
いわゆるBK (Bad Knowhow) というやつですな。(BKって和製英語の類?)
現象
画像にborder
を付けてborder-radius
も付けると、なんかChromeでうまく表示されないんです。
Firefoxなんかだと正常でした。
※スマホ対応はしてません。
CSS おれおれ Advent Calendar 2012 – 20日目
いわゆるBK (Bad Knowhow) というやつですな。(BKって和製英語の類?)
画像にborder
を付けてborder-radius
も付けると、なんかChromeでうまく表示されないんです。
Firefoxなんかだと正常でした。
CSS おれおれ Advent Calendar 2012 – 04日目
iOSでよくみるあのメニューっぽいのをCSSで組んでみたいと思います。
必要になる知識はこんな感じ:
border-radius
:first-child
, :last-child
box-shadow
先に完成品です。
CSS おれおれ Advent Calendar 2012 – 02日目
円を描く前に、角丸の話をしましょう。というか、角丸の丸をめっちゃ丸くしたのが円です。(ネタバレ)
border-radius
.curled-box { border-radius: 4px; }
上記の例では半径4pxの円を使って、角を丸くします。
元ネタはこちら:
ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。
元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ(ような)事をCSS3でやってみました。
先に完成品です。WebkitとFirefoxのみ。(IEでは、新しいものでも背景がちゃんと出ません。)
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS