100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
IEでも再現可能！簡単にエフェクトがきいたホバーボタンを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。 今回CSS3で実装されたCreative Button Styleエフェクトが素敵だったのでjQueryで再現してみました。 実装の仕方をご紹介いたします✌(´ʘ‿ʘ｀)✌ HTMLとCSSの準備 今回jQueryで実装するために修正をいたしました( ˘ω˘) HTML HTMLは参考サイトをそのまま使用します( ˘ω˘) <button class="btn btn-1 btn-1b">Button</button> CSS CSS3独自のtransition要素を削除して、ホバーはjsで実装するため削除をしました。( ˘ω˘) 参照元 .btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; paddin
ブルブル落ち着きのないエフェクト「CSShake」を使ってみた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです。 はやちはよく周りの人から落ち着きがないとよく言われます そういえば子供の頃から親にも言われていました((((´ʘ‿ʘ｀)))) 今回は、はやちのようにブルブルふるえる落ち着きのないエフェクト「CSShake」をご紹介致します((((´ʘ‿ʘ｀)))) ブルブルする種類 ブルブルの動きは全部で9種類用意されています((( ˘ω˘)))☝ Basic Shake…基本のブルブル Slow Shake…ちょっと遅く大きくブルブル Little Shake…小さくブルブル Hard Shake…激しくブルブル Fixed Horizontal…横にブルブル Fixed Vertical…縦にブルブル Fixed Rotation…回るようにブルブル Opacity Shake…透明度が変わりながらチカチカブルブル Crazy Shake…縦横無尽にバタバタチカチカブルブル
[CSS]アイデアが面白い！画像に美しいインタラクションを加えるスタイルシート
風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。 便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。 JavaScript無しというのはポイント高いです。 デモのアニメーション 実際の動作は下記ページで確認できます。 デモはCSS3対応ブラウザでご覧ください、Chromeが一番美しくエフェクトを描画します。 LeTrailing Effect 実装はシンプルで、あえて難点をあげれば空divを数多く使うことでしょうか。 HTML 画像はbodyの背景で表示されているので、HTMLはグリッドを描くdivだけです。 <body> <div class="div"></div> <div class="div"></div> ... ... <div cla
[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css
デモ：ホバー時にフェードで表示 Label.cssの使い方 使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> <link rel="stylesheet" href="css/label.css" /> </head> Step 2: HTML 画像を配置するimg要素にfigureを加えます。 <figure> <img src="image.jpg" alt="代替テキスト"> </figure> figureにclassでlabelを加え、配置するポジションを指定します。 <figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure> 画像の上に配置するテキストをdata属
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
