プログラミング

プログラミング

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

278 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サイトに加えてくれるのです。

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ

このページのTOPへ