これはいい！HTML5とCSS3の便利なツールがまるっと揃っている -Web DirectionsHTML5のvideoやaudioやcanvas、CSS3のテキストやボックス、グラデーション、アニメーションなど、ウェブ制作に役立つ便利なツールが数多く揃っているWeb Directionsを紹介します。 シンプルなインターフェイスながら高機能なので、他のツールを利用していた人も一度、使ってみてください。気に入ると思います。
今年は迫力の3Dでワードプレスに雪を降らす
雪のシーズン到来ということで、ブログに季節感をプラスする雪を降らせてみました。HTML5のcanvasに対応したブラウザなら、このページには既に雪がチラチラしていると思います。(降ってないならおしてみて)JavaScriptの3Dライブラリ『Three.js』で描画されており、雪は立体的に舞います。マウスの動きにも反応します。 ただ難点として、canvasを画面いっぱい被せてるのでリンク等のクリックが効きません。そのため画面内でクリックが発生したらcanvasと共に雪は消えます。 準備 JavaScript HTML5 Canvas Snow in 3D | Seb Lee-Delisle こちらのページにあるスクリプトを使わせてもらいます。githubから snow3d.html Snow.js ThreeCanvas.js ParticleSmoke.png が必要になります。 同梱の
これぞ近未来…！最新技術をふんだんに使ったサイト「モーグリのツイートキャッチ」の知られざる裏側 : らばQ
これぞ近未来…！最新技術をふんだんに使ったサイト「モーグリのツイートキャッチ」の知られざる裏側 FINAL FANTASY XIII-2のキャンペーンとして作られたサイト「モーグリのツイートキャッチ」。見てみるとサウンドや動画、アニメーションなどの最新技術がふんだんに使われていますが、なんとこれ、Flashを使わずに次世代のweb規格「HTML5」だけで作られたのだとか。スゲェ…！ このサイトではどんなテクノロジーが使われているのか、そして、それはどうやって作るのか？マイクロソフトの特設サイト 「 Start Something! 」で、その詳細が明かされていました。 マイクロソフトの特設サイト「Start Something!」は、もっと手軽に開発を楽しんで貰うために立ち上げられた特設サイト。 Start Something! つくりたいを誰でもすぐに 〜 MSDN その中で、FINAL
Nihilogic
Saturday, September 20, 2008 9 comments Mandelbrot in less than 128 bytes of DHTML Labels: javascript A while ago, Mathieu "p01" Henri rendered the initial Mandelbrot set in 137 bytes of JavaScript and HTML, getting it down to 133 bytes with a few tweaks but still a few bytes short of his 128 byte goal. Since fractals are groovy, I decided to make my own, trying to get it below that magic number.
【レポート】JavaScriptとCSSをPNGファイルに含めて圧縮する方法 | エンタープライズ | マイコミジャーナル
Ajaxian IE9がCanvas要素をサポートすることで、これまで広く使われてこなかったテクニックが、もしかしたら注目されることになるかもしれない。Ajaxianに掲載されているWant to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvasという記事で、2008年に公開されたJacob Seidelin氏の記事"Compression using Canvas and PNG-embedded data - Nihilogic"がふたたび取り上げられており、その可能性を示すものとして興味深い。 Compression using Canvas and PNG-embedded dataで紹介されているテクニックは、JavaScriptやCSSをPNG画像データとして利用するというもの。も
Ajax - データ交換 via PNG : 404 Blog Not Found
2010年08月27日03:30 カテゴリLightweight Languages Ajax - データ交換 via PNG 面白い。 【レポート】JavaScriptとCSSをPNGファイルに含めて圧縮する方法 | エンタープライズ | マイコミジャーナル が、使いどころが限定的すぎる。 Demo 実際に双方向に変換するデモを作ってみた。 復元された文書 ソースはこんな感じ。 /* * You need base64.js. * cf: http://blog.livedoor.jp/dankogai/archives/51067688.html */ img2txt = function(node) { var el = document.createElement("canvas"), ctx = el.getContext("2d"), w = el.width = el.sty
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building a Rock Solid Auto GridExplore a customizable CSS auto-grid layout in our latest post. Adjust column widths, gaps, and max column count for flexible web designs. Ideal for any web project. Hosting a ComfyUI Workflow via APIBasic WebSoc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Video Destruction