カテゴリー:CSSだけでアクションを作る

リスト表示へ

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の新しい仕組みを定義してくれる素晴らしい仕様だと思っています。

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も指定することができるので、細かく位置を調整することも可能となります。

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のみでグローバルメニューのhover以外をぼかしてhover中ボタンを強調する

2010年1月19日 23:51

ul要素のぼかしエフェクト画像

今回のテクニックは、以前書いた ピュアCSSで実装する DKIR を応用した画像ボタンのロールオーバー効果 の応用版です。
なので HTML はいじらずに、CSS の変更だけで実現しています。

また、今回のテクニックは ul, li 要素に対して:hover擬似クラスを使って実現しているためIE6 は未対応です。が、IE6 でもマウスオーバーの効果は正常に動作するので、IE6 以外のモダンブラウザ向けに仕込んでおくといい感じです。いわゆる "プログレッシブ・エンハンスメント" ってやつですねw

ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果

2009年12月22日 22:00

最近、「XHTML&CSS超高速コーディング術」という 牧野工房 さんが出している本を読みました。その中で、画像のロールオーバー効果を CSS で実現しているくだりがありました。

そこではvisibility: hiddenを利用したテクニックが載っていました。
概要としては、メニューなどの部分を普通に img 要素でマークアップしておき、マウスオーバー時や閲覧中のカテゴリの画像を背景にして該当の場合に img 要素を文字通り非表示にする、という方法で実装していました。

が、その場合だともし画像オフの場合や、オフにしていなくても回線の問題などで画像が表示されていないような場合に、マウスオーバーしたとき(あるいはカテゴリ閲覧中)に情報がまったく見れない、ということが(少ないですが)可能性としてありえるのでは、と思いました。

そこで、以前書いた これで決まり?な画像置換 - DKIR を応用した、上記のような場合でも情報が見れなくならないようなロールオーバー効果を実現する方法を書いてみたいと思います。

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

2009年3月24日 23:06

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

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

説明は以下から。n

CSSだけで触れるとポップアップするフッターを作る(IE6対応)

2009年3月19日 16:44

「CSSだけで触れるとポップアップするフッターを作る(IE6対応)」サンプルイメージ

前回のエントリー、CSSのみでIE6にposition:fixedを対応させる を使用して、下部に固定配置しつつ、マウスオーバーで Windows のタスクバーのように飛び出すフッターを作ってみました。

このサンプルは、IE6 にも対応しています。

Windowsのタスクバーのように触れるとポップアップするフッターデモ

サンプルダウンロード

解説は以下から。

画像を一切使わずにCSSだけで吹き出しツールチップを実装する

2009年3月 6日 17:40

CSSだけで吹き出しツールチップのサンプル画像

マイコミジャーナルの「"吹き出し"を画像使わずにCSSで作る方法」で紹介されていた"CSS だけで吹き出しを作る方法"を利用して、CSS だけで作る吹き出しツールチップのデモを考えてみました。

今回のサンプルでは、画像も使っていません。
CSS による border の生成のされ方をうまく使って三角形を作り出します。
以下にデモと、今回の肝である画像を使わずに三角形を作り出すことについて書きたいと思います。

CSSだけで吹き出しツールチップを実装するデモ

画像のマウスオーバーで、離れた位置に拡大画像を表示する

2009年1月14日 23:21

前回の「CSSだけで作るマウスオーバーでの画像の拡大」の応用として作ったサンプルです。

ただ、今回は少し収穫がありました。
a:hover を使っての、a 要素内の position の操作に関する新しい発見です。

画像のマウスオーバーで、離れた位置に拡大画像を表示するデモ

CSSだけで作るマウスオーバーでの画像の拡大

2009年1月13日 21:13

今回は「CSS だけで作るシリーズ」です。

タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。

ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。
ということで、デモは以下の通り。

CSSだけで作るマウスオーバーで画像の拡大デモ

1  2