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

タグ: box-shadow

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

カテゴリー: CSS

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

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

現象

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

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

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

回避策

(さらに…)

CSSでネオン風のスタイルを作ってみた。(CSS おれおれ Advent Calendar 2012 – 14日目)

カテゴリー: CSS

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

こんな感じのもの。

ネオン風に。

基本

背景色を黒に、文字色を白っぽい色にします。

フォント

あとそれっぽいフォントを使いました。

Google Web Fontsの “Grand Hotel” というのを利用しています。

(個別ページってこれで良いのかな。)

text-shadowでぼわーんってな

(さらに…)

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

カテゴリー: CSS, Web

元ネタはこちら:

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

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

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

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

デモ

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

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

(さらに…)