プログラミング

プログラミング

PR

Webデザイナー必見!ユーザーの目を惹きつけるボーダー効果を実装するCSSコード8選【枠線サンプルあり】

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、8 Fantastic Pure CSS Border Effect Code Snippets
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

5,690 views

読了時間 : 約3分17秒

ボーダー(枠線)をサイトに入れることは、画像やコンテナ要素への仕上げのようなささいなディテールで飾り程度とみなされ注目されることもありませんでした。ところが、CSSが進化するにつれて、さらなる可能性が見えてきました。

 

今までよりも彩り豊かで特殊な効果のものが増え、ボーダーを活用すれば注目すべき情報へ自然に注意を引くことができます。また、ユーザーエンゲージメントとマイクロインタラクションでも活躍します。というわけでCSS(やJavaScript)が提供する優れた機能でパワーアップしたボーダーの例を見ていきましょう。

 

 

SVG Border Magic:シャープな動きが格好いい

 

SVG画像は、さまざまな画面サイズで動作させられ、クールなエフェクトを加えるのにとてもいい秘密兵器となります。コンテナのサイズと形状に自動的に適応するマルチカラーのアニメーションボーダーが可能です。要素のサイズを大きくしたり小さくしたりしても、ボーダーは維持されます。

 

See the Pen
CSS border (using an SVG)
by Louis Hoebregts (@Mamboleoo)
on CodePen.

 

Fascinating Transitions:興味を惹く動きと色の変化

ボーダー柄のボタンをある色から別の色へ変化させられます。それだけでもユーザーの注意を引くことができますが、さらにいろいろと興味深い工夫が施され、このコレクションは、楽しさの要素を追加し、目立たせるのにふさわしいものです。

 

See the Pen
CSS Border transitions
by Giana (@giana)
on CodePen.

 

Attention Getter:CTAボタン向け

滑らかなアニメーションのボーダーを提供しています。こちらの本当にいいところは、見る人を引き付けるということですが、安っぽいややりすぎ感のあるものではありません。すぐれた「行動を促す」ボタンが作成できます。

 

See the Pen
Animated CSS Gradient Border
by Mike Schultz (@mike-schultz)
on CodePen.

 

Adding Function to Forms:フォーム向け

入力フォームの滑らかなアニメーションは、細やかで微細なインタラクションを実現します。ユーザーが入力の際に思った場所にクリックできて入力しやすいかどうかは気になるところです。こういうことは小さなことかもしれませんが、エクスペリエンスはずっと良くなります。ボーナスとして、背景効果とラベル効果もあります。

 

See the Pen
Awesome input focus effects
by Takuma.I (@Takumari85)
on CodePen.

 

Bordering on Groovy:流れのある動きが特徴

くっきりと表示されたテキストは、デザインに強力な効果を加えます。こちらの液体のような流れのあるアニメーションで説得力のある効果を追加するとさらに良いでしょう。非常にかっこいいなロゴやヘッダーテキストにもなります。

 

See the Pen
CSS-only shimmering neon text
by Giana (@giana)
on CodePen.

 

Cool Clippings:クリップパス効果

クリップパス効果は、近年Webに登場したプリントデザインの中で好まれているものです。デザイン要素が透明になり、背景がそこから透けて表示されるようになります。この例では、コンテナの枠線とテキストの両方に適用されていることがわかります。これでユニークな外観を作り出すことができます。

 

See the Pen
-webkit-background-clip:text CSS effect
by Jintos (@Jintos)
on CodePen.

Elegant Link Hovering:テキストベースのナビゲーション向け

プレーンで昔ながらのリンク(spanやこの場合はHTML )をドレスアップさせる方法の例がこちらです。ホバー効果のリストを選択でき、それぞれ見事なアニメーションを追加することができます。これは、テキストベースのナビゲーションに上品さを簡単に加えます。

 

See the Pen
Sass mixin library for text hover
by Antonija Šimić (@tonkec)
on CodePen.

A Hand Drawn Look:手書き風

ほとんどの場合、枠線は非常にきちんとしてプロフェッショナルな雰囲気を演出するものですが、もう少し手作り感のあるものにしたい場合はどうでしょうか?このコレクションでは、CSS border-radiusでちょっとした曲線を追加するだけで、ボタンに素朴な印象を与えることができます。

 

See the Pen
Imperfect Buttons
by Tiffany Rayside (@tmrDevelops)
on CodePen.

結論

ボーダーのスタイリングに関していうならば、上記にあげたものはWebデザイナーが基本レベル程度で甘んじている必要がないことを証明しています。現在、ボーダーは色の効果だけではなく、動きも追加できます。このような効果は要素が画面に表示される際に、ユーザーが直面するそのものに追加できるのです。

いずれにせよ、ボーダー効果はユニークでありながら魅力もあらゆるWebサイトに加えてくれるのです。

おすすめ新着記事

おすすめタグ

このページのTOPへ