カテゴリー:CSS小技

リスト表示へ

磨りガラスで見たような にじんだ文字を表現するtext-shadow

2011年2月 7日 09:00

text-shadowを使って にじんだ文字を表現する

前回と合わせて連続でtext-shadowネタです。今回は、text-shdaow のぼかし部分を利用して、CSS のみでテキストをぼかすテクニックの紹介です。

今回のテクニックは text-shadow に対応しているブラウザであれば、CSS のみで実現可能です。
まずは下の jsdo.it のサンプルを見てください。(下の方にある「Play」ボタンを押すと実行されます)
スタイルをtextareaに設定しているので、ぼかし状態の文字が入力されるのが確認できると思います。

[Demo] Blur text for CSS3 - jsdo.it - share JavaScript, HTML5 and CSS

ちょっとだけ解説

まずポイントとなるプロパティは当然、text-shadowです。
普通はテキストに影をつけるためのプロパティですね。
それを以下のようにすることでぼかし部分だけを表示することができます。

color が大事なポイントです。普通はカラーは色をつけるのが当たり前ですが、今回のテクニックの場合はこれを透明にしてしまいます。
つまり、影の上に乗っているテキストの色を透明にすることで、結果、影だけが表示されぼかし効果が残る、というわけです。

アニメーションを追加してより効果的に

サンプルを WebKit 系ブラウザで見ている人は気づいていると思いますが、実はこのサンプルにはアニメーションを設定しています。
text-shadow のぼかし部分を 0 から 10px などに指定することで、プレゼンツールで表示されるような効果を得ることができます。ぜひ試してみてください。

超立体的!text-shadowの意外な使い方

2011年2月 1日 09:32

text-shadowだけで手軽に立体文字を作る

元々は CSS3 Watch の記事じゃないか、というコメントを頂きました。調べたところ、そこでこのCSSに関する記事が見つかったので参考として記載しておきます。

今回は、とあるサイトで見かけた面白い表現を紹介したいと思います。
右にある画像が、その表現を拡大したものです。これはテキストに対してtext-shadowを指定しただけです。

もちろんテキストなのでコピペもできるし、textareaに指定すれば入力した文字がこのような立体的な文字になります。

下にjsdo.it上で作成したデモを載せてあります。下のほうにある「Play」ボタンを押すことでサンプルが実行されます。
サンプルはtextareaなので、自由にテキストを入力してみてください。(対応ブラウザは WebKit 系か、Firefoxです)

※ちなみにアンチエイリアスのかかったフォントじゃないとあんまりきれいに見えませんw

ちょっとだけ解説

今回のこのテクニックの肝はtext-shadow(というかそれだけ)です。

複数指定できるtext-shadow

この text-shadow、実は影の部分の指定を複数指定することができるのです。
意外と知らない人は知らない気がするこの指定、カンマ区切りで列挙すればひとつの要素に対して様々な影をつけることが可能になります。

さて、ではどんなことをやっているかというと、サンプルを見ていただくと一目瞭然ですがこの「影を複数指定できる」というのを利用して、立体的に見えるようにたくさんの影を指定することで実現しています。

.realTextクラスに指定している text-shadow の値の最初の 5 つが、文字が飛び出しているように見せる部分。そのあとの 7 つが、その盛り上がった文字からできる影を表現しています。

最初の 5 つの指定で、徐々に暗くなるように色を指定しています。(実際のものは同じ色でも光の当たり方によってグラデーションができます。それを表現している、というわけです)

そして次の 7 で、盛り上がった(ように見える)テキストから、さも影が落ちているような演出をしている、というわけです。

IE では・・・?

残念ながら、最初のほうにも書いた通り、対象ブラウザが限定されてしまいます。
しかし、対応していないブラウザでも、立体的に見えないだけでテキストは正常に表示されます。
なので、こうしたリッチ表現ができるブラウザにはリッチな表現を、そうでないブラウザに対しては情報にアクセスできるようにしておく、という対応ができます。いわゆる「プログレッシブ・エンハンスメント」ですね。

CSSのみで袋文字を実現する - CSS3で遊んでみる3

2010年1月29日 10:46

袋文字のサンプル画像

今回も CSS3 で遊んでみるシリーズです。
"今回のネタは、CSS3 で袋文字を作る"、です。

いちおう、WebKit では -webkit-text-strokeというそのものズバリなプロパティがありますが、そもそも WebKit しか対応していないこと、また微妙に縁がテキストにかぶるので(現状のままだと)使いづらい、というのがあります。

今回のネタは、見栄えはよくないですが、いちおう IE にも対応させてあります。
ただ、やっぱりネタなので実践で使うには「?」ですが、こんなこともできるよーという感じでご覧下さいw

ちなみに、色々なサイズを見られるように JavaScript を使って境界線の太さを調整できるようにしてあります。また、使う人がいるか分かりませんが 設定したものを CSS として書き出すようにしてあります。

RGBaを使ったプログレッシブ・エンハンスメントと注意点

2010年1月27日 14:16

