水玉の応用編
どんな用途に使えるのかなぁ・・・？？（笑）わからないけど掲載！！
背景に星模様をつける
CSSを書きます。
以下のコードを下のタグの貼り付け方に沿って貼り付けます。
※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。（キーボードのF5ボタンを押す）
<style type="text/css">
#content_area h1{
padding: 20px 20px;
border: none;
box-sizing: border-box;
background-image: radial-gradient(circle, #106 85%,#FF6 95%);
background-size: 40px 40px;
color: #fff;
text-shadow: 0 0 5px #000;
background-position: -20px -20px;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
※見出し中に設定したい時は、h1をh2に、見出し小に設定したい時は、h1をh3にそれぞれ変更して保存すれば実現できます。バーのカラーは、ホームページで利用しているカンパニーカラーにすると配色ミスは避けられます。
バリエーション
スペード、ハート、クラブなども作れればいいけど・・・
背景の星模様をシャープにするとダイヤ？
<style type="text/css">
#content_area h1{
padding: 20px 20px;
border: none;
box-sizing: border-box;
background-image: radial-gradient(circle, #FFF 85%,#F00 85%);
background-size: 40px 40px;
color: #fff;
text-shadow: 0 0 5px #000;
background-position: -20px -20px;
}
</style>
コメントをお書きください