カテゴリー:CSS3関連

リスト表示へ

CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その2

2013年8月28日 19:04

前回はこれから解説していくルービックキューブの紹介と、3D関連の学習に利用した記事などの紹介をしました。
いよいよ実際にルービックキューブについて解説をしていきたいと思います。
まずは基本的なところから始めて行くので、人によっては今回の記事はほぼ知ってることだらけになるかもしれません。

要素の変形 - transformプロパティの基礎

上でも書いた通り、まずはtransformプロパティの基礎から解説していきます。
すでに使ったことがある人ならおなじみだと思いますが、transformプロパティ(WebKit/Blink系はまだ-webkit-のプレフィクスが必要です)にはいくつかの値が指定できます。

実際にtransformプロパティに指定できる関数をいくつか適用したサンプルをjsdo.itにアップしておきました。
以下のサンプルを見てもらうとそれぞれがどういう動きをするか分かると思います。

translate関数

translate関数は平行移動をさせる関数です。translate(30px, 40px);と指定すれば、その要素は右に30px、下に40px移動します。
ただし、marginと違いposition: relative; left: 30px; top: 40px;の指定とほぼ同じ動作をします。つまり、移動結果で他の要素に影響を与えることがありません。

rotate関数

rotate関数は回転をさせる関数です。rotate(30deg);と指定すれば、その要素は時計回りに30度(degrees)回転します。
translate関数同様、移動後の結果は他の要素に影響を与えません。

scale関数

scale関数は拡大・縮小をさせる関数です。scale(2, 2);と指定すれば、その要素は縦横ともに2倍に拡大されます。
仮にscale(1, 2);とすれば、縦だけが2倍に拡大されます。
scale関数も他と同様、結果は他要素に影響を与えません。

skew関数

skew関数はせん断する関数です。skew(30deg);と指定すれば、その要素は30度分、せん断されます。実際にどうなるかは上記のサンプルを見てください。
skew関数も結果は他要素に影響を与えません。

関数まとめ

これら関数は単独で使う以外にも、組み合わせて使うこともできます。 回転させた後に拡大、みたいなことがやりたい場合はtrnasform: rotate(30deg) scale(2);とすることでふたつを組み合わせた変形をすることができます。
その他、関数を任意の数指定することでそれぞれの変形を重ねあわせることもできます。

ただしひとつ注意点があります。それは、関数の組み合わせる順番に意味がある、ということです。
詳しくはこの先の行列あたりの話でする予定ですが、移動してから回転させるのか、回転してから移動させるのかで当然結果が変わってきます。
なぜかと言うと、例えばX軸方向に移動させたい場合、rotate関数はX軸自体も回転させてしまうからです。つまり、回転したあとのX軸方向に移動してしまうため結果が変わってしまうのです。
実際のサンプルは以下です。
rotate x translatetranslate x rotateの違いを表しています。

回転の角度は同じで若干分かりづらいので、元の位置を点線で表しています。元の位置からの違いを確かめてみてください。

実は関数は2D用と3D用の2種類

さて、すでにお気づきの人もいるかと思いますが、上で説明していたのは実は2Dに対しての変形でした。
だって、パラメータをふたつしか渡していないですからね。(e.g. translate(30px, 40px))

3Dは3軸に対しての変換なので3つのパラメータが必要です。(XYZ軸ですね)
ただし、上記の関数に単純に3つのパラメータを渡してもダメです。3D用には専用の関数があります。
といっても大した違いはなく、上で説明した関数名の最後に3dをつけるだけです。
つまりtranslate3d(10px, 10px, 10px)という具合です。(この例みたいに3つの値すべてが同じ場合は引数ひとつでも同じ動作になります)

3Dの変換にはパースが必要

さて、実際に3dをつけて変換を行ってみるとおかしなことに気づくと思います。どういうことかと言うと、3Dっぽくない。
なぜ3Dっぽくないのか。理由は、パース(遠近感)がついていないから、です。
遠近感は人が目にするものは(現実世界であれば)すべてに必ずついているものです。遠くのものほど小さく見える、というあれです。

しかし、コンピュータの世界はそれらもしっかりと数値で指定してあげないと解釈ができません。つまり、3Dの指定だけではダメで、ちゃんとパースをどれくらいつけるか、という指定も同時に必要になります。(注意点として、パースの指定は回転を指定した要素の親要素に指定する必要があります)

実際にその違いを以下のサンプルに用意してみました。実際にどれくらい違いがあるのか見てみてください。

並べてみてみるとその違いは一目瞭然ですね。下のほうがより自然に回転しているように見えます。
今回はパースの値を300pxで設定しましたが、この値をいじることで少しまた違った見え方になるので色々いじってみてください。

