CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
デザイン制作時に役立つPSD形式のボタン素材 15 - NxWorld
個人的に良いなと思ったボタン素材のまとめです。 レスポンシブやフラットデザインの流行、CSS3を導入することが多くなっているなど、最近ではボタンデザインぐらいであれば画像は使用せずに実装していることも多いと思いますが、画像で実装する場合に便利だと思います。 また、画像として使わなくてもグラデーションやシャドウの使い方などデザインの参考にもなります。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。 Free Cool Buttons Psd 全15カラーのシンプルデザインなボタンで、それぞれNormal・Hover・Activeの見栄えが用意されています。 Tangy Multi-Color Button Set 同じくNormal・Hover・Activeの見栄えが用意されている全10カラーのシンプルデザインなボタンで、こちらはPSDだけでなくCSSで実装された
[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation
画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ デモでは数多くのCSS3アニメーションが楽しめます。 ほんの少しですが、gifアニメーションにしてみました。 ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。 実装できるアニメーションの一覧 All Animationの使い方 アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。 もちろん、ホバーなど他のアクションを利用することもでき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
