[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
スマホのボタンタップUIをCSSとJavaScriptを使って良い感じにしてみる | TENPURA - 1→10design Lab -
スマートフォンのボタンのタップUIは、 iPhoneとAndroidではデフォルトのUIが異なります。 iPhoneでは黒く透過し、Androidでは黄色い枠がつきます。 VIEW DEMO ※ スマホで見て下さい。 iPhoneではデザインに余り影響が出ないのでいいですが、Androidは濃い色がついてしまうので、黄色を使っていないサイトのデザインでしたら、どう見ても不自然に目立ってしまします。 大半のスマートフォンサイトはこういったUIのままリリースされているのが現状です。 そういったデフォルトのタップUIを消すには下記のCSSを記述すれば消えます。 body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