変換の要、マトリクス

さて、今回はまだ続きます。でもこれが最後です。そして難関です。
最後はマトリクスです。または行列と言います。

マトリクスのむずかしい点は、まずその引数の多さでしょう。2D用のものでも引数は9個、3D用に至っては16個もの数値を指定しないとなりません。
さらに、それぞれの数値は分かりやすい数値にはなっていません。例えば、X軸に対して30度回転させたい、となった場合でも、どこにも30という数字は出てきません。

実際に指定するとmatrix3d(1, 0, 0, 0, 0, 0.8660254, 0.4999999, 0, 0, -0.4999999, 0.8660254, 0, 0, 0, 0, 1)という数値になります。30なんて数字はどこにも出てきていませんね。
なぜこんな複雑な数値を指定する必要があるのでしょうか。それは、これが回転や拡大・縮小、平行移動などの処理をひとまとめにしたものだからです。(上のサンプルは回転ひとつだけですが、いくつも回転や平行移動などを掛けあわせても、指定するのはひとつのマトリクスだけになります)
実際、今回作成したルービックキューブでは、今キューブのそれぞれの面はどこを向いているのか、というのをこのマトリクスを使って表現しました。なぜなら、ユーザの操作によってキューブは常に姿勢が変わってしまいます。その都度、rotateXがいくつで、rotateYがいくつで・・などとやっていたら、style属性に指定する関数があっという間にとんでもない数になってしまいます。

しかし、このマトリクスを使うことで、何回回転されたとしてもひとつのマトリクスでそれを表現することができます。これが、ひとつにまとめられるメリットです。
行列に関しては別で説明しますが、こうした理由からマトリクスを使って姿勢制御をするという選択を取りました。

実際に指定したものは以下になります。
matrix3dに指定する数値の桁を若干省略したので微妙に角度が違いますが、しっかりと数値を指定すれば同じ見た目になります。

まとめ

いかがだったでしょうか。だいぶ基本的なところなので、知っている人が多かったかと思います。
ただ、マトリクスは普段あまり使わないのではないでしょうか。ルービックキューブでは逆にこれを多用しているので、使ったことない人はぜひ、使い方を知って活用してみてください。

だいぶ長くなりましたが、transformについてまとめました。次回は座標変換や行列について書きたいと思います。(CSSまったく関係なくなっちゃいますが・・)

CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その1

2013年8月20日 09:04

しばらくぶりの更新です。
最近はWebGLやCSS Shaderを始め、3D関係のことをメインに勉強しています。
おかげでだいぶ詳しくなってきました。

ちなみに、CSSでクリアできる、と書いていますが「CSSだけで」ではないので当然JavaScriptもてんこ盛りですw

最近はインプットばかりだったので、備忘録も兼ねて以前案件で制作したCSS Rubik Cubeを解説を交えながら書いていきたいと思います。
CSS Rubik CubeはMaxellの商品のキャンペーンで、エビ中キューブと名付けられたコンテンツです。

エビ中キューブは、エビ中というアイドルグループの動画を、ルービックキューブで操作して自分好みのものに揃えて見る、というものです。
PCだけでも操作可能ですが、これをWebSocketでスマホと接続してスマホからPCに表示されているルービックキューブを操作する、というのがメインコンテンツです。
この「スマホでルービックキューブ」のコントローラ部分の制作を担当しました。

今回はこの「スマホ向けルービックキューブコントローラ」を細かく解説していこうと思っています。(ただ、結構長くなりそうなので何回かに分けて書く予定です)
ちなみにこのコントローラ部分をjsdo.itにあげて、さらに何分でクリアできるか、というゲーム仕立てにしたものをアップしておきました。

以下のデモは、マウスでドラッグするか、スマホでフリップすることでルービックキューブを操作することができます。画面外をドラッグすることでルービックキューブ自体を回転することができるので、全体の状態がどうなっているかも確認することができます。(ただ、これでクリアは相当大変ですが・・w)

実際のルービックキューブサンプル

3Dに関するメモ書き

3Dグラフィクスに関してはインターネット上の記事をメインに、書籍などを参考にしつつ勉強しました。
そのときに集めたメモ書きをqiitaに投稿しているので、そちらも参考にしてみてください。

自作3Dライブラリのデモ

勉強の理解を深めるために、1から自作の3Dライブラリを作ってみたものが以下のデモです。
座標変換、ライティングがメインなので複雑なモデルは作れていませんが、ドラッグなどで3Dの感じを味わえる作りになっています。
またデモは、2D Canvasにレンダリングするものなので、(かなり重いですが)スマホでも見ることができます。

