CSS3になって画像を使わなくてもいろんな効果をコードで出来るようになりました。
ここでは記事の見出しをカスタマイズしてみました。
コピペで使えるコードを掲載していますので、ご自由にお使いください。
見出しの文字やブロックの背景をカスタマイズ
見出しのカスタマイズの例ですが、見出しに限らずブロック要素にも使えます。
見出しの背景にグラデーションをつける
背景をグラデーションにしました。
CSS3以前は画像を背景にしましたが、CSS3では画像を使わずにグラデーションをつけることができます。
コードは以下ですが色の好みなど適宜変更してください。
h2.mizuiro{ margin-top: 20px; padding: 10px; background: linear-gradient(90deg, #77dfef, #fff); width: 100%; height: 2em; line-height: 2em; position: auto; font-size: 21px; }
右に向かって薄くなるグラデーションですが、「90deg」の数字を変えると方向が変わります。
見出しの文字に影を付け加える
見出しの文字に影をつける
文字に影を付けるとより見出しが見やすくなります。
CSS3だと文字の装飾もいろいろできるようです。
コードは以下ですが、背景のグラデーションに文字の影を加えています。
h2.text-shadow{ margin-top: 20px; padding: 10px; background: linear-gradient(90deg, #77dfef, #fff); width: 100%; height: 2em; line-height: 2em; position: auto; font-size: 21px; text-shadow: 2px 2px #fff; }
影は白にしていますが背景色によって好みの色に変えて下さい。
見出しの枠に影をつける
見出しはブロック要素ですので、ブロックに影をつけることが出来ます。
コードは以下ですが、影の色は濃いグレー、影の大きさは2PXにしています。
影を大きくするには数値を大きくして下さい。
h2.box-shadow{ margin-top: 20px; padding: 10px; background: linear-gradient(90deg, #77dfef, #fff); width: 100%; height: 2em; line-height: 2em; position: auto; font-size: 21px; box-shadow: 2px 2px #333; }
見出しの文字の影を長くしてインパクトを大きくする
見出しの影を大きくするとおもしろい効果を出すことができます。
コードは以下ですが、「10px 10px #fff」以降も増やしていくと影はどんどん大きくなります。
h2.large-shadow{ margin-top: 20px; padding: 10px; background: linear-gradient(90deg, #77dfef, #fff); width: 100%; height: 2em; line-height: 2em; position: auto; font-size: 21px; text-shadow: 0px 0px #fff, 1px 1px #fff, 2px 2px #fff, 3px 3px #fff, 4px 4px #fff, 5px 5px #fff, 6px 6px #fff, 7px 7px #fff, 8px 8px #fff, 9px 9px #fff, 10px 10px #fff; }
見出しを半透明にする
見出しの文字と背景を半透明にしてみました。
おもしろい効果が生まれます。
透明度は「opacity」の数値を変えることでいろいろ変化できます。
コードは以下です。
h2.opacity{ margin-top: 20px; padding: 10px; background: linear-gradient(90deg, #77dfef, #fff); width: 100%; height: 2em; line-height: 2em; position: auto; font-size: 21px; opacity: 0.3; }
例示したコードはすべて「h2」にしていますが、適宜hタグに適用して下さい。
又、見出しタグだけでなく「p」タグなどの他の要素にも使えます。
コメント