HTML5／CSS3を駆使した「The Google Puzzle」に頭を悩ます
Googleは8月17日、パズルゲーム「The Google Puzzle」を公開した。HTML5やCSS3を駆使したインタラクティブなパズルで、Googleサービスも活用したさまざまな謎解きを楽しめる。 スタートすると、「Google」ロゴの「o」がはじき飛ばされ、別のウインドウに閉じ込めれてしまう。謎を解いてかわいそうな「o」を救い出そう──というストーリー仕立て。問題は複数のウインドウにわたって出題され、最初の問題ではGoogleマップを活用している。ヒントを表示させることもでき、いったん中断して後で再開することもできるようになっている。Chromeの利用を推奨しているが、主要なWebブラウザで楽しめるとしている。 先月発表した、ロックバンド「OK Go」とのコラボレーション「All is Not Lost」と同様に、最新Webテクノロジーを活用したプロジェクト。パズルは、ホテルなど
新しい HTML5 ツール Adobe Edge プレビュー版公開 - akihiro kamijo
Adobe Labs に Adobe Edge のプレビュー版が公開されました。Edge は HTML5, JavaScript, CSS3 ベースのアニメーションやインタラクションを、描画ツールやタイムラインを使って制作できるオーサリングツールです。昨年秋の MAX でプロトタイプが紹介されて以来の更新となりました。 （Adobe Edge@Labs） Edge は、本格的なオーサリングツールというよりは、Dreamweaver や Flash Professional を補完する、軽量かつ高速なツールと位置づけられているようです。比較的単純なアニメーションの制作に特化したツールです。 実際に Edge プレビュー版を使って制作したサンプルがいくつか公開されています。 wordAnimation wordAnimation2 その他にも、Edge のソース付きでこちらのページに紹介されて
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
12 Elegant, Free & High Quality HTML5+CSS3 Templates | DevSnippets
HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more. The new specifications has added quite a few interesting and usefu
storiesinflight.com is coming soon
is a totally awesome idea still being worked on. Check back later.
Six Useful CSS3 Tools
CSS3 continues to gain popularity as we’re seeing it used in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers. Nevertheless, if you’re one of those that haven’t started using CSS3 or you’re a CSS3 pro just looking to speed up your work flow, here are
10 Pure CSS3 Image Galleries and Sliders - Speckyboy Design Magazine
There are hundreds upon hundreds of Javscript based image gallery/slider plugins and techniques you could choose from, all offering something different, all of them offer a whole lot of interactivity and most are relatively easy to use and install. So, the question is, why would you even consider a pure CSS alternative? Because CSS3 is AWESOME. Its moving at an amazing rate of knots, with new tech
CSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」
TOP > WebDesign > CSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」 角丸、ドロップシャドウ、グラデーションなど今までは画像と組み合わせたり、様々な工夫を用いて表現してた手法が簡単に実装できるCSS3。対応ブラウザも増えてきて、すでに利用されていると言う方も多いと思いますが、今日紹介するのはCSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」です。 Turn Your Images Into Polaroids with CSS3 FLASHのような派手なアクションなどはありませんが、CSSだけでここまで表現できる、CSS3の良さを感じることができます。全部で１０個のCSS3ギャラリーが公開されていますが
Easily Turn Your Images Into Polaroids with CSS3
Yesterday, Jon and I were going back and forth about what to blog about next. Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman! With our end goal in mind (polaroid style images), we needed to set a few ground rules: 1. Has to work on a grid of linked images 2. Images must be
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3なボタンをWEB上で作れる「Button Maker」:phpspot開発日誌
Button Maker
http://www.designwalker.com/2010/05/css3.html
「HTML5 & CSS3 Readiness」で使用ブラウザの未来への対応状況をチェック | ライフハッカー・ジャパン
Loading...
CSS3 ドラえもん
CSS3グラデーションを簡単に作成できる -CSS3 Gradient Generator