参考書籍

書籍は以下のもの(実例で学ぶゲーム3D数学)を熟読しました。

参考記事リンク

自分が勉強してきた記事で、ブックマークしたものをまとめておきました。
ただひとつ注意点があって、ググって出てくる記事には2通りの種類があるということを覚えておいてください。

どういうことかというと、OpenGLをベースに解説している記事なのか、DirectXをベースにしている記事なのか、です。
次回以降で詳しく解説する予定ですが、このふたつはどちらも3Dを実現する技術です。
なにを注意するかというと、実はこのふたつ、どちらも同じ3D関係の技術ではあるものの、3Dには欠かせない行列による計算がまったく逆なのです。

そのため、これを知らずに行列を計算すると期待と違った結果になってしまいます。
色々な記事を参考にしていて、実はここが地味に大変でした。この行列はどっちのなの!? というw
なので、ここに挙げた記事以外に他のものを参考にする際はその点に注意して参考にしてください。(ちなみに解説する予定の行列の計算はOpenGLの方式をベースにしています)

今回は参考リンクや触り部分だけになりましたが、意外と参考記事を見つけるだけでも大変だったので有用だと思うものをまとめておきました。
次回はいよいよ本格的に解説に入って行きたいと思います。

CSS Shaderで遊ぶ(2)

2013年5月26日 08:15

前回記事、「CSS Shaderで遊ぶ」ではCSS Shaderの触りを書きました。
詳細にはほとんど触れていませんが、どんなことができるのか、CSS Shaderの可能性は感じてもらえたのではないでしょうか。

今回の記事では、前回触れたUIを作るという点にフォーカスを当てて、簡単なエフェクトを作ってみるとともに、シェーダでどんなことをやっているのかひとつずつ見ていこうと思います。とはいえ、自分もまだまだ勉強中の分野のため、間違いだったり勘違いがあるかもしれません。なので、読む方はそれを念頭に読んでいただければと思います。

CSS ShaderでUIを作る

ということで、さっそく今回のために作成したサンプルを見てみようと思います。サンプルはまたしてもjsdo.itに上げました。
UIということで、分かりやすく、Mac OSXのジニーエフェクトを模したものを作りました。
サンプルを見てもらうと分かりますが、実際書いているコードはそれほど多くありません。(JS部分はだいぶ荒削りになってますが)
(ちなみに、3つ並んでいるボタンの中央、「-」ボタンを押すことでエフェクトが実行されます。また、Shiftキーを押しながらクリックするとゆっくりエフェクトします)

CSS Shader適用の流れ

CSS Shaderでは以下の様な流れで状態を決定します。filterの指定の仕方は前回の記事を参照してください。

  • 適用した要素を、指定されたメッシュ数で分割する
  • 分割した部分のそれぞれの頂点位置情報を頂点シェーダに送る
  • 頂点シェーダ内で、CSSから渡された頂点位置情報を元に変形のための計算を行う
  • 頂点シェーダ内で計算された値を(必要であれば)フラグメントシェーダに送る
  • フラグメントシェーダで各ピクセルに対して計算を行い、最終的なピクセルの色を決定する

やや複雑ですが、大雑把に言うとこんな感じの流れになります。
前回の記事で掲載した画像が以下です。上記の処理を図にしたものです。

頂点シェーダに送られる位置情報は、上記画像で言うとcustom()と書かれた範囲の一番最初の、細切れにされたそれぞれの点の位置になります。

次に処理されるフラグメントシェーダはというと、上記の頂点情報から計算され変形された形をピクセル(フラグメント)に分割された各ピクセルに対して計算することになります。

頂点から次の頂点までの間のピクセルに関しては、頂点で計算された値は適切に補間されて値が渡されます。
つまり、頂点シェーダでの計算よりフラグメントシェーダでの計算のほうが回数が多く、単純に高負荷となります。

シェーダソース(Vertex shader)

さて、さっそくソースを見ていきます。今回は頂点シェーダ(Vertex shader)のみです。
フラグメントシェーダでは入力された値を、そのまま出力します(つまりなにもしない)。
まずはソース全文を載せ、続いて個別に解説していきます。

ソース解説

3Dのレンダリングは非常に細かい計算が必要です。そのため頂点シェーダでは基本、最高の精度で計算されます。
しかし当然ながらその分、計算の負荷が高くなります。今回のサンプルではそれを中精度で計算するよう宣言しています。(ただ、精度を指定しなくてもデフォルトが決まっているので問題はありません)
精度は3種類、lowp、mediump、highpが指定できます。

