CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。 コンテンツはそれぞれ異なるidとclassを付与します。 <!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="p
Sliding Image Panels with CSS3 | Codrops CSS3で画像を分割スライドする超クールなパネル実装例。 例えば、画像が４枚に分割されていてそれらがアニメーションで次の画像に切り替わるというエフェクトをCSS3で実現しています。 アニメーションの種類は４種類あって、全部CSS3でJSオフで動きます。クオリティが超高いので、ダウンロード版をそのまま使いまわすことも可能。 デモページ 関連エントリ CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」 CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。 <section class="se-container"> <div class="se-slop
デモページ 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 animated dropdown menu - RedTeamDesign CSS3単体でアニメーションするドロップダウンメニューを実装 ドロップダウンをCSSのみでしかもクオリティもよく実現できているサンプルです JavaScriptがいい加減にせい、というぐらいの出来になっております 選択肢が広がるというのはいいことですね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Google＋風のボタンUIセット＆ドロップダウン
CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってCSS3アニメーション 「:disabled」を使ってCSS3アニメーション 「Media Queries」を使ってCSS3アニメーション 各スタイルシートについてのメモ 「:active」を使ってCSS3アニメーション 疑似クラス「:active」をトリガーにするCSS3アニメーションは、あらゆるエレメ
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
Fully fluid, responsive CSS carousel ? CSS Wizardry?CSS, Web Standards, Typography, and Grids by Harry Roberts CSS3で実装された画像スライドショーサンプル。 簡単なマークアップとCSS3で画像のスライドショーが実現されています。 デモページ - CSS3ブラウザで確認してみてください それにしても、CSS3になってますます奥が深くなりましたね。組み合わせ次第で新しくて面白いこともできそうです。 関連エントリ CSS3のアニメーションサンプル４７ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 CSS3を使った超カッコいいナビゲーション付きスライドショー実装例 jQueryとCSS3を使った3Dのフォトスタック実装例
テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 2011年10月21日- ottonascarella/TextBlur - GitHub テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」。 次のように最初はぼやけてるけど徐々にくっきりした文字にするなんていうことができるjQueryプラグインです。 単にテキストをその場で表示しちゃうよりも、徐々に表示するというエフェクトがいいですね。 使い方も次のように超簡単にできます。 $('h1').animate({textBlur: 20}, 0); 但し、IEでも一応対応はしているようですが、うまくは動作しないみたい。 スマホのプロモーション用のサイトなんかで使ってみてもよさそうですね。 関連エントリ テキストにグラデーションをかけられるj
Circle Navigation Effect with CSS3 | Codrops CSS3を使った超カッコいいナビゲーション付きスライドショー実装例 スライドショーというよりかは、ナビゲーションがポイントなんですが、画像の下部に円形でアニメーションしながら次の画像を表示出来るなんていうナビゲーション付きです。 そもそもの写真もカッコいいのですが、ナビゲーションの動き具合がなかなかのセンスを感じます。 プログラムのダウンロードも可能なので、これは機会があれば是非使ってみたいと思ってしまいました。 仕組みとしてはborder-radiusを大きくして円形にしつつアニメーションをかましてるという具合のようです。 このテクニックは色々応用できそうですね 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショー
幅：480pxで表示 [ad#ad-2] 実装 HTML 各パネルはリスト要素で実装します。 リスト要素を内包するdiv要素のidとclassに「st-accordion」を付与します。 <div id="st-accordion" class="st-accordion"> <ul> <li> <a href="#"> Item Title <span class="st-arrow">Open or Close</span> </a> <div class="st-content"> <p>Some content</p> </div> </li> <li> ... </li> </ul> </div> スクリプトのオプション スクリプトのオプションでは、アニメーションの種類、スピードなどが設定できます。 $.Accordion.defaults = { // index of ope
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet" href="animate.css" /> エレメントにclassを付与 <p class="flash">Live long and prosper.</p> Animate.cssの実装 デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できま
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 2枚目の画像 [ad#ad-2] 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div class="cn-nav"> <a href="#" class="cn-nav-prev"> <span>Previous</span> <div style="background-image:url(../images/thumbs/1.jpg);"></div> </a> <a href="#" class="cn-nav-next"> <span>Next</
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く