【css】背景と文字を反転させる

シンプル、だけど洗練されたテイストにしてほしい…
そんな要望に応えられそうなcssの表現だと思います。

サンプル

See the Pen txt-bg- Invert by AkiraSatou (@SatoWeb) on CodePen.light

上部は直線的に、下部は斜めに左半分と右半分に分けてみました。

フクスリーンでトップ画面に表示するとインパクトを与えられますし、左右それぞれにリンクを設定して、マウスオーバーをするとアコーディオンメニューのように開閉して、コンテンツが表示されたりしたら格好よさそうですね。
今度つくって詳細を載せたいと思っています。

文字部分はletter-specingなどを使用して、間隔を整えてもよいかと思います。

色や角度を変えて、各々のデザインを構成してみてください。

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。