カテゴリー ‘ CSS3

AndroidやiOSアプリへのネイティブ変換に対応したHTML5ベースモバイルアプリ作成フレームワーク「Sencha Touch 2.0」が登場

HTML5やCSS3を使ってAndroidやiOSデバイス向けのモバイルアプリケーションを作成できるフレームワーク「Sencha Touch 2.0」が登場しました。

参考記事:HTML5ベースのモバイルアプリが作れる「Sencha Touch 2.0」公開。性能向上とiOS/Androidネイティブ変換機能が目玉 - Publickey

 

「jQuery Mobile」などのようにモバイル向けのアプリを作成できるフレームワークで、HTML5を使うことでサーバーと連携した複雑なアプリも開発できるそうです。

また、詳細は不明ということですが、「Sencha SDK Tools」を使うとAndroidやiOSに対応したネイティブ形式への変更も可能だということです。

Share on Facebook

HTML5やCSS3を駆使して作られたブラウザ上で「Mac OS X Lion」が動作するWebページが登場

OS X Lion

HTML5やCSSを使って作られたブラウザ上で「Mac OS X Lion」が動作するWebページが登場しました。

参考記事:Try Mac OS X Lion Online In Your Web Browser | Redmond Pie

 

ウィンドウやデスクトップも高い再現度で作られていて、表示されているウィンドウは閉じたり最小化したりすることはできませんが、マウスでドラッグすると動かすことができます。また、上にあるメニューバーも表示だけのようです。

 

デモページが公開されていますので、是非とも触ってみてください。対応するブラウザは、「Firefox」、「Google Chrome」、「Safari」となっていますので、デモページを試す際にはいずれかのブラウザでアクセスしてください。

ログインに必要なパスワードは「admin」となっています。

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/5/9 ~ 5/15

2011年5月9日~5月15日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

[CSS]IE6でもそれなりに、CSS3で実装するツールチップのチュートリアル | コリス

CSS3 tooltips

IE6で見た場合でも、ツールチップとして動作するCSS3で実装するツールチップのチュートリアル紹介記事です。

IE6でツールチップを表示するのには、Javascriptを使用しています。

デモ:CSS3 tooltips demo – RedTeamDesign

コピペして使える、素敵アニメーションを実現するCSSコードまとめ | IDEA*IDEA

Hover Effect Examples

マウスオーバーするとアニメーションするCSS3コードの紹介記事です。

デモ1:Design Shack Hover Effect Examples

デモ2:Design Shack Hover Effect Examples

デモ3:Design Shack Hover Effect Examples

デモ4:Design Shack Hover Effect Examples

デモ5:Design Shack Hover Effect Examples

CSS3の各種エフェクトをGUIで設定できる『CSS3 Generator』 | IDEA*IDEA

CSS3 Generator

スライドなどを使ってCSS3の影付き、角丸、グラデーションなどのエフェクトを設定できる「CSS3 Generator」というツールの紹介記事です。

CSS3 Generator – By Eric Hoffman & Peter Funk

え!Photoshop?って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles | コリス

PhotoshopライクなインターフェースでCSS3コードを生成してくれる『Layer Styles』 | IDEA*IDEA

Layer Styles

Photoshopの設定画面ライクなインターフェイスのCSSコードジェネレーターの紹介記事です。

Layer Styles

CSS3でつくるスマフォサイト 第一回:おてがる角丸 | スマートフォンサイト制作会社ブログ

CSS3で角丸を実装するサンプル紹介記事です。

レガシーなブラウザでもCSS3の新技術を活用する「Selectivizr」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

IE6~IE8のようなレガシーブラウザでもセレクタを利用可能になるスクリプトの紹介記事です。

窓の杜 – 【NEWS】“Gecko”ベースのHTML5/CSS3対応HTMLエディター「BlueGriffon」v1.0が公開

BlueGriffon

