前から気になってたこのサイトの、”Blog”とかのタイトル部分、上のコピックの写真とともに彩度が高くて区切りがはっきりしない部分、ようやく手を入れた。

コピックの写真と彩度を変えたりしたけどイマイチパッとせず。フラットすぎるのがダメかと思い、タイトルの上下に影を入れて違うレイヤーに感じるように変更。

あとはその影による立体感をはっきりさせるために、タイトルの上には暗い、タイトルの下には明るい、1pxのラインを入れて厚みを出した。

そのラインも単にborderでつけるのではなく、after要素で1pxの半透明を重ねて下地の色を活かすようにした。

これで印象はあまり変えずに、コピックの写真とタイトル部分、コメントやフッターの部分の意味づけがはっきりできた、と思う。