[CSS]CSS3を使用してアコーディオンを実装するチュートリアル
IE6やFx1.5などCSS3非対応ブラウザにも配慮した、CSS3のアニメーションで開閉するアコーディオンを実装するチュートリアルをThe CSS Ninjaから紹介します。 Create the accordion effect using CSS3 デモページ 上記のキャプチャはCSS3に対応したChromeのもので、アコーディオンの開閉はスムーズなアニメーションで行われます。 CSS3非対応ブラウザでは、アニメーションのエフェクト無しで開閉します。 CSS3で使用してるものは、角丸とアニメーションの開閉です。 アコーディオンはdl要素で実装されており、下記のようなシンプルなものです。 HTML <textarea name="code" class="html" cols="60" rows="5"> <dl> <dt><a href="#Section1">Section 1</a
[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Serviсes</a> <a href="#">Contacts</a> </nav> CSS ナビゲーションの各アイテムはflexboxで配置し、くるくるっとしたアニメーションはtransformで設定します。 body { font-family: "Open Sans Condensed" sans-serif; display: -webkit-flex; display: -ms-fle
![[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a1595bf6696cf508a760fed6fa8ed736c886b2b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015010802.gif)
[CSS]ウェブページで手軽にアニメーションが楽しめる -CSS Transitions
CSS3でアニメーションを実装するTransitionsをウェブページで効果的に使用するためのチュートリアルをWeb Designer Depotから紹介します。 CSS Transitions 101 TransitionsはSafariやChrome上で動作するCSS3のアニメーション機能で、JavaScriptやFlashを使用せずにウェブページに実装することができます。 ※Firefoxでも将来的にはサポートされる予定です。 チュートリアルでは3つのデモが掲載されています。 ※Safari, Chromeでご覧ください。
第3回 transformプロパティ | gihyo.jp
今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。transformプロパティは2008年の11月まではWebkit系とAppleのブラウザとSafariの独自実装でしたが、11月以降は正式にW3CにEditors Draftとして受けいられ、現在は策定中です[1]。 今後のブラウザでは、より一層のCSS3やSVG, HTML5の対応、レンダリングエンジンのスピードに焦点があてられます。いち早く、CSS3に慣れ実践的に使えるように、今から新しいセレクタも含めプロパティを勉強し実践で使えるようしておくべきでしょう。 今回説明するプロパティは『transformプロパティ』と『transform-originプロパティ』です。両方のプロパティに共通するtransform（トランスフォーム）という名前のとおり、『変形』を実装するためのプロパティです。
[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
CSS3で作るダイナミックな3D表現 (1/2)
ダイナミックに切り替わるページナビゲーション 一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。 この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。 STEP 1：3Dの構造を考える 最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面（div要素）を用意し、transformプロパティで変形さ
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
スクロールアニメーションによる立体コンテンツの見せ方 (1/2)
スクロールによって立体的に浮かび上がるサムネイル サムネイルに視点をフォーカスさせる仕掛けが目を引く、動画のポートフォリオサイト「MANUEL RUEDA」。ページ中央にあるサムネイルには奥行きが設定されており、スクロールによって手前に起き上がってくる動きが斬新だ。サイドナビにもスクロールに合わせたギミックが用意されており、コンテンツを何度も行き来してしまうおもしろさがある。 今回は、このサイトをヒントに、CSS3の3D表現とjQueryを使ったスクロールアニメーションを制作する。 STEP 1：スクロール値を取得する スクロール値を基にCSS3のプロパティを変化させるため、スクロール値を正しく取得することから始めよう。 スクロール値は jQueryのscrollメソッドを使って取得する。以下のようにして現在のスクロール値を取得できる。 ■ソースコード（HTML） <p id="posy"
[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック
2番目にホバーすると、2番目が広くなります 実装のヒントになったのは「Outdated Browser」のメインUIで、このflexboxを使ったUIだけでなく他にも面白い仕掛けが施されています。 Outdated Browser 実装はこんな感じです。 HTML HTMLは非常にシンプルで、各カラムはリスト要素で実装しています。 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> CSS CSSも非常にシンプル、「display: flex;」で各カラムを設定し、通常時に「flex: 1;」、ホバー時に「flex: 3;」になるようにします。 ※flexboxのブラウザのサポート状況 下記のコードは、各カラムにカラーを設定するだけでそのままコピペで使えます。 body { colo
HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選
HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選：Webサイト作成手順を勉強するまとめ（3）（1/3 ページ） 新社会人のWeb制作者／デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。 前々回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、前回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになったら、Webサイトに
[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS
スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS -CodePen こちらのデモでは、ロード時にぶらぶら揺れて表示し、ヘッダのクリック、フッタのクリックにもアニメーションが仕込まれています。 AniJSの使い方 Step 1: 外部ファイル 当スクリプトを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss
IE9+ならスクリプト無しで、タブやカルーセルなどさまざまなコンポーネントがスタイルシートで実装できる -Pure CSS Components
最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。 HTML5の「aria-hidden属性」とラジオボタン・チェックボックスをうまく使い、スクリプト無しで実装されています。 Pure CSS Components Pure CSS Components -GitHub ダウンロードできるCSSファイルには、通常のスタイルシートのほかにLESS版も含まれています。 Pure CSSで実装するカルーセル Pure CSSで実装するアコーディオン Pure CSSで実装するドロップダウン Pure CSSで実装するモーダルウインドウ Pure CSSで実装するタブコンテンツ 各コンテンツはHTML5対応ブラウザ、IEは9+でご覧ください。 Pure
safari4 betaで実装されたCSS Animationを使ってみました。
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください） CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves 'Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
[CSS]スタイルシートでページカールのエフェクトを実装するチュートリアル
パネルや画像などのちょっとしたアクセントにぴったり、紙がめくれたようなページカールのエフェクトをCSS3の「box-shadow」を使用して実装するスタイルシートを紹介します。 デモ [ad#ad-2] 実装は、下記のようになります。 HTML ページカールのエフェクトは「box-shadow」が適用できれば、どんな要素でも適用できます。 デモではリスト要素を使用しています。 <ul class="box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> CSS3の「box-shadow」「RGBa」を使用します。 CSS3非対応の旧ブラウザ用のスタイルシートも記述されています。 ul.box { margin: 0; padding: 0; clear: both; overflow: hidden;
[CSS]画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート
JavaScriptは使用せず、CSS3アニメーションで画像を振り子のように揺らすスタイルシートを紹介します。 Swinging image with CSS animations 画像はネコの写真だけで、枠やピンや糸はスタイルシートです。 実装は下記のようになります。 HTML <figure class="swing"><img src="http://placekitten.com/g/200/200"></figure> CSS body {background: #9cf;} .swing { -moz-animation: swing linear 2s infinite; -moz-transform-origin: center -20px 0; -webkit-animation: swing linear 2s infinite; -webkit-transform-o
[CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css
タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック状態でコンテンツを表示・非表示します。 デモと共に、「:checked」擬似要素の使い方を紹介します。 モーダル ボタンをラジオボタンにし、そのチェック状態でモーダルを表示・非表示します。 HTML <-- Button to trigger modal --> <label for="modal1" role="button" class="btn">Launch demo modal</lab
ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AniCollection - The easiest way to find, use and share CSS3 animations.
めしおのアフィリエイト教材レビューブログ
CSS3を使わなくてもつい使いたくなる、楽しくて実用的なオンラインジェネレーター -Useless CSS3 Generator