Active Effect default
Active Effect red
Active Effect green
Note:モバイル端末での、動作がうまくいっていないかもしれません。
レスポンシブレイアウトでのリンクのプレゼンテーションについて
WordPressのNew theme tags have arrivedのアナウンス(2016/5/25)で、テーマを選ぶ時のキーワードになるタグの変更がありました。
responsive-layout,fixed-layout,fluid-layout のキーワードは、削除され、grid-layout が追加されました。
廃止されたキーワード、とりわけ「responsive-layout」タグは最も短命なタグとなりました。
これは、レスポンシブレイアウトが、急速に普及し特別な意味を持たなくなったという事を象徴しているように思います。
一方では、「Google Design」 の「マテリアル・レスポンス」のような、
「操作と連動した 解かりやすい動作」は、説得力を感じ、HTMLでも考慮すべき点は少なくないと思いました。
もうすでに、WEBにはたくさんの情報があるみたいですが（[JS]これを待ってた！波紋のように広がる美しいエフェクトを簡単に実装できるスクリプト -Waves)
HTMLでは、操作時のスタイルを指定する場合は、:active :focus が使えます
まずは、CSSだけで、出来るだけ簡単なものを作ってみた
.showcase a{
padding:1em;
}
.rd-active-effect:hover{
background:rgba(222,222,222,.1);
}
.entry-content .rd-active-effect {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
position: relative;
background: #fff;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
vertical-align:top;
}
.rd-active-effect:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #ecf0f1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.rd-active-effect:focus, .rd-active-effect:active {
color: #000;
background:rgba(149, 165, 166,1.0);
}
.type-red:focus, .type-red:active {
color:#000;
background:rgba(231, 76, 60,.3) }
.type-green:focus, .type-green:active {
color:#000;
background:rgba(46, 204, 113,.3);
}
.rd-active-effect:focus:before, .rd-active-effect:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
関連
-
ripple effect CSS
2016 年 6 月