Day: February 1, 2012

CSS3の気になる効果でアニメーションボタン

CSS3が秘めた可能性にみなさんの注目も集まっているかと思いますが、本日はCSS3ボタンの実験をお見せしたいと思います。今回のアイデアは「様々なスタイル、マウス オーバー効果、アクティブステータスを持ったアニメーションリンク要素を作成する」というものです。 今回デモで使用しているアイコンはwebiconset.comから、またシンボルフォントはJust Be Niceからお借りしています。 どんなHTML構造なのか、「ノーマル」「マウス オーバー」「アクティブ」と各ステータス時のスタイリングはどうなっているのかと言うことを、1つ1つのデモで確認しながら見ていきたいと思います。 ※アニメーションやトランジッションは、CSS3のプロパティをサポートしているブラウザでのみ正常に機能しますのでご留意ください。 あんまりギチギチに書き込みたくないので、CSSのベンダープレフィックスは省略しています。ご了承くださいね。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 Demo 1 1つ目のデモでは、それぞれ別々のコンテンツを持った大きなボタンを作成しています。ボタンのコンテンツは左側に「アイコン」と「本文」、右側に「矢印」、そしてマウス オーバー時には価格が表示されるようになっています。 HTMLマークアップ マークアップ構造は極めてシンプルで分かり易いもので、アイコンはimgタグで囲み、他の要素はspanタグで囲んでいます。 CSSスタイリング スタイリングでは、マウス オーバー時にアニメーション化させたい要素に、適切なトランジッションが適用されているかどうか注意する必要があります。ここでは価格部分は透過度を0にすることで見えなくしており、複数のボックスシャドウを適用することで、より現実的な効果を作成出来るようになります。 ボタンをマウス オーバーした時にはボックスシャドウを変更し、価格を表示させてアイコンをフェイドアウトさせています。 アクティブステータス時には、あたかもボタンが押されているかのような効果を出す為インセットシャドウをセットしているのと、右側の矢印アイコンは肥大させています。 Demo 2 2つ目のデモは1つ目とよく似ているのですが、別の効果を適用させています。 HTMLマークアップ HTMLのマークアップは1つ目のデモと同じです。 CSSスタイリング スタイル設定も1つ目のデモとほぼ同じですが、色を変えてあります。それとマウス オーバー時に少し違う効果を与えています。価格部分はノーマル時「0」の設定からオリジナルサイズまで戻しているのと、アイコンは消滅、そして矢印のspanタグは背景色が赤に変わります。 アクティブ時も1つ目のデモとほぼ同じですが、やはり色を変更しました。ボタンを押すと、矢印アイコンが回転するようにしてあります。 Demo 3 3つ目のデモでは全く違う効果に挑戦しています。ボタンがマウス オーバーされると下に展開し、そこに新たなメッセージが表示されるようになっています。矢印のアイコンは少しだけ回転させています。 HTMLマークアップ HTMLのマークアップも、今までの2つとは若干異なります。スライドダウンされた場所に表示されるメッセージには「a-btn-slide-text」というクラスを与えています。 CSSスタイリング ボタンマウス オーバー時にアニメーションで追加メッセージを表示させる為に、ノーマル時にも一定の高さを維持します。「a-btn-slide-text」の部分の追加メッセージのポジションは絶対配置(absolute)で、マウス オーバー時に0から36pxまで高さをアニメーションさせます。 マウス オーバー時にはボタンと追加文字要素の高さを変更します。また矢印アイコンの角度を45度回転させます。 アクティブ時はボタンが押されているように見える様、ボタンをほんの少し移動させ色の調整をしています。 Demo 4 4つ目のデモも3つ目と少し似ていて、今回は追加メッセージを右側の水平方向にスライドアウトさせています。これは「ボタンが開いたらメッセージが見えた!」ような効果にしています。 HTMLマークアップ HTMLのマークアップは3つ目と同じです。 CSSスタイリング スタイル設定は3つ目と同じような感じで、以下のようになります。変更部分は色と追加文字要素のポジションです。 マウス オーバー時にはボタンの右パディングを増やしているのと、「a-btn-slide-text」spanタグの幅を広げています。 アクティブ時はボタンが押されているように見える様、インセットシャドウの適用と下方向に少し沈ませています。 Demo 5 5つ目のデモではアイコンにシンボルフォントを使用しています。マウス オーバーするとそれまで見えていたアイコンが消えて、矢印のアニメーションが現れる様な効果を実現させています。 HTMLマークアップ 今回の構造では、ボタンリンクの中に4つのspan要素があります。その中で「a-btn-slide-icon」クラスを持ったspanタグが、上から下へと移動する矢印アニメーションです。 CSSスタイリング 左側でアイコンを表示させる為にフォントを使用するので、フォントも組み込ませる必要があります。矢印はトップの値に-30pxを設定することにより非表示にさせることが出来ます。 マウス オーバー時は左側のアイコンをフェイドアウトさせ、矢印アニメーションを止まることなく再生させます。 ボタンを押した時には、ボタンを赤に変化させインセットシャドウを適用させることにより「押されてる」効果を演出しています。 最後に上から下への矢印アニメーションの設定です。 Demo 6 今回はちょっと豪快に行きましょう!真ん中に星が入った円形ボタンの操作を行います。もっちろんマウス オーバー時には真ん中の星は回転させますよ♪しかもパルス機能付きです。それから追加メッセージを表示させています。 HTMLマークアップ ここでは3つのspanタグをボタンリンクで囲んでいます。最後の一つはマウス オーバー時に現れる隠れメッセージです。 CSSスタイリング 今回のデモでは「nth-child」を使用します。spanタグは3つあるので「.a-btn span:nth-child(1)」「.a-btn span:nth-child(2)」「.a-btn span:nth-child(3)」と分けておきましょう。 それから円形ボタンを作成し、ファンシーなボックスシャドウを適用させます。水平方向の真ん中にメインの文字を配置する為に、displayプロパティは「table-cell」にセットします。星と隠れメッセージのポジションは絶対配置(absolute)です。 マウス オーバー時にはボタンのボックスシャドウを変更し、持ち上がったかのように見える様にします。隠れメッセージを表示させ、元々表示されていた文字はフライアウト・アニメーションを適用させます。星には回転アニメーションを加えています。 クリックしたらボタンが押されているように設定しましょう。 回転とパルスアニメーションはこのように設定します。 Demo 7 最後のデモは、ボックスシャドウをうまく使って3D効果を演出しています。 HTMLマークアップ HTML構造は5つ目のデモと同じです。 CSSスタイリング CSSのスタイル設定も5つ目のデモとよく似ています。色と影のを少し変更しました。 マウス オーバー時にはボタンを拡大し、内部の小さなアイコンを回転させています。 ボタンをクリックした際には、ボタンを小さくしているのとボックスシャドウを調整することにより「押された」感を演出しています。 これで全部です!このデモを参考にしてCSS3で色々面白いボタンを作ってみてくださいね。 参考サイト Add to Cart Buttons (PSD) Simple CSS3 Button Ultimate CSS Gradient Generator

詳細を読む »