CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法
またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。 とりあえずデモです。↓のボタンにマウスを乗せてみてください。 ※ 最新の Firefox か webkit で見てください。 作り方 まず、CSS3で円をどうやって作るんだ？と思った方は、昨日の記事 CSS3 の border-radius を使って円形のサムネイルを作る方法２つ を読んでみてください。 HTML Aタグでマークアップしています。アニメーションするリングの部分は、SPAN.ring が担当します。 <a class="button" href="#"> <span class="ring"></span> </a> アニメーションするリングの部分は、SPAN.ring をキーフレームアニメーションで動かします。 ※ わかりやすくするために、ベンダープレフィックスは付けていません。 実際のものが欲
2012年のWebトレンドの○をあなたのデザインに取り入れるためのアイディア
2012年のWebのトレンドに円があるらしいです。 もちろん、今まで 円という表現がなかったというわけではありませんが、CSS3（border-radius）で簡単に円を表現できるようになったことで、「矩形と同じように円が使える」ってことですからねー。トレンドというよりは、より一般化していくんだと思います。 そこで今回の記事では、円をサイトに使うためのアイディアを紹介します。 また、このブログでも、CSS3で 円を作るチュートリアルなど書いていますので、 そちらも合わせ読んでください。 - CSS3 の border-radius を使って円形のサムネイルを作る方法２つ - CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法 ※ すべてがCSS3で作られたということでなく、あくまで表現の参考として見てください。 1. アクセントとして使う 一般にWebというメディアは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
