text-shadow: 0 0 4px #fff, 1px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

このサイトの右上に斜めになったメニューがありますが、これはCSS3（+背景画像）でできています。 IEの場合はスタイルシートを変更して画像で再現されるようにしています。 このメニューをCSS3で作るときに若干コツがいったので、CSS3で斜めに傾いたメニューを作る時のメモ。 HTMLコード HTMLコードはこのような最小限でシンプルなもので実装しています。 </p> <ul> <li id="demo-menu1" class="demo-menu"><a href="./">MENU1</a></li> <li id="demo-menu2" class="demo-menu"><a href="./">MENU2</a></li> <li id="demo-menu3" class="demo-menu"><a href="./">MENU3</a></li> <li id="demo

Pot.jsはJavaScriptで感じる物足りなさを補完する汎用的ユーティリティです。 JavaScriptを素のままで使うケースは減っています。jQueryやMootoolsをいったライブラリを使うケースが多いのですが、そうしたライブラリとも組み合わせて使える汎用的ユーティリティライブラリがPot.jsです。 デモはこのコンソールに出ているものになります。 そのコード。 Pot.jsは実に数多くの機能があります。まずforEach、filter、map、reduce、zip、repeat、someといったイテレートがあります。動作はチェインで可能です。また非同期処理中における例外処理をキャッチできます。speedメソッドによって処理速度を遅くしたりもできます。 ループ処理におけるCPU負荷を軽減させることができ、既存の負荷が高いループ処理をPot.jsを使って置き換えることで負荷を軽減

ブログなどに YouTube の動画を埋め込みたい場合は良くあると思いますが、 動画のページで発行されるコードをそのまま HTML に埋め込んでも z-index が効きません。 なので、例えばこのサイトのようにヘッダーやフッターを position:fixed にしていたりすると、 固定されている要素より iframe要素 の部分の方が前面に表示されてしまいます。 解決方法 そこで、その解決方法ですが、 例えば　YouTube で次のコードを発行したとします。 <iframe width="420" height="315" src="http://www.youtube.com/embed/OX0-8kQnWt4" frameborder="0" allowfullscreen></iframe> 動画は僕が大好きな「GAGAKIRISE」というバンドです。 このままでは前述したような

この記事のURL http://www.dango-itimi.com/blog/archives/2012/001118.html 漢字が使用可能なフリーのビットマップフォントはないものかと調べてみたところ、以下の三点が見つかりました。それぞれフォントを埋め込んでみた swf ファイル容量と特徴など合わせて記述します。 美咲フォント http://www.geocities.jp/littlimi/misaki.htm JIS第一・第二水準をサポートしているとのことで、このフォントを用いれば表示できない文字はほとんどなさそうです。 Flash のフォント埋め込み設定で「日本語 漢字 - JIS第一水準(3174文字)」を設定して swf を出力してみたところ、swf ファイル容量は 131KB という結果に。対比として ＭＳ ゴシックを同設定で埋め込むと swf 容量 630KB という

Responsive and Mobile-Friendly Tooltip Blog of Osvaldas Valutis レスポンシブなツールチップを実装するサンプルコードが公開されています。 ページ幅縮小に伴いツールチップの幅も小さくなったり、マウスオーバーだけじゃなくてタップ動作にも反応するようなツールチップが実装できます スマホにはマウスオーバーのアクションがないですが、スクリプトによってうまく吸収できているようです デザインもいい感じ 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるjQueryプラグイン「mTip」

jqFloat.js ? A Floating Effect with jQuery! アイテムを浮遊させられるjQueryプラグイン「jqFloat」。 雲なんかの画像をプカプカページ内で浮かせることができたりします。 ページ内にアニメーションを設置して、楽しげな雰囲気を出す場合なんかに使えそうですね。 jqueryのanimateは本当に簡単に要素をアニメーションできるようにしましたがこれをうまく応用してますね 使い過ぎは嫌われるような気もしますが、適度に使えばよい効果が作れそうです 関連エントリ faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグ

[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS

Fireworks の有名人の John Dunning が、Fireworks で制作したデザインレイアウトを、Edge が読み込める形で書き出す機能拡張が公開したようです。 http://johndunning.com/fireworks/mxp/Edge MXP ファイルをダウンロードしてダブルクリックすると、Fireworks から利用可能になります。Fireworks を起動後、「コマンド」 → 「Edge」 → 「Export to Edge」 とたどると、Edge 用の HTML ファイルや JS ファイルが生成されます。 書き出し時には既存のファイルが上書きされるので注意が必要です。書き出したのをそのまま Edge で編集していた場合、再書き出しによりせっかくの修正作業が全て消えてしまうかもしれません。 書き出すフォルダの変更は、「Edge」 → 「Change Expor

レイアウトXMLファイルから View を生成するときに LayoutInfalter の inflate() メソッドを使いますが、inflate() メソッドには引数が2つのものと3つのものがあります。 inflate(int resource, ViewGroup root) inflate(int resource, ViewGroup root, boolean attachToRoot) 引数が2つのメソッドは、内部で inflate(resource, root, root != null) のように引数が3つのメソッドを呼んでいます。 この attachToRoot に true を指定した場合と false にした場合で返ってくるルートビューが異なります。 例えば <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

Flash Player の 表示リストに良く似た API で HTML5 の Canvas コンテンツを制作するフレームワーク CreateJS が公開されて、ダウンロードできるようになりました。 以前お伝えした、Flash Professional から CreateJS にアセットを書き出せる Flash Professional Toolkit for CreateJS は、公開時期も公開方法も未発表のため、まだ、Flash オーサリング環境でつくったアセットをそのまま利用できる、という訳にはいきませんが、スクリプト開発者はそろそろ使い方を覚え始めてよさそうな感じです。 という訳で、久しぶりに CreateJS の使い方です。 座標変換その 1 前回の記事に書いたように、CreateJS のフレームワーク内で、マウスの移動やマウスから指が離れたことを知らせるイベント用のリスナを定義

jQuery Mobile Autocomplete now available - andy matthews スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン。 スマホではアプリなんかでよく見られるオートコンプリートですが、スマホ用WEBサイトにこれを組み込みたいといった場合にこれが使えそうです。 デザインも良い感じですね 関連エントリ jQueryMobileよりも軽くて使いやすそうなモバイルサイト作成フレームワーク「jQ.Mobi」 Android風の日付ピッカー実装用jQueryMobileウィジェット「Mobi Pick」 スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ

デモページ：p要素 Scroliteの使い方 外部ファイル スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></script> <script src="lib/jquery.mousewheel.js" type="text/javascript"></script> <link rel="stylesheet" href="styles/jquery.scrolite.css"></link> HTML HTMLは基本的にはそのままです。 jQueryのセレクタで指定するために、classを加えると便利

HTML5最近、Web フォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日本語で Web フォントを使うのは厳しいのが現実です。というのも、日本語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日本語の Web フォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Web フォントをその都度作ればいいんじゃね？」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです（ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい）。手始めに日本語 Web フォントを作ってみるまずは簡単に日本語 Web フォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン