プログラミング

プログラミング

ボーダーアニメーション効果を実装できる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
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,562 views

読了時間 : 約3分12秒

ボーダー(枠線)をサイトに入れることは、画像やコンテナ要素への仕上げのようなささいなディテールで飾り程度とみなされ注目されることもありませんでした。ところが、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

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

 

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.

Bordering on Success

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

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

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ

このページのTOPへ