CSSで3D画像を実現するサンプルいろいろ
昨日の「Firefox10の新機能について」でも紹介しましたが、CSS 3D Transformの機能を使えば、3D画像をCSS（とHTML）で実装できるようになります。 ということで、3D画像のサンプルを新旧織り交ぜていくつか紹介します。いずれもhacks.mozilla.orgに掲載されているもので、Google Chrome/Safari/Firefox10以上であれば正常に動作すると思います。 １．Fun with 3D rollovers 「Fun with 3D rollovers」は、MDNのロゴにマウスをポイントすると、MDNのロゴとその裏に隠れているHTML5のロゴが回転します。 Fun with 3D rollovers ２．3D CSS Tester 「3D CSS Tester」はCSSのパラメータを変更できるようになっており、変更することでリアルタイムに動作が変わ
[CSS]Adobeのサイトのあのかっこいいヘッダバーを実装するチュートリアル
ホバーエフェクトのキャプチャ HTML マークアップは非常にシンプルで、内部にリンクを配置したただの見出しです。 <div class="module"> <h2>Community <a href="#">Blue</a></h2> <!-- stuff in module --> </div> CSS ヘッダの基本となるスタイルで、a要素の左にborderでホワイトの領域を設定します。 .module h2 { background: #ccc; padding: 0 0 0 10px; font-size: 16px; /* Thickness of the bar more easily achieved with line-height since padding would push link inward. */ line-height: 2; } .module h2 a
[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル
ボタンのフォントとカラーをセットし、下線を消します。 .buttonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; } [ad#ad-2] 実装：アニメーションでボタンのサイズを変更 ボタンのサイズをアニメーションで変更します。 デモページ: demo 1 CSS:Basic ボタンに「display:block;」でブロック要素にし、ボタンの基本となるスタイルをセットします。 #button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px;
CSS3で作るスマートフォン用ページ
スマートフォンサイトの基本のマークアップ スマートフォンサイトは、特に理由がない限りHTML5とCSS3で制作するのが一般的です。スマートフォンに搭載されているブラウザは、HTML5やCSS3の対応が比較的進んでいるため、PCサイトのように古いブラウザを意識しながら制作する必要はありません。これまでの総まとめとして、新しい技術を試すのにちょうど良いスマートフォンサイトを作ってみましょう。 基本のHTML5テンプレート ベースとなるマークアップは次の通りです。スマートフォンならではの記述がありますので、順を追って説明していきます。 ［リスト01］スマホ用のHTML5テンプレート <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content
[CSS]テキストに美しい3Dやレタープレスなどのエフェクトを与えるスタイルシート
テキストにシャドウをつける『text-shadow』で、Photoshopで作ったかのように美しい3Dやレタープレスなどのエフェクトを与えるスタイルシートを紹介します。 Text Effects using CSS3 [ad#ad-2] CSS3を使ったテキストエフェクトのデモ text-shadowの指定方法 CSS3を使ったテキストエフェクトの実装 CSS3を使ったテキストエフェクトのデモ text-shadowを使った3種類、@font-faceを使った1種類のデモがあります。 ブラウザは、Chrome, Safari, Firefoxでご覧ください。 デモページ text-shadowの指定方法 text-shadowの指定方法は下記のようになります。 text-shadow: h-shadow v-shadow blur color; h-shadow 水平方向のシャドウのサイズ
ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ:phpspot開発日誌
Path menu in pure CSS3 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ path.comのメニューというのは次のようなもので、クリックするとアニメーションしながらビローンと開くようなものです これをCSS3で実装したデモが公開されています。 アニメーションもしてJavaScriptも使っている気がしますがピュアCSS３とのこと。 気持よく動きます スマホサイトに導入してみるといいかもしれませんね。 関連エントリ フリーのCSSメニューテンプレートとチュートリアル集 リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSSのナビゲーションメニューサンプル５５
[CSS]ol要素に頼らないナンバリングするスタイルシートのテクニック
掲載するコンテンツにナンバリングをつける際にまず思いつくのは、ol要素を使うことでしょう。確かに、ol要素はナンバリングするのに非常に合理的です。 ここでは、そのol要素を頼らずにナンバリングするテクニックを紹介します。 Numbering In Style [ad#ad-2] 下記は各ポイントを意訳したものです。 ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。 このFAQのリストは、dl要素で実装されています。 dl要素でナンバリングしたデモページ ※実装は、下記で紹介。 ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered list numbers」の記事です。 Styling ordered list numbers デモページ このデモでは入れ
様々なドロップダウンメニューを実装するスクリプト集:phpspot開発日誌
Useful jQuery Drop Down Menu Scripts - DesignModo 様々なドロップダウンメニューを実装するスクリプト集 ページをシンプルに見せつつ、機能性も損なわないようにできるドロップダウンメニューも色々な実装がありますね。 様々なタイプのドロップダウンと、それを実現するためのスクリプトが公開されていていざ自分がドロップダウンを実装するという時に参考にできます 最近はやってるサイトはナビゲーションなんかもシンプルになるように、それでいて十分な機能を提供している気がしますが、ドロップダウンなどをうまく活用していますね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSS3単体でアニメーションするドロップダウンメニューを実装 CSS3だけで実現する幅広で使えそうなドロップダウン実装チュ
HTML5に踏み出せない人に捧げる、HTML5を使う10の理由
HTML5、使ってますか？ このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。 Top 10 Reasons to Use HTML5 Right Now [ad#ad-2] 下記は各ポイントを意訳したものです。 10. アクセシビリティ 9. ビデオとオーディオのサポート 8. Doctype 7. よりクリアなコード 6. ストレージ 5. インタラクション 4. ゲームの開発 3. 古いブラウザのサポート 2. スマートフォンへの対応 1. これからはHTML5 10. アクセシビリティ HTML5は「セマンティック」「ARIA」の2つの理由でサイトをアクセシブルにします。header, footer, nav, section, adiseなどのような要素はスクリーンリーダーにもコンテンツに容易にアクセス可能なようにします。また要素にrole
CSS3を使った高度なアニメーションライブラリ·Animate.css MOONGIFT
Animate.cssはCSS3を使ったアニメーションライブラリです。様々なイフェクトが用意されています。 Animate.cssはCSS3を使ってアニメーションを実現するライブラリです。何はともあれ、デモ動画を見て何が実現できるのか知ってください。 トップページです。ここの各ボタンを押すとアニメーションが実行されます。 デモ動画です。 Animate.cssの特徴としてはjQueryのようなJavaScriptベースのアニメーションではないと言うことでしょう。利点としてCSS3でサポートされているネイティブな機能を使うことでハードウェアアクセラレーションが活かせるとのことです。なお動作するWebブラウザが限られてしまうという難点はあります。 Animate.cssはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る CSSだけでアニメーショ
[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック
デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 実装のイメージ：天地均等にクリップ [ad#ad-2] HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src="path/to/your/image.jpg" alt="your image"> </div> CSS 上限の高さを450pxに設定します。 .image-wrap { max-height: 450px; overflow: hidden; max-width: 800px; -webkit-transition: max-width
Fireworks CSS3 Mobile Packを使ってみよう | デベロッパーセンター
Fireworksの拡張機能である「Fireworks CSS3 Mobile Pack」が、Adobe Labsにて公開されています。この拡張機能を使えば、Web標準に沿ったWeb／モバイル／タブレット向けデザインの制作をより効率的に行うことができます。Fireworks CSS3 Mobile Packをインストールすると、下記2つの機能が追加されます。 ［CSS3 Property］パネル： デザイン要素からシームレスにCSS3プロパティを抽出することができます。 ［jQuery Mobile Theme Skinning］ツール： 独自のjQuery Mobile用スプライト画像とテーマ用CSSを作成することができます。 本記事では、これらの機能の使い方を解説します。 サンプル：css3_mobile_pack_sample.zip 必要なもの Fireworks CS5／CS
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
CSS3単体でアニメーションするドロップダウンメニューを実装:phpspot開発日誌
CSS3 animated dropdown menu - RedTeamDesign CSS3単体でアニメーションするドロップダウンメニューを実装 ドロップダウンをCSSのみでしかもクオリティもよく実現できているサンプルです JavaScriptがいい加減にせい、というぐらいの出来になっております 選択肢が広がるというのはいいことですね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Google＋風のボタンUIセット＆ドロップダウン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
角丸・グラデーション・影を表現するCSS3コードを自動生成してくれるジェネレータ「CSS3 Generator」 : 二十歳街道まっしぐら
CSS3でシンプルな図を描く際のチートシート:phpspot開発日誌
Webクリエイターなら押さえておきたい、CSS3を使った次世代表現
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
CSSボタン作成チュートリアル＆テクニック集１３:phpspot開発日誌
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