attribute変数

続いてattribute変数です。
attribute変数は頂点ごとに異なる値がCSSから渡される変数です。異なる値と言えば、頂点の位置情報がありますね。
位置以外にも色々情報があるので、頂点属性(attribute)と覚えておくといいでしょう。

前回記事で説明したように、指定されたDOM要素を複数のメッシュで分割し、それぞれの頂点位置を頂点シェーダに送ることで頂点位置を計算することができます。
頂点位置情報はa_position変数に自動で渡されます。つまり、頂点位置はすべて違った値ということになります。

また、頂点以外にも同じような値としてattribute変数に値が渡ってきます。今回の例で言えばa_texCoordです。
これは上記の頂点の位置情報と似たような値ですが、指定されたDOMをさもひとつのテクスチャ画像と見なし、現在計算中の頂点の位置にあるテクスチャ座標を渡してくれる変数です。

ただ注意点としては、a_positionで渡される値が[-0.5, 0.5]の間であるのに対し、a_texCoordは[0.0, 1.0]の間の値が渡されることです。今回のサンプルではこの値を角度に見立てて、下部に行くほど頂点位置が中央に寄っていく演出に利用しました。

a_position,a_texCoordはCSSから自動的に渡されるので、宣言をしておくだけで大丈夫です。(変数名は決まっているのでサンプルと同じように書いてください)

uniform変数

uniform変数はattribute変数と違い、全体で共通の値として設定される値です。
今回の例で言えばu_projectionMatrix,u_timeがそれに当たります。どちらも各頂点で同じ値が使用されます。

u_projectionMatrixは、透視投影(プロジェクション)変換行列です。
行列の意味は長くなるので割愛します。この値も同様にCSSから自動的に渡されるので、宣言をしておくだけで大丈夫です。

u_timeはサンプルで使用するために宣言している変数です。u_projectionMatrixなどと違い、制作者が任意に宣言、使用することができます。
今回の例では、「-」ボタンクリック後からの時間を計測し、それに伴って下部が徐々に縮小していく演出に用いています。

CSSが自動的に設定する変数と意味についてはQiitaの記事でまとめているのでそちらを参考にしてください。

const変数

constは他のプログラムと同様、定数を宣言する部分です。今回は円周率の値として定義しています。

main関数

main関数です。GLSLはC言語ライクな言語なので、main関数を必要とし、各頂点ごとにmain関数で記述した内容が実行されます。

細かい処理についてはコメントに詳細を記載しています。最初に書いたように、a_texCoord.yを角度に見立てて、頂点位置が下に移動すればするだけ中央に寄る計算を行なっています。

最後のgl_Position = u_projectionMatrix * pos;の部分は、計算した位置情報に、プロジェクション変換行列を掛けたものをgl_Positionという特殊変数に渡しています。
これはGLSLの仕様で、gl_Positionに位置情報を渡すことで頂点位置をプログラム側(WebGLやCSS Shaderなど)に伝えることができます。

まとめ

CSS Shaderは、CSSと名がついていながら、実際にはプログラムを記述する必要があります。しかし覚えれば表現できる幅が格段に広がるのでがんばってでも覚える価値はあるでしょう。

ですが、やはりプログラムはちょっと・・という人もいると思います。
幸いにしてシェーダ部分はふたつのファイルに分けて管理されるので、シェーダ部分はライブラリなどを利用し、ちょっとした変化や移動する度合いなどは上記で説明したuniform変数に渡すだけ、という使い方もできると思います。

個人的な意見としてですが、実装がもっと進めばそうしたライブラリがいずれ出てくると思うので、どう使ったらいいか、というのはぜひ覚えておくといいでしょう。

CSS Shaderで遊ぶ

2013年5月16日 09:25

久々の更新です。さらに、ものすごく久々にCSSのネタですw
今回はCSS Shaderについて触れたいと思います。
内容がだいぶ濃いので、徐々に調べながら何回かに分けて書いていこうと思っています。
CSS Shaderについて詳しく話すと膨大な量になる上に、そもそもそこまでまだ詳しくない(w)ので、今回はどんなことができるの? どうやるの? というのが分かる程度の記事にしたいと思います。

CSS Shaderとは

CSS Shaderとは、CSSでOpenGL ES2.0のGLSL(シェーダ記述言語)を利用し、DOMを様々な形に変形、演出することができる仕様です。(ちなみにOpenGLのGLは「Graphic Library」の略)

