[CSS]ホバー時のエフェクトに一工夫、リボン風デザインのナビゲーション
画像を一切使用せず、CSS3や擬似要素を使ったリボン風デザインのナビゲーションを実装するチュートリアルを紹介します。 CSS Ribbon Menu [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーションに対応したブラウザ、Chrome, Safari, Firefoxでご覧ください。 CSS3アニメーション非対応のIE8/9ではアニメーション無し、擬似要素非対応のIE7ではリボン無しになります。 デモページ [ad#ad-2] 実装 HTML HTMLはシンプルで、各アイテムをspan要素で実装し、全体をdiv要素で内包します。 <div class='ribbon'> <a href='#'><span>Home</span></a> <a href='#'><span>About</span></a> <a href='#'><span>Services</span></
ビューティホーなHTML5＆CSS3テンプレート５０:phpspot開発日誌
50 Beautiful Yet Free HTML5 And CSS3 Templates | Free and Useful Online Resources for Designers and Developers ビューティホーなHTML5＆CSS3テンプレート５０ HTML5、CSS3のテクニックを学べる上に無料で使えるということでなかなか有用なまとめになってます。 学習がてら自分でも無料で公開しちゃうなんてのもよい学習メソッドかもしれませんね 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcanvasを使ったアニメーションするタグクラウド実装スクリプト「TagCanvas」 Flash使ってなくてもHTML5でここまでクールにできるというプロフェッショナルサイト集
CSS3で画像を分割スライドする超クールなパネル実装例:phpspot開発日誌
Sliding Image Panels with CSS3 | Codrops CSS3で画像を分割スライドする超クールなパネル実装例。 例えば、画像が４枚に分割されていてそれらがアニメーションで次の画像に切り替わるというエフェクトをCSS3で実現しています。 アニメーションの種類は４種類あって、全部CSS3でJSオフで動きます。クオリティが超高いので、ダウンロード版をそのまま使いまわすことも可能。 デモページ 関連エントリ CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」 CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル
50 Beautiful Yet Free HTML5 And CSS3 Templates
HTML5 templates are getting very popular these days because all professional HTML5 templates are compatible to all browsers with its functionality and features, and with the release of HTML5 / CSS3 it has become even more popular among designers because of the additional and great features. At the moment, HTML5 and CS3 templates are the hottest topics for the web developers, particularly CSS3 that
フルスクリーン背景がスライドショーになるCSS3サンプル:phpspot開発日誌
Fullscreen Background Image Slideshow with CSS3 | Codrops フルスクリーン背景がスライドショーになるCSS3サンプル。 ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。 画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強になりつつ、そのまま使えそうです デモページ ISDNの時代などはページ全体を背景にすることはタブーでしたが回線の高速化で珍しくなくなりましたね。 今後、よりPCのスペックがあがり回線環境がよくなることで未来はもっともっとリッチになっていきそうですね 関連エントリ CSS3のアニメーションサンプル４７ ピュアCSS3でタイピングアニメーションするデモ CSS3で実装された画像スライドショーサンプル C
アニメーションするバナーをCSS3で作るチュートリアル:phpspot開発日誌
Animated Web Banners With CSS3 | Codrops アニメーションするバナーをCSS3で作るチュートリアル。 FlashみたいにアニメーションするバナーをCSS3のkeyframeで実現したデモとチュートリアルが公開されています。 近い将来、広告のクリエイティブがCSS3になっていたりして。iPhoneでFlashが動かないのでこういう動きがでてきてもおかしくないですね デモページ デモといいつつクオリティがかなりいいですね。 関連エントリ IE9にも対応したCSS3リファレンスサイト「css3files」 CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3のアニメーションサンプル４７
ピュア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]画像の天地の上限を設定し、垂直方向の中央に配置する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
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート
JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。 デモページ 実装 デモページを例に実装方法を紹介します。 HTML 最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。 <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> More dogs! <span class="box"><img src="ht
CSS3を使ったクリエイティブなテキストエフェクト集２３:phpspot開発日誌
23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence | Onextrapixel - Showcasing Web Treats Without A Hitch CSS3を使ったクリエイティブなテキストエフェクト集２３。 CSS3でいろんな事ができるのはご存知の通りですが、テキストだけでもかなり色々な使い方があって勉強になります。 ↓ 例えば、これが画像じゃないらしいです（笑） 他にも使えるテクニックが満載 早くすべてのブラウザでCSS3が使える時代が来てほしいですね。 もちろん、画像でやったほうが楽なところは画像でやっちゃいますが、楽出来る部分はかなり楽になりそう 関連エントリ CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル 味気ないサムネイルリストをCSS3で回転させてオシャレにす
[CSS]CSS3非対応も配慮、通知パネルをブラウザの上部に配置するチュートリアル
アニメーションでスライドする通知パネルをブラウザの上部に配置するスタイルシートを紹介します。 実装では、CSS3アニメーション対応ブラウザと非対応ブラウザへの配慮もされています。 Pop From Top Notification [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ デモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。 デモページ ※上部のイエローのパネルです。 CSS3アニメーション サポート アニメーションでパネルがスライド表示され、アニメーションで隠れます。 CSS3アニメーション 非サポート スタティックにパネルが表示され、クローズボタンのクリックで隠れます。 実装：パネルをブラウザ上部に配置 まずは、パネルをブラウザの上部に配置します。 HTML パネルはdiv要素で実装します。 <div id
CSS3で作るあんなものやこんなものまとめ
さまざまな可能性を秘めたCSS3の登場から、いろんなエントリーが出てきましたので、一部をまとめてご紹介。 ちなみにこの画像はこちらのもので、CSS3だけで画像を使わずにキュウべえを書いたそうです。 CSS3でどんなことができちゃうの系 CSS3のみでいろいろなオブジェクトの作り方を掲載されている。 CSSについて知っておきたいことまとめ。 仕事で役立つ事もばっちり羅網。このまとめっぷりはすごいです。 CSS3の完全一夜漬けマニュアル。 とりあえずこの記事のところにサンプルがありますので触ってみてください。 すごく気持ちいい体験が待っていることでしょう。 CSS3のアニメーション効果を利用してちょっとダイナミックな404ページを表現しています。 すっごいかっちょいい。サンプルデモはこちら。 CSS3だけで3Dを表現。とりあえずこれがCSS3だというものを見せてくれる。ぱない。chromeでも
CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
CSS3で実装されたボタンの総まとめ
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
CSS3のアニメーションサンプル４７:phpspot開発日誌
ピュアCSS3でタイピングアニメーションするデモ:phpspot開発日誌
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン