ボーダー(枠線)をサイトに入れることは、画像やコンテナ要素への仕上げのようなささいなディテールで飾り程度とみなされ注目されることもありませんでした。ところが、CSSが進化するにつれて、さらなる可能性が見えてきました。
今までよりも彩り豊かで特殊な効果のものが増え、ボーダーを活用すれば注目すべき情報へ自然に注意を引くことができます。また、ユーザーエンゲージメントとマイクロインタラクションでも活躍します。というわけでCSS(やJavaScript)が提供する優れた機能でパワーアップしたボーダーの例を見ていきましょう。
SVG Border Magic
SVG画像は、さまざまな画面サイズで動作させられ、クールなエフェクトを加えるのにとてもいい秘密兵器となります。コンテナのサイズと形状に自動的に適応するマルチカラーのアニメーションボーダーが可能です。要素のサイズを大きくしたり小さくしたりしても、ボーダーは維持されます。
See the Pen
CSS border (using an SVG) by Louis Hoebregts (@Mamboleoo)
on CodePen.
Fascinating Transitions
ボーダー柄のボタンをある色から別の色へ変化させられま
コメント