Clippy - Web上で画像の表示する形を自在に設定
画像をWebサイトに表示する際には、四角くか画像自体を起動する形に切り抜かないといけないとお思いでしょうか。実際にはCSS3を駆使することで元の画像は変えずに表示する形状を変えることができます。 とはいえそのような表示指定を手作業で行うのはとても面倒です。そこで使ってみたいのがClippyです。 Clippyの使い方 画像はあらかじめ用意されているものから選んでもいいですし、自分で画像を指定することもできます。結果はCSS3の設定で表示されますのでコピーして自分のプロジェクトで使えるでしょう。 ClippyはHTML5/JavaScript/CSS3製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 bennettfeely/Clippy
Bounce.js·ユーザビリティ向上に使えそうなCSS3によるアニメーションライブラリ MOONGIFT
Webは基本的に表示されると全く動かないか、Flashによるスプラッシュのように最初だけアニメーションするかのどちらかが多いように思います。最近ではパララックスのようにスクロールによるアニメーションもありますが、それでも一旦表示されてしまえばそこで終わりです。 ユーザアクションによるアニメーションを実装したかったらBounce.jsを使ってみてはいかがでしょう。多様なアニメーションをCSS3で容易に実現できます。 Bounce.jsの使い方 この中央の四角がアニメーションします。 左のメニューから様々なアニメーションが指定できます。 実際のアニメーションは動画でご覧ください。 CSS3で実装されていますので負荷が低いように感じます。アニメーションは細かく制御できますので、ユーザのクリックアクションやマウスオーバーに合わせてちょっとだけ揺らしたり、新機能の紹介時に目を引くのに使ったりできそう
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
CSS3アニメーションが簡単に書けるjQuery Transit
jQuery TransitはGitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。プラグイン配布ページでダウンロードするとminify（圧縮）されているので、プラグインの中身を見たい場合はGitHubでダウンロードしましょう。 利用するWebページの body の閉じタグ直前で、jQuery本体と「jquery.transit.min.js」を読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="jquery.transit.min.js"></script> </body> //(中略) これで準備はOKです。 step2 基本的な使い方 実際のプラグインの使い方を説明します。 jquery.transit.min.js を読み込んだ後、transition
CSS3ベースの新しいhoverエフェクトが実装できる「iHover」:phpspot開発日誌
iHover CSS3ベースの新しいhoverエフェクトが実装できる「iHover」 マウスオーバーした際のホバーエフェクトをCSS3アニメーションを使ってリッチにすることが出来ます。 コードは必要な物を読み込んだ後、マークアップにclass属性でアニメーションタイプを指定すればOKみたい ちょっと派手目で、乱用は控えたいところですが、お手軽でいいですね。 関連エントリ CSS3のグラデーションがより簡単に使えるようになるjQueryプラグイン「Rainbow.js」 FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」 WEBデザイナ必携のHTML5&CSS3のコードジェネレータ「HTML5 & CSS3 Tools and Tutorials」
オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB上でCSS3アニメーションを組み立てられる「Bounce.js」:phpspot開発日誌