いきなりはてブで vantguarde さんに突っ込まれました・・。今回の件はプログレッシブ・エンハンスメントではないですね。フォールバック、というらしいです。
プログレッシブ・エンハンスメントは、「なくても内容が破綻しない」というときのことですね。今回は "代替" を用意してるので違う、と。てか、こうなるとすでにタイトルが破綻してる気が・・w とりあえず積極的に新しい技術を使っていこう、という気持ちは変わらないので、このままにしておきます、ってことでいちおう注意。
ちなみに CSSのプログレッシブエンハンスメントの例 にちょっと詳しく書いてありました。

ちょっと面白い記事を見つけたので紹介です。(元記事: IE Background RGB Bug

概要はというと、単一セレクタによる指定で RGBa に対応していない IE6, 7 に対処しつつ、対応しているブラウザには RGBa を適用させる、というときの注意点です。

RGBa を使う

RGBa は、IE6, 7 は対応していません。なので、もしそのまま指定すると当然、IE6, 7 では背景色がない状態になってしまいます。
背景色がなくても問題ないこともありますが、例えばベースのテキストカラーが白(黒背景)で、見出しだけ白っぽい背景にした、などという場合、当然その見出しに載せるテキストカラーは黒に近い色になると思います。

そんなとき、もし背景色が表示されないとなるとテキストが見づらいばかりか、最悪の場合見れない、などということにもなりかねませんよね。
なので、RGBa に対応していない IE6, 7 であっても適切に文字が見えるようにしなければなりません。

CSS ハックを利用して、IE6, 7 だけに改めて背景の色を指定する、ということも考えられますがやや冗長になってしまいます。そこで、ひとつのセレクタ内で完結する記述方法が下記です。

CSS ソース01

こうして並べて記述することで、IE6, 7 とモダンブラウザ双方とも背景色が表示されるようになります。

注意点

しかし、元記事でも触れていますが、この方法、ショートハンド(backgroundのみのもの)で指定しないと IE6, 7 では反映しないようです。なので、下記のように書いてしまうと IE6, 7 では背景色が表示されません。

CSS ソース02

プログレッシブ・エンハンスメントという考え方

最近では、モダンブラウザで使える機能は積極的に使い、IE6(場合によっては IE7)などの対応していないブラウザに対しては同じような表示になるよ代替を用意する、という "プログレッシブ・エンハンスメント" という考え方が徐々に広まってきています。
RGBa はとても使いやすい機能なので、積極的に使っていきたいですね。

ちなみに、IE6, 7 では RGBa に対応していない、と書きましたが、filter をうまく使うと RGBa のようなことを実現することは可能です。以前、IE6, IE7でもRGBaを使う という記事を書いたので、よかったら参考にしてみてください。

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトするテクニック

2009年8月10日 10:48

ドロップシャドウ。いまや web デザインにはなくてはならない要素ですよね。
Firefox や webkit 系ブラウザなんかでは box-shadow が実装されはじめていますが、ないブラウザの場合はどうしても画像で用意しないといけません。n

しかしその場合、コンテンツの幅は影の幅を含んだものになってしまいます。
全体を覆う背景がそれであれば、ただ余白の数値を多めにすればいいだけですが、例えば影がある要素とない要素が縦に並んでいる場合、そのまま並べたのでは視覚的に影の分だけずれたように見えてしまいます。n

↓こんな感じでずれが生じてしまいます。
ドロップシャドウ分のずれを説明している図

今回はこの影の部分のずれを CSS で解消してデザイン通りの幅を確保するテクニックの紹介です。n

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトする デモ

サンプルダウンロード

テクニック詳細

ネガティブマージンを使う

このテクニックにはネガティブマージンを使います。
上記 CSS のmargin: 0 -8pxの部分です。n

この -8px というのが影の部分の幅です。なので、影の具合によってこの数値は適宜変わることになります。
こうしてマイナス値のマージンを与えることで、(感覚的に)影の幅の分だけコンテンツ領域が縮小したことになります。n

これにもともと想定していた(影の部分を加算しない)幅をボックスに与えてます。
float して左右に分けているマルチカラムでも、ネガティブマージンによってカラム落ちするのを防ぎます。n

最後に、このままだとテキストなどのコンテンツ内容が影の部分にかぶってしまうので padding で適切に余白を取ることによってドロップシャドウを使ったデザインをすっきりと見せることができます。n

このテクニックを使うことで、マルチカラムなどのデザインをする際にボックスを意識してあらかじめ小さくボックスを作る、というようなデザインを殺すことがなくなります。n

IE 対策

IE の場合、ネガティブマージンを指定すると思ったような表示がされない場合があります。
その場合は "IE6で背景が表示されない際にチェックすること" で紹介している「背景が表示されない要素に「position: relative;」を指定」を利用します。n

これで IE 含め、ドロップシャドウの部分だけを無視させてデザイン通りに表示することができるようになります。n

マウスオーバー時に、レイアウトを崩さずに画像にborderを表示するテクニック

2009年3月24日 23:06

CSS-Tricks というサイトで、画像のマウスオーバー時に 画像の内側に border を表示して、しかもレイアウトが崩れない、という面白い記事を見つけたので自分でも作ってみました。また、ごく簡単に実装できる別タイプも作ってみました。(こっちは多少表示が異なります)n

マウスオーバー時に、レイアウトを崩さずに画像に border を表示するテクニック デモ

説明は以下から。n

不特定の数の横に並ぶブロック要素をセンタリングさせる

2008年9月 2日 13:55

【追記】CSS ソースの記述順序が間違っていました。正しくは、display: -moz-inline-box; display: inline-box; inline-block;の順で記述します。説明ではこの順序が逆でした。
順序が逆だと、Firefox3 でも-moz-inline-boxが適用されてしまい、場合によっては表示が異なることがあります。(サンプルでは Firefox3 でも 2 でも特に問題はありません)

今回はページングなど、システムで動的に数が変わるような横に並ぶブロック要素のセンタリングを実現する CSS を紹介します。

不特定の数の横に並ぶブロック要素をセンタリングさせるデモ

普通、ブロック要素を中央寄せする場合、IE はtext-align: center、そのほかのモダンブラウザはmargin: 0 autoを使って実現します。
しかし、これは同時にwidthに明示的に数値を指定しないとうまく動作しません。

また、モダンブラウザ向けの中央寄せの場合、ひとつのブロック要素がセンタリングされるのを想定しての CSS の指定です。ブロック要素を並べようとすると、floatを使うことになりますが、floatしてしまうとmarginで左右にautoを指定しても中央寄せにはならなくなってしまいます。

そもそも、複数のブロック要素をfloatによって並べたらセンタリングされません。
ではどうしたらいいでしょうか。その答えは、inline-blockです。

余白を設定したdiv内のタイトル要素だけ余白を無視させる

2008年6月19日 18:16

カテゴリごととか、コンテンツごととか、div でひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。

その中で、ひとつの div 内に h1 要素や p 要素、ul 要素などが混在していると思います。
その div に全体の余白を設定するケースもよくあると思います。

しかし、h1 要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。(俺だけかな・・)
まぁサンプルを見るのが一番早いので↓こんな感じ。

サンプルタイトル

サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。

ぱっと見はわかりづらいかもしれませんが、全体を囲う div に padding を設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、その div からタイトル要素だけを外に出して...みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。

で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜか IE では見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスの div の幅が伸びる。
さらに IE の「幅が勝手に伸びる」というバグも手伝って、float しているレイアウトの場合なんかはカラム落ちまでする始末。

なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見!(当たり前かもしれませんが、気づかなかった・・)
なのでメモ的にエントリーを書いてみました。ソースは以下から。

CSS管理を少しだけ便利にする小技

2008年6月 1日 00:22

最近使っているCSSの管理の方法を書きたいと思います。
みなさんも色々工夫をしていると思いますが、CSSの管理はなかなか大変です。
それも、他人が書いたCSSを読むのはとても困難。
というのも、プログラムほどCSS同士の関連性が見えないせいだと思います。

そこで、色々なところで、後から見てもどんな処理をしているのかが分かるようにコメントをつけます。
その際、ある塊ができると思います。
たとえば、あるレイアウトを記述している際に、「#container h2」とか「#container .text span」みたいに「#container」を基準としたCSS群なんかができると思います。
そのCSSを記述する上部に、「#conainerの記述部分はここだよ」的なコメントを入れることが考えられます。
そのコメント部分に「[=toNext]」みたく、タグ(?)を挿入します。
また、この部分以外にも、各コメント部分に上記のタグのようなコメントを挿入するわけです。

これをすることのメリットは、あるプロジェクトなんかでCSSの記述方法のルール付けの際に、「CSSの頭だしは「[=toNext]」で検索すること、みたいにルールを作ります。
この方法に従って描かれたCSSファイルを閲覧するときは、この頭だしのコメントを検索することで各コメントごとへ飛んで行き、ざっとファイルの中身を把握するのに役立てる、ということです。

また、その頭だしされたコメントの中に、そのコメント以下に続く処理がなんなのかを書いておくと、さらに可読性があがると思われます。

・・と、最近やってることを書いて見ました。
みなさんも、こんな工夫をしてるよ、ってことをコメントくださるとうれしいです(*'-')
ちなみに、コメントのサンプルはこんな感じ↓

左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技

2008年3月11日 16:43

float させてリストを横に並べる機会は結構あると思います。
メニューなんかの場合はそれぞれのリスト要素を余白を空けずに並べたりしますが、
通常のリストなんかの場合は左右どちらかに余白を空けて並べるのが通常だと思います。n

その際、当然 margin を使ってそれぞれのリストとの余白を空けますが、
すべてが同じ CSS が適用されるため、margin を指定したくない(大概は最後の)要素が出てきます。
最後の部分に別途クラスを指定するか、CSS3 であれば 3 回に 1 回の部分は margin を消す、
なんていうフレキシブルな対応ができますが、CSS3 はまだまだ実装されてきているとは言えません。n

そこで、現状でも使えるプロパティのみで親要素の両端にぴったりとくっつくように
リスト要素を収める方法を書いてみました。n

左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技デモ

1  2