最近の傾向としては見出し背景にグラデーション排除の方向にある
それでもグラデーションを実現したい人のために
CSSを書きます。
以下のコードを下のタグの貼り付け方に沿って貼り付けます。
※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。（キーボードのF5ボタンを押す）
<style type="text/css">
#content_area h1{
font-weight: bold;
font-size: 28px;
padding: 0.7em;
background: #f0f0f0;
background: linear-gradient(#fff 0%,#f0f0f0 100%);
border: 1px solid #ccc;
line-height:1.5;
margin:0 0 20px;
color:#333;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
上記スタイルシートの説明
/* 文字色を指定 */
color:#333;
/* 文字の太さを指定 */
font-weight: bold;
/* 文字の大きさ指定 */
font-size: 28px;
/* 内側の余白を指定 */
padding: 0.7em;
/* グラデーションに対応していないブラウザのために背景を指定 */
background: #f0f0f0;
/* グラデーションを指定 白(#fff) から薄いグレー(#f0f0f0)に */
background: linear-gradient(#fff 0%,#f0f0f0 100%);
/* 枠線を指定 */
border: 1px solid #ccc;
/* 改行した時の行間を指定 */
line-height:1.5;
バリエーション
アクアっぽいデザインにしてみた
【解説】
/* グラデーションを４色で指定 */
background: linear-gradient(#FFF 0%,#F0F0F0 50%,#E7E7E7 50%,#F0F0F0 100%);
/* 追加 文字に白の影を追加して凹んだ感じにすることで背景の立体感を強調 */
text-shadow: 1px 1px 0 #FFF;
上記デザインで背景を濃くして文字を白抜きに変えてみる
【解説】
/* 爽やかな青系の背景をグラデーションで指定 */
background: linear-gradient(#CDF 0%,#39F 50%,#07F 50%,#39F 100%);
/* 枠色も青系に変更 */
border: 1px solid #03C;
/* 文字色を白に */
color:#FFF;
/* 文字の左上に影を追加して凹みを表現 */
text-shadow:-2px -2px 0 rgba(0,0,0,0.3);
さらに枠線を工夫
【解説】
/* 枠線に少し手を加えてみた */
border: 4px #4AF groove;
グラデーションだけでも色々なバリエーションが楽しめますね。
どんな色がいいかな？って悩んだ時には、原色大辞典がオススメです。
⇒ 原色大辞典のページ
線種の参考資料
以下の線種の指定方法 ⇒ border:10px #b0c4de 線種指定;
solid
実線
double
二重の線
groove
谷型の線
ridge
山型の線
inset
凹型の線
outset
凸型の線
dotted
点線
dashed
破線
コメントをお書きください