グラフィックデザインが出来ないのでピクセル密度が高いデバイスへの対応やパフォーマンスの面も考慮して、装飾をなるべくCSSで表現できる範囲で考えることが多いです。CSSも表現力が高くなっていますので、CSSだけで〜〜書いた、というような例を見ていると、割と再現できなさそうなことはないのですが、そこはまあ現実的に無理のない範囲でシンプルな図形を組み合わせるのみにとどめます。
個人的に良いデザイナーの方は単純な図形、丸や三角、正方形の組み合わせ方や使い方が上手いと思いますが、その中でも特に線（ボーダー）の使い方が上手いなあと。引き過ぎると窮屈な感じが出てしまうし、グリッドがいい感じで引けてない上にボーダーが適切に使えてないと、整頓されておらずダラダラした画面になってしまうし。
線は領域の区切りを表現したり、要素を囲んで浮き出させたり、凹ませたり。テキストの下に引いて強調したりと多様な使い方ができるなあ、といまさらながらに気づきましてリンクの下線にしか使ってなかったこのサイトのデザインにもボーダーを取り入れてみました。
それが冒頭のグラデーションが掛かった線で、記事リストの記事タイトル下に使っています。borderではグラデーションが表現できないので擬似要素を使っています。グラーデーションにするとコントラストをそこまで落とさずに柔らかい感じにできて良いですし、アニメーションも映えるので気に入っています。
- 実装例
- See the Pen border gradient by Soichi Masuda (@masuP9) on CodePen.