BLOG
ブログ
CSSだけで作るインタラクション
こんにちは。イーナWebページ制作コーディング担当のテラタニです。
WEBデザインでは見た目の印象が大事ですが、更に印象を深めるのが「動き」です。
紙媒体では出来ないような動きを付けられるのがWEBデザインの利点です。
しかし実際にASP(Shopify・FutureShopのカート等)ではコーディング可能な範囲が決まっていて、フォームのボタンや商品一覧等はHTMLを書き換えることもできなかったりします。
そこでこの記事ではWebサイトを作る際、フォームやカートのページで複雑なHTMLを書かずにCSSのみでアレンジを加えるアイデアを集めてみました。
筆風アンダーライン
See the Pen
筆風アンダーライン by ZOOST (@ENA_Enginner)
on CodePen.
ホバー時と外した時のアニメーション速度を変えることで違和感を減らしています。
ジャンルを問わず和風なデザインに合うようなアンダーラインになりました。
蛍光ペン風アンダーライン
See the Pen
蛍光ペン風 by ZOOST (@ENA_Enginner)
on CodePen.
グラデーションはジェネレータで生成しています。
濃淡をつけた長方形ですがそれらしく見えますね。アナログ感を出したいときに使えそうです。
ライトアップ
See the Pen
ライトアップ by ZOOST (@ENA_Enginner)
on CodePen.
mix-blend-modeをsoft-lightに設定することで重なった部分がより明るくなるように見えます。
文字が潰れそうになってしまうのでカラーリングが難しいですが印象的ですね。
時差強調
See the Pen
時差強調 by ZOOST (@ENA_Enginner)
on CodePen.
transitionを使って本来の要素内テキストと疑似要素を使って入れたテキストを時間差で強調させています。
疑似要素に対して使用したtransitionはブラウザによって挙動が異なるようです。Chromeでは本体要素の後に動きましたが、Firefoxでは同時に動作がスタートしました。
いかがでしたでしょうか。CSSだけであしらいを追加できるのでUXを改善することが出来ます。
今後もZOOSTの技術ブログとしてデザインやコーディングテクニックを掲載していきます。
Webサイト制作や改修の依頼・お見積もりはこちらまでお気軽にお問い合わせください。