※スマホ対応はしてません。

タグ: border-radius

Chromeで画像の角丸枠線がボケるのを回避する。(CSS おれおれ Advent Calendar 2012 – 20日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 20日目

いわゆるBK (Bad Knowhow) というやつですな。(BKって和製英語の類?)

現象

画像にborderを付けてborder-radiusも付けると、なんかChromeでうまく表示されないんです。

Chrome 23で見た角丸枠線。欠けている。

Firefoxなんかだと正常でした。

回避策

(さらに…)

角が丸いグループのCSSを組むチュートリアル。あのiOSっぽいやつ。(CSS おれおれ Advent Calendar 2012 – 04日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 04日目

iOSでよくみるあのメニューっぽいのをCSSで組んでみたいと思います。

必要になる知識はこんな感じ:

  • border-radius
  • :first-child, :last-child
  • box-shadow

デモ

先に完成品です。

(さらに…)

CSSだけで円を描く方法と、それを使った閉じるボタンの例。(CSS おれおれ Advent Calendar 2012 – 02日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 02日目

円を描く前に、角丸の話をしましょう。というか、角丸の丸をめっちゃ丸くしたのが円です。(ネタバレ)

角丸 border-radius

.curled-box {
  border-radius: 4px;
}

上記の例では半径4pxの円を使って、角を丸くします。

(さらに…)

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。

カテゴリー: CSS, Web

元ネタはこちら:

細部にこだわったWebデザインって?

ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。

  • グラデーションを加える
  • 1pxのラインを加える
  • シャドウを加える
  • ノイズを加える
  • レタープレス効果

元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ(ような)事をCSS3でやってみました。

デモ

先に完成品です。WebkitとFirefoxのみ。(IEでは、新しいものでも背景がちゃんと出ません。)

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS

(さらに…)

CSS3のミサワのつくりかた。

カテゴリー: CSS

CSSを駆使して「地獄のミサワ」風のキャラクターを描いてみました。

CSS3のミサワ

jsdo.itで公開しているコードの100番目という事で、ちょっと凝ったものを作ろうと思ったのがきっかけです。

完全にHTML+CSSだけで地獄のミサワ風の絵図を描いてみました。

コードはjsdo.itのサイトで公開してあります。よろしければご覧ください。(実物の実行サンプルもこちらです。)

CSS3のミサワ

ポイント

以下のCSS3の指定がポイントです。

  • border-radius
  • transform
  • :before, :after

(さらに…)