マウスオーバーで円が広がるアニメーションのボタン | NAKAZI LAB.（ナカジラボ）
デモページ HTML <div id="btn"><a href="javascript:void(0);">button</a></div> CSS #btn { display: table; margin: 0 auto; width: 100px; height: 100px; } #btn a { position: relative; display: table-cell; color: #52d3ff; font-weight: bold; text-decoration: none; text-align: center; vertical-align: middle; } #btn a:after { position: absolute; left: 0; top: 0; border-radius: 50%; border: 5px solid #52d3ff; b
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
iPhone 4Sサイトの美しいスライドを実現しているCSS3のトリック | エンタープライズ | マイコミジャーナル
iPhone 4Sの販売が開始されてから2週間ほどが経過しようとしている。すでにiPhone 4Sを入手して、その高速さやiOS 5の新機能を堪能しているユーザも多いだろう。Webデベロッパ/Webデザイナとしてはここで、iPhoneそのものではなく、iPhoneの公式サイト「iPhone 4S」の上部に用意されているスライドに注目したい。ここは次のようにスライドが順繰り移動するアニメーションになっている。 Apple - iPhone 4S - The most amazing iPhone yet. のスライド1枚目 Apple - iPhone 4S - The most amazing iPhone yet. のスライド2枚目 Apple - iPhone 4S - The most amazing iPhone yet. のスライド3枚目 Apple - iPhone 4S -
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creative CSS3 Animation Menus