HTML5やCSS3に対応したWYSIWYG編集可能なHTMLエディターの紹介記事です。

アドオンによる機能拡張にも対応しており、自由に機能を拡張できます。

BlueGriffon, The next-generation Web Editor based on the rendering engine of Firefox

HTML5を使った音楽、動画を織り交ぜたインタラクティブな電子書籍を作成する「Laker」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

Laker

iPhoneやiPad向けの電子書籍をjQueryやHTML5を使って作成する為のフレームワークの紹介記事です。

[CSS]シンプルなHTMLで実装するダイナミックなサイトマップコンテンツ | コリス

CSSsitemap

アニメーションするサイトマップを実装するスタイルシートの紹介記事です。

デモ:Sitemap

css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ – かちびと.net

CSS3のMedia Queriesを使ったWordPressテーマの紹介記事です。

フレキシブルなボタン – Weblog – hail2u.net

Flexible Button

フレキシブルなボタンをCSS3を使って作るサンプルの紹介記事です。

画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法

Buttons

CSS3を使ったiOS向けのナビゲーションボタンの紹介記事です。

デモを見る場合は、iPhoneやiPod touchなどiOS端末で見てください。

デモ:Buttons

HTML5の可能性を示唆してくれる『HTML5 WOW!』は必見ではなかろうか | 100SHIKI

HTML5の可能性を感じさせてくれるプレゼンテーション「HTML5 WOW」の紹介記事です。

HTML5だとこんなことができるの!?という新たな発見があるのではないでしょうか!

プレゼンテーションを見る場合には、Google Chromeが必要ですのでご注意ください。

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/5/2 ~ 5/8

2011年5月2日~5月8日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

マルチタッチを使ったWebブラウザゲームの開発に「JSTouchController」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

「JSTouchController」は、HTML5やJavaScriptを使ったWebブラウザ上で動作するマルチタッチシステムです。

以下は、サンプルをiPadで動かしている動画です。

HTML5の魅力。Webブラウザ上で楽譜を表示し、MIDIを使って奏でる「ABC.js」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

Flashを使わずに、音楽を再生したり音符を描き出したりできるライブラリの紹介記事です。

HTML5の使えるスニペットを投稿・共有できる『html5snippets』 | 100SHIKI

HTML5 Snippets

HTML5で使えるスニペットを投稿・共有できるサイト「HTML5 Snippets」の紹介記事です。

jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker – かちびと.net

Laker

iPhoneやiPad向けの電子書籍をjQueryやHTML5を使って作成する為のフレームワークの紹介記事です。

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/4/25 ~ 5/1

2011年4月25日~5月1日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

画一的なプレゼンテーションにさよならを。HTML5/JavaScript/CSS3によるプレゼン「CSSS」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

CSSS

HTML5、CSS3、JavaScriptを使ったプレゼンテーションライブラリの紹介記事です。

デモページでは、矢印キーやHOME、ENDキーでスライドの切り替え、Ctrlキーを使ったショートカットキーを使うことが可能です。

Ctrl + Hを押すとスライドのサムネイルを一覧で表示することができます。

デモ:CSSS: A brief introduction

offchizというアプリを2週間で作ってみました。 (Yahoo! JAPAN Tech Blog)

offchiz

お出かけや旅行に手軽にもっていく為の地図帳を作成するサービス「offchiz」の紹介記事です。

出かける前に作成しておくことで、インターネットに繋がらない環境下でも地図を確認できるようになります。

メディアクエリでiPhoneやiPadにもレイアウトが最適化されているHTML5製のWordPressテーマ・Constellation Theme – かちびと.net

Constellation Theme

レイアウトがiPhone、iPadにも最適化されているHTML5で作られたWordPressテーマの紹介記事です。

iPhone、iPod touchで表示すると以下のような感じです。

Constellation Theme

デモ:Constellation Demo

[CSS]グラデーションのアニメーションが美しいフォームを実装するスタイルシート | コリス

