[CSS]特定のエリアだけをアニメーションで一瞬目立たせるテクニック
編集可能なページなどで変更した箇所を分かりやすくするために、ターゲットされるとそのエリアだけをフェードのアニメーションで一瞬目立たせるスタイルシートのテクニックを紹介します。 Yellow Fade Technique with CSS Animations [ad#ad-2] このテクニックが広まったのは「Basecamp」のイエローフェードが有名で、JavaScriptを使用して特定のエリアをイエローにハイライトして目立たせます。 Basecampの紹介記事： Web Interface Design Tip: The Yellow Fade Technique 同様のテクニックをCSS3で実装する方法を紹介します。 ターゲットされるとそのエリアの背景色が黒から、透明に変更します。 /** * Quick fade on target to attract user attention
これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス
Flashも無し、jQueryも無し、キーフレームを使ったCSS3アニメーションで実装したかっこいいドロップダウン型のナビゲーションを紹介します。 Two Level Superfishy Menu [ad#ad-2] デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li> <a href="#">About Us</a> <ul> <li><a href="#">What we do</a></l
[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip
Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular Tooltip こちらはクリックで、「扇形に広がるツールチップ」がアニメーションで表示されます。 実装はデモページにも掲載されていますが、下記のようになっています。 HTML !-- content to be placed inside <body>…</body> --> <a class='button ctrl' href='#' tabindex='1'>★</a> <ul class='tip ctrl'> <li class='slice'><a href='#'>✦</a></li> <li class='slice'><a href='#'>✿
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜知らないと損な機能編 | DevelopersIO
はじめに 基礎編、Compass基礎編ともにたくさんのシェアありがとうございます。この記事は若干釣りっぽいタイトルをつけてしまい・・・あぁ「知らないとちょっと損な機能編」に書き換えようか迷ったけど保存せずにそっとタブを閉じました。 今回は知っている人にとってはそんなの基本だろう！っと思うようなものですが自分のようなマニュアルを読まない日本人向けに（といってもドキュメント英語だし・・・）SCSSを使う際に知らないと（ちょっと）損な機能について紹介したいと思います。 SCSSで扱うファイルの違い - partials SCSSで扱えるファイルには2つの種類「アウトプットされるファイル」と「インポート専用のファイル」があります。 このインポート専用ファイルのことをpartials（パーシャル）と呼ぶそうです。 インポート専用ファイルは先頭にアンダースコアを指定し「_sample.scss」のよう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
