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.
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サイトに加えてくれるのです。
おすすめ新着記事
おすすめタグ