OpenGL ESはWebGLのシェーダ部分でも利用されているので、WebGLでなにか書いたことがある人はほぼそのまま使うことが出来ると思います。
ただ、CSSで利用するにはいくつか決まり事があり、以下の制約があります。
そのため、GLSLではCSSから渡された情報を元に変形や色の指定を行う必要があります。

  • 各頂点位置データはCSS側で準備し、a_position変数に渡される。
  • 位置データ以外の情報についても、いくつか決まった変数で渡される。(テクスチャ座標など。渡されるデータの種類についてはQiitaの記事でまとめています)
  • シェーダに渡したい情報がある場合は、custom function内に変数名 値(例) hoge 30.0)の形で指定します。

ちなみに、実際に適用してみた例が以下のものです。キャプチャ画像を見てもらうと分かりますが、ただのGoogle Mapを地球儀風に変形しています。
※現在はまだ試験的機能です。そのため、下記のサンプルは2013.05.15時点ではChromeのみ対応しており、かつchrome://flagsから設定を開き、CSS Shaderを有効にするのフラグをオンにしないと動作しません。試験機能をオンにする場合は自己責任でお願いします。

サンプルでは変形と一緒に、ライティング処理もしています。
CSS Shaderでは形状の変形とは別に、変形した内容に対して色を変化させることができるようになっています。
それを応用することで、まるで太陽の光を浴びているような地球の状況が再現できる、というわけです。

形状の変形には頂点シェーダ(Vertex shader)、色の変化にはフラグメントシェーダ(Fragment shader)をそれぞれ利用します。

Custom functionの使い方

CSS Shaderは、filterプロパティにcustomを指定することで実現することができます。

2013.05.15時点ではcustom filterに対応しているブラウザはChromeのみです。かつ、実際に指定する場合には-webkit-のプレフィクスが必要です。

シェーダに関してはまた別の機会に説明したいと思います。(まだ勉強中のため)
メッシュ分割数については、下記の画像のように、filterを適用した要素を指定された数字で縦横を分割します。
例で言えば32分割され、それぞれの点に対して頂点情報が設定され、それが頂点シェーダ(vertex shader)に送られます。
頂点シェーダでは、その渡された値を様々に計算して、最終的な頂点位置を決定します。

CSS Shaderはどこで使う?

上で示したサンプルなどを見ていて、どんなことができるか、というのはある程度分かったかと思います。
しかし、じゃあこれをどう使うの? という疑問があるかと思います。確かにぱっと見はすごいことができて、なんでもできそうですが、どう活かしていいか分かりませんよね。
元々、OpenGLはMac OSXなどのUIでも利用されているグラフィックライブラリです。MacのUIはとてもきれいで、アニメーションなんかも頻繁に使われていますよね。こうした表現にはGPUを直接利用できるOpenGLはとても有利です。

つまり、CSS Shaderが標準的になればWebサイト(あるいはWebアプリ)のUI部分はCSS Shaderを利用する、というシーンも増えていくのではないかなと思っています。
今現在ではむずかしい、Macのジニーエフェクトみたいなものも、CSS Shaderを使えばすんなりと実装できるでしょう。(使うことがいいかどうかは置いておいて)
CSS Shaderは表現の幅はもちろん、こうしたUIの新しい仕組みを定義してくれる素晴らしい仕様だと思っています。

これは簡単! a要素にクラスを追加するだけでiPhone UIボタン

2011年8月29日 09:05

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)

これは簡単! a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓

実際に適用したサンプル

a要素に1クラス追加するだけで実現するのでお手軽

今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

HTMLソース

CSSソース

実は見出し部分も画像なし

実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。

まとめ

CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
(具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします)
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。

iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。

CSS3なら簡単! アニメーションするリングメニューを作る

2011年7月19日 07:40

jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。

ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。

ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。

デモ

まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。

リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS

テクニックの肝

今回のテクニックの肝は、transform-originです。このプロパティは、transform系の値を変更する際、どこを基点にするかというものになります。

このtransform-origin、デフォルト値は50% 50%となっています。つまりその要素の縦横中央、ということですね。もしこれを0 0とすれば左上が基点となり、100% 100%とすれば右下が基点となるわけです。そしてこの数値には、pxも指定することができるので、細かく位置を調整することも可能となります。

磨りガラスで見たような にじんだ文字を表現する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 では・・・?

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

box-shadowを使った面白演出 - CSS3で遊んでみる4

2010年3月 8日 14:04

box-shadowサンプル

今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。(なぜ・・・?)

そのため、Firefox や WebKit 系ブラウザで使うには-moz--webkit-のベンダープレフィクスが必要です。

また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。

ということで、百聞は一見にしかず、ということでデモを見てください。

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

2010年1月29日 10:46

袋文字のサンプル画像

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

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

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

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

1  2