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」タグなどの他の要素にも使えます。
コメント