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

タグ: text-shadow

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

カテゴリー: CSS

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

こんな感じのもの。

ネオン風に。

基本

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

フォント

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

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

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

text-shadowでぼわーんってな

(さらに…)

CSSで白抜き文字を作る方法。text-shadowで囲んでみよう。(CSS おれおれ Advent Calendar 2012 – 03日目)

カテゴリー: CSS

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

text-shadowでテキストに影を付ける事ができます。

text-shadow: <x> <y> <blur> <color>;

<x>, <y>は影の座標、<blur>はぼやけで、それぞれpxなんかで指定します。

また影をカンマ,で区切って複数指定する事ができるので、ぼかしなしの影で囲ってやると、白抜きにしたり縁取りしたり出来ます。

割とよく使えるんじゃないかなーって思います。

実例

(さらに…)

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

カテゴリー: CSS, Web

元ネタはこちら:

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

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

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

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

デモ

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

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

(さらに…)