2024年11月から始まる「フリーランス新法」とは?要点だけわかりやすく解説
- コラム
- フリーランス/個人事業主
- フリーランス新法
Webデザインにおけるボーダー(境界線)は、元来そこまで注目を集めるような存在ではありませんでした。
しかしCSSの進化によって、ボーダーも複雑なカラーリングや特殊効果ができるようになってきており、ボーダーエフェクト(ボーダーアニメーション)は最近ではマイクロインタラクションとして注目を浴びています。
今回はCSSとすこしのJavaScriptで実装できる、8種類のボーダーエフェクトをチェックしてみましょう。
目次
SVGはさまざまな画面サイズに対応できる、有能な秘密兵器。
下のボーダーエフェクトはSVGで構成されており、コンテナのサイズと形状にあわせてフレキシブルに対応します。
See the Pen CSS border (using an SVG) by Louis Hoebregts (@Mamboleoo) on CodePen.
CSSトランジションのおもな用途のひとつとして、ボタンの枠となるボーダーの色の変更が挙げられます。
ボーダーの色を変えるだけでもユーザーの注意をひけますが、さらに仕掛けを実装してあげましょう。
下の例ではボーダーにエフェクトを加えた、ユニークなホバーをいくつかご紹介してます。ボタンを目立たせたいときにぴったりです。
See the Pen CSS Border transitions by Giana (@giana) on CodePen.
なめらかなボーダーアニメーションを取り入れたいなら、このスニペットがおすすめ。このスニペットは安っぽさがなく、スタイリッシュなデザインです。
それと同時にユーザーの目をひくアニメ―ションなので、CTAボタンに活用できそうですね。
See the Pen Animated CSS Gradient Border by Mike Schultz (@mike-schultz) on CodePen.
ボーダーエフェクトの活用におすすめなのが入力フォームです。
下のスニペットでは、入力フォームの背景やラベルにちょっとしたエフェクトが追加されています。ボーダーエフェクトがマイクロインタラクションの機能を果たしていることが伝わるはず。
小さな工夫ですが、入力フォームのUXを大幅に向上させてくれるでしょう。
See the Pen Awesome input focus effects by Takuma.I (@Takumari85) on CodePen.
アウトライン化されたテキストは、あらゆるデザインに取り入れられる優れもの。
下の例のようなエフェクトを取り入れれば、目をひくロゴやヘッダーを作れそうですね。
See the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen.
近年人気を集めている、背景を切り抜いたようなデザイン。以下のコードスニペットは、デザイン要素を透明にして、背景を表示するエフェクトです。
コンテナのボーダーとテキストの両方に、エフェクトが取り入れられています。
See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.
プレーンなリンクテキストも、ボーダーエフェクトで装飾すれば現代的なデザインに早変わり。
左上のハンバーガーメニューから、ホバーのパターンを選択してみましょう。テキストベースのナビゲーションに、ちょっとしたひねりを手軽に加えられます。
See the Pen Sass mixin library for text hover by Antonija Šimić (@tonkec) on CodePen.
ここまでは、プロフェッショナルな印象を与えるようなデザインのボーダーエフェクトをご紹介してきました。
最後にご紹介するのは、手作り感のあるボーターエフェクトです。
CSSのborder-radiusを活用して線に意図的にゆがみを加えて、ボタンを素朴な印象にしています。
See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.
ただのシンプルなボーダーではそこまで注目されません。しかし色や動きを加えるだけで、文字やボタンの印象をガラッと変えられます。
すこしの工夫で文字に魅力を与えられるボーダーエフェクトを、ぜひ使いこなしてみてください。
(執筆:Eric Karkovack 翻訳:Nakajima Asuka 編集:Sansui Riho)
CSSブレンドモード(描画モード)を用いたクリエイティブデザイン8選
Workship MAGAZINE
CTAボタンの理想的なデザインとは?サイズ/色/テキスト/配置のポイントまとめ
Workship MAGAZINE
マイクロインタラクションとは?導入の際に気をつけるべき4ポイント
Workship MAGAZINE