広告

CSS3で見出しなどのブロック要素をカスタマイズしてみた

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

広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする