[CSS]スタイルシートのすご技、どちらがCSS3でFlashでしょうか？Flashで作成されたアニメーションのバナーをCSS3で再現し、どちらがCSS3でFlashかあてるコンテンツを紹介します。 CSS3 Ads Versus Flash Ads [ad#ad-2] デモはCSS3アニメーションを使用しているため、Webkit系ブラウザ（Chrome, Safari）でご覧ください。 デモは全部で三つあり、どれもぱっと見には区別がつかないものばかりです。
IE9のHTML5/CSS3のサポート状況
IE9betaが先日公開されましたが、現在分かってる範囲のIE9のHTML5のサポート状況を紹介します。
CSS3グラデーション・角丸のジェネレーターをjQuery/CSS3/HTML5で作成するチュートリアル
jQuery, CSS3, HTML5を使用して、CSS3グラデーション・角丸を生成するCSS3ジェネレーターを作成するチュートリアルを紹介します。 Creating a CSS3 Generator with CSS3, HTML5 and jQuery デモページ ※デモはWebkit系ブラウザ（Chrome, Safari）で動作します。 [ad#ad-2] 上記デモでは、CSS3グラデショーン（上のキャプチャ）、角丸（下のキャプチャ）のCSS3をブラウザで表示確認しながらコードを生成できます。 チュートリアルでは、HTML5のDOCTYPEの解説から、各要素へのスタイルシートの適用まで詳しく解説されています。 時間がない方は、とりあえずページ下のファイル一式をダウンロードすると、上記のデモがそのまま楽しめます。
[CSS]「background-clip」を使って、テキストの下に画像を表示するスタイルシート
CSS3の「background-clip」を使って、テキストの下に画像を表示するスタイルシートを紹介します。 また、CSSの特定のプロパティに対する、サポートブラウザと非サポートブラウザへの対応方法も解説されています。 Show Image Under Text (with Acceptable Fallback) デモページ [ad#ad-2] デモはWebkit系ブラウザ（Chrome, Safari）でご覧ください。 マウスホバーでCSS3アニメーションも楽しめます。 マウスホバー時のキャプチャ 「background-clip」は背景の適用範囲を指定するプロパティで、対応していないFirefox 3.6で表示すると下記のようになります。 ※Firefox 4では対応予定 非対応ブラウザでの表示 [ad#ad-2] アイデアのベースとなったスタイルシートは、下記のようになります。
[CSS]CSS3 Transitionsを使用した画像ギャラリーのスタイルシート
CSS3 Transitionsを使用して、対応ブラウザにはアニメーションを加え、非対応ブラウザにはアニメーション無しで表示する画像ギャラリーのスタイルシートを紹介します。
これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例:phpspot開発日誌
これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 2010年10月07日- CSS3 Animated Bubble Buttons | Tutorialzine これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例です。 ボタンにカーソルを合わせるとカッコよく背景がアニメーションされ、よりボタンが押したくなるかもしれないテクニックです。 デザイナの方は１つのテクニックとして知っておいて損はしなさそうなテクニックなので押さえておいてもよいかも。 デモページで見てみる アニメーションに使う背景画像。 アニメーション自体は transition プロパティを用いて実装されています。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種 I
イカしたデザインのプログレスバーをCSS3で作成する例:phpspot開発日誌
How to create a kick-ass CSS3 progress bar - CatsWhoCode.com イカしたデザインのプログレスバーをCSS3で作成する例 次のようなデザインのプログレスバーをCSS3とJSを使って実装する例です。 バーの背景がアニメーションする上に進捗によって滑らかにアニメーションしてくれます。 そのまま応用して使うことも出来ますし、解説を見て勉強することも出来ます。 CSS3なブラウザで動きを見てみましょう。 実装ページ 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 IE6-8でもCSS3が使えるようになる「CSS3 PIE」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種
コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル:phpspot開発日誌
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン
iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック:phpspot開発日誌
iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック 2010年10月15日- Customizing web forms with CSS3 and WebKit - (37signals) iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニックが37signals.comにて紹介されています。 紹介されている１例として、SafariというとフォームおなじみのAquaっぽいスタイルになりますが、-webkit-appearance: none; のように設定するとプレーンなフォーム要素になるようです。 CSS3や画像を活用して、次のようなフォームをカッコよくデザインしたサンプルなんかも公開されています。 実際に見てみる 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CS
HTML5/CSS3に関する便利ツールやチーとシート、リソース２５:phpspot開発日誌
25 Useful HTML5/CSS3 Tools, Cheat Sheets and Resources HTML5/CSS3に関する便利ツールやチーとシート、リソース２５。 HTML5やCSS3に関する勉強用や効率化に役立ちそうなエントリのご紹介です。 以下に一部をご紹介。 CSS3 Selectors Test CSS3のどのセレクタが効いているかテスト Web Browser CSS Support ブラウザごとのCSS対応状況をテーブルで表示 HTML5 Security Cheatsheet HTML5に関するセキュリティのチーとシート HTML5 Gallery HTML5で書かれたいい感じのサイトギャラリー HTML5 CheatSheet HTML5のタグのチートシート CSS3 Please! クロスブラウザでCSS3を動かせるためのプロパティジェネレーター CSS3
コーポレートサイト向けに美しくデザインされたフリーのHTML5+css3テンプレート - かちびと.net
HTML5+css3なので、実際の業務で 使用する機会は日本では無さそうで すが、デザインがとても美しかったの でメモがてらご紹介。jQueryはIEでも 動いたのでcss3やhtml5を変更すれ ば普通に実践使用できそうです。 綺麗なレイアウトと定番の赤×黒×グレーの色合いで、コーポレートサイトにぴったりですね。 Free HTML5 Website Template for Industrial Business 実物見ると結構素敵です。右側の画像はjQueryを使用したユニークなスライド。 下部メニューにcss3が使用されています。 TOPページ以外に子ページも4ファイル同梱されています。PSDファイルもありますよ。 IE6のキャプチャです。角丸や回転部分にcss3が使用されているのが分かります。jQueryは普通に動いています。 <header>や<nav>のようなhtml5で組ま
CSS3とHTML5でどう違う？ WebKit最新開発版で試す「ルビ」 - builder by ZDNet Japan
HTML5のルビとXHTML 1.1のルビ 本連載のテーマであるEPUBは、規格の成立経緯と仕様の両面において、ウェブと切り離しては考えにくい性質を持っています。基本的にはXHTMLとCSSでコンテンツを記述するため、iOSに搭載のEPUBビューワ「iBooks」のように、エンジン部分をウェブブラウザと共有している例も少なくありません。ウェブの仕様およびその実装であるウェブブラウザとEPUBは不可分の関係、ということもできるでしょう。 そしてウェブの仕様は、現在「HTML5」へと歩を進めつつあります。正式な規格化（W3Cによる勧告）は2012年頃と先の話ではありますが、すでに最終草案（ラストコール）への工程表が提出されていますから、仕様としてはほぼ固まっていると見ることができます。その流れを見越し、主要なウェブブラウザがHTML5の実装を開始していることは、ご存じと思います。 振り仮名とし
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
jQueryとCSS3、HTML5でここまで出来るホバーインタフェース:phpspot開発日誌
WanderWall ? A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3、HTML5でここまで出来るホバーインタフェース。 jQueryで様々なことが出来るようになっているのはご存知だと思うのですが、更にCSS3とHTML5も組み合わせるともっとすごいよ、という１つのデモです。 まだまだインタフェースは進化するのだな、という可能性を感じるものになっているので一回見ておいたらよいかも。 WanderWallのデモ とにかく実際にHTML5対応のブラウザで見てみもらうのが一番分かりやすいです 上のメニューにカーソルを合わせると画面がアニメーションしながらクールに切り替わります。 HTML5ブラウザがデフォルトになり、こうした技
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs
CSS3の3D transformationを使ったすごいサンプル:phpspot開発日誌
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
