見出しデザイン②
タイトルロゴ風CS
S
下にサブタイとか入れても良いかも
中級者向けにはなりますが簡単に説明します。
初心者向けの詳しい説明は後日書きたいと思います。
①擬似クラス「::first-letter」を使って文字列の1文字目を大きくし、少し下げる。
※1番右の文字は、横並びにしてあるだけの別のテキストブロックで、実は1文字目。
②全体を「transform:perspective」プロパティで縦回転させ、パースをつける。
以上です。
ブロックを色分けしつつ、文字を□で表すと下のような感じです。
□□□□□□□□□
□
□□□□□□□□□□□□□□□□□□
黄色がグループの枠です。
青と赤は別のテキストブロックで、横並びになっています。
緑のサブタイが中に入ってるように見えますが、実は違います。
黄色グループの「margin-bottom」をマイナスにして、通常のテキストブロックを食い込ませているだけです。
カンタン!