BLOG

ブログ

2022.08.17|技術ブログ

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サイト制作や改修の依頼・お見積もりはこちらまでお気軽にお問い合わせください。

CONTACT

ご質問・ご相談は
お気軽にお問い合わせください。

受付時間:平日 9:30〜18:30(土日祝除く)
※メールは24時間受け付けております。

OSAKA Office大阪本社

〒541-0054 
大阪市中央区南本町1-8-14 
JRE堺筋本町ビル9階
詳細はこちら

TOKYO Office東京支社

〒103-0027 
東京都中央区日本橋2丁目2−3 
RISHEビル4F
詳細はこちら