Glowform

画像を一切使わずに美しいグラデーションのフォーム「Glowform」の紹介記事です。

デモ:Glowform :: Image-less CSS3 Glowing Form Implementation

HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい – かちびと.net

SlideFinder

HTML5やCSS、jQueryの日本語スライドをスライド共有サイト、SlideShareで日本語のスライドのみを集めているサイト「SlideFinder」の紹介記事です。

HTML5で作られたリッチなUIの音楽プレーヤ「Speakker」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

Speakker

MP3ファイル等を再生できるリッチなUIの音楽プレイヤー「Speakker」の紹介記事です。

音楽プレイヤーとしての基本機能はもちろん、FacebookやTwitterとも連携します。

デモ:Speakker | The new way of audio in HTML5 | Demo

[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート | コリス

Pure CSS3 Paper Curls Without Images

画像を使わずに、紙がめくれたようなエフェクトを与えるスタイルシートの紹介記事です。

上の画像のように紙っぽい感じを演出できます。

デモ:Pure CSS3 Paper Curls Without Images

Visual StudioのIntelliSenseでCSS3を利用するには?[C#、VB] − @IT

インテリセンス

Visual Studio 2010のコードエディタ上で、CSS3のIntelliSenseを表示できるようにする方法の紹介記事です。

IntelliSense(インテリセンス)というのは、コードエディタ上で動作する補完機能のことです。

idとclassを使わないで、HTML5とCSS3でコーディングしてみた。 : Web Design KOJIKA17

idとclassを使用しないで、HTML5、CSS3のみでWebページを構築しようという試みの記事です。

最終的には、「id, classを使わずにサイトを組むもんじゃない。」と締めくくられています。

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/4/18 ~ 4/24

2011年4月18日~4月24日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

UEI、HTML5/JavaScriptベースのスマートフォン用ゲームエンジン“enchant.js”をリリース | 広報支援・プレスリリース 配信サービス【@Press:アットプレス】

enchant.js

HTML5やJavaScriptがベースになった、スマートフォン向けのゲームライブラリ「enchant.js」のリリース記事です。

青少年プログラマ育成を目指した「9leap(ナインリープ)」というコンテストプログラムが企画されています。

法人向けに有償ライセンスとサポートの提供も予定されているようです。

[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js | コリス

CSS3非対応のブラウザでも、CSS3のMedia Queriesを実現させるスクリプトの紹介記事です。このスクリプトは、IE6でも問題なく動作するようです。

Media Queriesとは、ユーザーの状態に合わせたスタイルシートを適用できるようにする機能です。例えば、大きなディスプレイ用のスタイルシート、携帯電話など小さいディスプレイ用のスタイルシートを指定することができます。

デモ:Adapt.js – Adaptive CSS

PHP&jQuery&CSS3でMacのPhotoboothを作るチュートリアル:phpspot開発日誌

Photo Booth

Macに搭載されている、Photo BoothというアプリをPHP、jQuery、CSS3を使ってWeb上で再現するチュートリアルの紹介記事です。

デモ:Photobooth with PHP, jQuery and CSS3 | Tutorialzine Demo

enchant.jsでゲームプログラミングに初挑戦! | IDEA*IDEA

enchant.js

ゲーム用ライブラリの「enchant.js」を使って作られた簡単なゲームの紹介記事です。

くまのスタンドがくまを捕まえにいくという単純なゲームのようです。

enchant.jsを勉強するのに役立つサイトまとめ | IDEA*IDEA

enchant.js

ゲーム用ライブラリの「enchant.js」を勉強する為に参考になるサイトもまとめ記事です。

リストやテーブル主体のスマートフォン最適化サイトに「ChocolateChip-UI」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

スマートフォン向けのフレームワーク「ChocolateChip-UI」の紹介記事です。

「ChocolateChip-UI」は、jQuery Mobileのような、Webサイト向けのユーザーインターフェイス、機能を統合的に提供するフレームワークです。

[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス

box-shadow

CSS3のbox-shadowを使ってWebデザインにエフェクトを加えるテクニックの紹介記事です。

デモ:How to create slick effects with CSS3 box-shadow – RedTeamDesign demo

【CSS3】 CSS3 でフェンリルくんをつくってみた (フェンリル | デベロッパーズブログ)

フェンリルくん

国産ブラウザ「Sleipnir」の開発元のフェンリルのロゴをCSS3で作っています。

CSS3のよく使いそうな10個のテクニックのまとめ:phpspot開発日誌

CSS3でよく使いそうな10個のテクニックを紹介した記事です。

  • font-face によってマシンに入ってないフォントを使うCSS例
  • opacity による要素の透明度指定
  • rgbaでRGBと透明度を併せて指定
  • border-radiusによる角丸
  • box-shadowによるブロックに影を付ける効果
  • text-shadowによる影付きテキスト効果
  • ボックスのグラデーション
  • 複数バックグラウンド指定
  • transformによる変形
  • transitionによるアニメーション

いろんなHTML5 canvasのフレームワークを試してみた :: dotHTML5

canvasフレームワークを使ってみたサンプル記事です。

フレームワークとサンプルのリンクは以下の通りです。

必見。スマートフォン対応、WebベースのHTML5オーサリングソフトウェア「Maqetta」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

DreamweaverのようなHTMLオーサリングソフトウェアの紹介記事です。

「Magetta」はWebベースで動作するソフトウェアで、HTML5のオーサリングを行うことができます。

Firefox4の実力を知る。HTML5/CSS3による惑星情報「The Planetarium」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

The Planetarium

Firefox 4のリリースに合わせて作られたデモアプリケーションの紹介記事です。

惑星をクリックするとアニメーションしながら惑星の情報が表示されます。

デモ:The Planetarium

インスピレーションを刺激するhtml5で作られたサイト集25 | Web活メモ帳

HTML5を使ったアイディアが盛りだくさんのサイトの紹介記事です。

HTML5アプリケーションフレームワーク「SproutCore 1.5」が登場 – SourceForge.JP Magazine : オープンソースの話題満載

HTML5アプリケーションフレームワークの「SproutCore」の新バージョン公開のニュース記事です。

Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework – かちびと.net

G5 Framework

HTML5、CSS3、jQuery、PHPを使って作られたデベロッパー向けのフレームワークの紹介記事です。

デモ:HTML5 Front-End Development Framework | G5 Framework

CSS3で作られたクレージーなBox Shadowいろいろ・・・ | IDEA*IDEA

CSS3を使ったBox Shadowの紹介記事です。

かなり派手なBox Shadowが紹介されています。

デモ:39 Box Shadows

CSS3をフル活用した立体的な画像ギャラリー作成デモ:phpspot開発日誌

CSS3 Image Gallery

CSS3を使った立体的な画像ギャラリーを作成するデモの紹介記事です。

カーソルを合わせると画像が立体的に表示されます。

CSS3 Image Gallery

デモ:CSS3 Image Gallery with a 3D Lightbox Animation

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/4/11 ~ 4/17

2011年4月11日~4月17日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

HTML5ベースの動画プレイヤー11:phpspot開発日誌

HTML5 プレイヤー

HTML5を使って動画を再生できるプレイヤーを紹介した記事です。

[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート | コリス

Slide In Image Captions

画像マウスオーバーすると、アニメーションでキャプションを表示できるスタイルシートの紹介記事です。

デモ:Slide in Captions

HTML5ベースのWordPressのテーマファイルのまとめ | コリス

HTML5をベースに作られたWordPressテーマのまとめ記事です。

HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)- (Yahoo! JAPAN Tech Blog)

えほんのじかん

絵本のサムネイルで色々並んでいて、見たい絵本を選ぶとアニメーションと朗読が開始されるHTML5で作られたWebアプリの紹介記事です。絵本は、1本、10分~15分程度のものが中心となっています。

iPad専用となっているので、注意してください。

[CSS]HTML5対応、さまざまなデバイスのMedia Queriesを使ったリセット用スタイルシート -320 and up | コリス

CSS3のMedia Queriesを使ってさまざまなサイズのビューポートを想定した、リセット用のスタイルシートを紹介します。

Visual StudioのIntelliSenseでHTML5を利用するには?[C#、VB] − @IT

Visual Studio 2010で、HTML5タグを入力する方法の紹介記事です。

設定をちょこちょこっと変えるだけなので、簡単にHTML5に対応させることができます。

画像を使わずCSS3だけで作ったあのロゴやあのキャラクター|Webpark

Google Chromeロゴ

誰もが知ってる、ロゴやキャラクターをCSS3で表現したものの紹介記事です。

HTML5で制作されたサイトをまとめたギャラリーのまとめ | コリス

HTML5で作られたサイトのまとめ記事です。

HTML5では、こんなこともできるのか!?という発見があるのではないでしょうか。

[JS]Canvas, SVGを使用した軽量のJavaScriptの3Dエンジン -three.js | コリス

Webページ上で、3Dオブジェクトを描画する軽量スクリプトの紹介記事です。

対応ブラウザは、Firefox4+, Chrome9+, Safari10.6+となっています。

デモ1:three.js canvas – camera – orthographic
デモ2:three.js canvas – particles – waves
デモ3:three.js + audio api

CSS3で作られた素敵パターンをまとめた『CSS3 Patterns Gallery』 | IDEA*IDEA

CSS3 Patterns Gallery

CSS3を使って作られたパターンを紹介しているギャラリーサイトの紹介記事です。

パターンをクリックするとWebページ全体に表示してくれます。

CSS3 Patterns Gallery

ソースも公開されているので、参考にできるのではないでしょうか。

デモ:CSS3 Patterns Gallery

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/4/4 ~ 4/10

2011年4月4日~4月10日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

Webブラウザ上でHTML5技術を用い、デスクトップ仮想化のクライアントを実現する製品が登場 - Publickey

仮想デスクトップアプリとして有名な「VMware」のクライアントをHTML5を使ってWebブラウザ上で動作できるようにする製品の紹介記事です。

HTML5が動作するWebブラウザがあれば、OSなどのプラットフォームに関係なく動作します。

ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS」:phpspot開発日誌

-webkitや-mozなど、ブラウザごとのCSS3プレフィックスを自動で付けてくれるサービスの紹介記事です。

[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー | コリス

CSS3 dropdown menu

IE6やIE7でも動作するCSS3のドロップダウンメニューの作り方の紹介記事です。

FirefoxやGoogle Chromeでは、上のように見えますが、IE6、7では以下のように角丸が適用されません。

CSS3 dropdown menu

デモ:CSS3 dropdown menu

HTML5とは何かを簡単にまとめてみた (Yahoo! JAPAN Tech Blog)

HTML5について分かりやすくまとめられた記事です。

内容は以下のとおり。

  • HTML5といえば?
  • HTML5で出来ること
    • 1.今まで難しかった事が簡単に出来る
    • 2.綺麗なHTMLがスッキリ書ける
  • 注意しておきたいこと
  • まとめ

HTML5で作られたiPad2シミュレータ :: dotHTML5

iPad2 simulator /w Css3, Jquery and HTML5

HTML5で作られたiPad2のシュミレーター紹介記事です。

デモ:iPad2 simulator /w Css3, Jquery and HTML5 | alexw.me

[JS]入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス

Multi-Step Signup Form With CSS3 and jQuery

jQueryとCSS3を使って、セットアップ画面のようなフォームを実装するチュートリアルの紹介記事です。

フォームの下部に進捗状況のプログレスバーを表示できます。

デモ:http://webexpedition18.com/download/signup_form_WebExpedition18/

Starkersに960gsを搭載し、Boilerplateをベースに作られたHTML5製のWPテーマフレームワーク・Roots – かちびと.net

Roots

HTML5を使って作られたWordPressのテーマフレームワークの紹介記事です。

コピペで使えるCSS3ボタン6つのレシピ:phpspot開発日誌

コピーアンドペーストで簡単に使えるCSS3で作られたボタンの紹介記事です。

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/3/28 ~ 4/3

2011年3月28日~4月3日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

CSS3で画像もJSも使わないモーダルボックスサンプル:phpspot開発日誌

CSS Modal

JavaScriptを使わずに、CSS3だけでモーダルウィンドウを表示するサンプルです。

デモ:Paul R. Hayes: Experiment: CSS Modal with Animation

CSS3の各プロパティの値を少しずつ変えた見栄えが比較できるオンラインサービス -i2Style | コリス

i2Style

角丸、ドロップシャドウ、罫線などをスライドバーなどを使って簡単に設定できるサービスの紹介記事です。

表記は英語ですが、直感的に使えるインターフェイスとなっているので、英語の分からない人でも十分使えると思います。

デモ:i2Style

CSS3を使った新しい画像置換の方法 : Web Design KOJIKA17

CSS3のプロパティを使って、テキストを画像に置き換える方法の紹介記事です。ソースコードは、テキストで表示は画像にしたい場合のテクニックです。

WebKit(Safari、Google Chrome等)、Opera、Firefoxに対応しているようです。IEは、別途「ie7-js – Google Project Hosting」のようなライブラリを使うことで対応できるようです。

ちなみに、CSS3未対応の場合は、画像ではなくテキストが表示されます。

第5回 HTML5+WebSocketsで作るリアルタイムWeb | Think IT

HTML5 WebSockets APIの使い方を紹介した記事です。

[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル | コリス

Hover on Everything But

ホバー時のエフェクトをホバーしている要素以外にも適用する方法の紹介記事です。

デモ:Hover on Everything But

CSS3の可能性:Javascriptなしでスライド資料は作れるのか?!

JavaScriptを使わずに、スライドショーを作るサンプルです。

デモは、タブキーを押すと次のスライドに移ります。対応しているブラウザはWebKit系(Safari、Google Chrome等)のみですので、見る場合は、WebKit系のブラウザを使用してください。

デモ:http://lab.klab.org/young/wp-content/uploads/data/onlymycss3slide/

CSSだけで出来た3Dアニメーションが凄すぎる | デジタルマガジン

3Dアニメーションと言えば、FlashやJavaScriptを使わないとできないというイメージですが、それをCSS3だけで実現したものの紹介記事です。

対応しているブラウザは、WebKit系(Safari、Google Chrome等)のみのようです。

デモ:Spinning spiraling cube using CSS3 3D animation and 3D transforms.

HTML5を使ってWordPressをiPadに最適化するプラグインOnswipeを試した→結果:なかなか(・∀・)イイ!! – かちびと.net

Onswipe

WordPressをiPadに最適化するプラグインの紹介記事です。

HTML5を使って最適化しているそうです。

[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法 | コリス

HTML5 Placeholder Text

HTML5で標準実装されているプレースホルダ機能をHTML5未対応ブラウザで実装する方法の紹介記事です。

プレースホルダがなにか分からない人は以下のサイトを見てください。
web用語辞典 – プレースホルダ

デモ:Demo: HTML5 Placeholder Text

HTML5対応のjQuery UI向けウィジェット集「Aristo jQuery UI Theme」, – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

jQuery UI向けのテーマを紹介した記事です。

機能面でなく、ユーザーインターフェイスを変更する為のものです。

HTMLCanvasとJavaScriptで画像にウォーターマークを入れられる「watermark.js」:phpspot開発日誌

watermark

HTMLCanvasとJavaScriptを使って、画像に電子透かしを入れることができるJavaScriptの紹介記事です。

デモ1:watermark.js basic demo
デモ2:watermark.js special demo

Share on Facebook

新時代に備えよう!HTML5、CSS3記事まとめ – 2011/3/7 ~ 3/27

2011年3月7日~3月27日までの間に見つけたHTML5、CSS3関連記事のまとめです。

デモページを見る時は、HTML5、CSS3対応のブラウザを使用してください。

 

CSS3の説明がグラフィカルでわかりやすい『CSS3 Files』 – 100SHIKI ~ 世界のアイデアを日替わりで

IE9にも対応したCSS3リファレンスサイト「css3files」:phpspot開発日誌

CSS3の勉強を始めようと思っている人向けのサイトの紹介記事です。

ただし、外国の記事なので、すべて英語で記述されています。

HTML5 と CSS3 でクロスブラウザーの機能を実現する

IBMによるHTML5とCSS3でクロスブラウザ機能を実現するための説明記事です。

IE、Safari、Firefox、Google Chromeなど主要ブラウザすべてで今すぐに使える具体的な方法が説明されています。

勉強会やセミナーに。動画と別コンテンツを連携させるHTML5動画フレームワーク「Popcorn.js」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

Popcorn.js

動画の内容とコンテンツを連動させることが出来るフレームワーク「Popcorn.js」の紹介記事です。

GoogleマップやTwitterと連動させたりといった使い方もできるようです。

デモ:Popcorn.js | The HTML5 Video Framework

wise9 › お絵描きアプリで学ぶHTML5のCanvas超速入門 #1

お絵かきアプリを使ったHTML5のプログラミング解説記事です。

サンプルソースもあり、説明もかなり細かいので勉強する上ではオススメです。

HTML5の新機能は使える?フォームまわりのブラウザ対応状況まとめ | IDEA*IDEA

HTML5

HTML5では、フォームまわりがかなり便利になっています。

ただし、すべてのブラウザですべての機能が実装されているわけではありませんので、現時点での各ブラウザの対応状況まとめ記事です。

CSS3のアニメーション効果をインタラクティブに設計できる『CSS EASING ANIMATION TOOL』 | IDEA*IDEA

グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」:phpspot開発日誌

CSS3を使ったアニメーションをインタラクティブに設計できるツールの紹介記事です。

デモ:Ceaser – CSS Easing Animation Tool – Matthew

CSS3のベンダープレフィクスを自動で追加してくれる「CSSPrefixer」 | CREAMU

面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」:phpspot開発日誌

CSSPrefixer

ブラウザ毎に先行実装されている機能を使う場合には、プロパティの前にプレフィックスを付ける必要があるそうですが、そのプレフィックスを自動で付けてくれるサービスの紹介記事です。

ちなみに、プロパティの前に付けるプレフィックスですが、SafariやGoogle Chromeの場合は「-webkit-」、Firefoxの場合は「-moz-」を付けます。

デモ:CSSPrefixer

CSS3だけで描かれたAppleワイヤレスキーボード・・・ | IDEA*IDEA

Appleキーボード

AppleのMac用キーボードをCSS3で再現したサイトの紹介記事です。

キーボードでキーを入力するとタイプしたキーが押されるようになっています。

デモ:http://dl.dropbox.com/u/921159/Keyboard/page.html

超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌

CSS3で画像を使わずに、吹き出しを表示するサンプルの紹介記事です。

以下のような吹き出しを作ることができます。

Speech Bubbles

デモ:Pure CSS3 Speech Bubbles Without Images

Share on Facebook

広告

Facebook

カレンダー

2017年3月
« 5月    
 1234
567891011
12131415161718
19202122232425
262728293031  

最近の投稿

アーカイブ