節約生活日記

フリーエンジニアの、仕事&子育て&節約生活などを綴っています!

 TOPへ

節約生活 画像を使わずオシャレなサイトを作る、オススメCSSコード2つ

2013.12.11 Wednesday

HTML5とCSS3を駆使すれば、かなりデザイン性と高いサイトを作ることが可能になった。

今日は、画像を使わずオシャレなサイトを作る事ができる、覚えておいて損はないCSSコード2つを紹介する。

’愀平Г離哀薀如璽轡腑
bodyやbox要素の背景色として、グラデーションを表現するコード。ちょっとした見出しの背景色として画像を使わずオシャレにレイアウトできる。

サンプルコード:上から下、緑から青↓


{
background: #009900; /* デフォルト */
background:-moz-linear-gradient(top, #009900, #000099); /* Safari,Chrome */
background:-webkit-gradient(linear, left top, left bottom, from(#009900), to(#000099)); /* Firefox */
background: linear-gradient(to bottom, #009900, #000099); /* ie */
}

すべてのブラウザでグラデーションを表現するには、4行すべて書かなくてはいけない。
1行目が、グラデーションを表現出来ないブラウザ用の単色コード。
2行目、Safari,Chrome 用。
3行目、Firefox 用。
4行目、IE 用。(古いバージョンでは表現できない。)


.謄ストのシャドウ
文字に影をつけるコード。一見バナー風にデザインすることができる。

サンプルコード:テキスト緑、影グレー

テキストのシャドウ

{
color: #009900; 
text-shadow: 2px 2px 3px #333333;
}

1行目テキストのカラー。
2行目シャドウ、先頭の要素が上下のずれ、次に左右のずれ、三番目がぼかしの強さ、最後に影のカラーを指定します。

サンプルコード:全方向に影、ぼかし強め

テキストのシャドウ

{
color: #333399; 
text-shadow:
2px 2px 5px #dc143c,
-2px 2px 5px #dc143c,
2px -2px 5px #dc143c,
-2px -2px 5px #dc143c;
}

カンマで区切って、異なる方向への影を同時に記述することもできます。上記サンプルコードでは全方向へ均等に影を表現しています。


以上!覚えておくとサイトを少しだけ華やかに表現できるCSSコードでした!



コメント
コメントする









この記事のトラックバックURL
トラックバック機能は終了しました。
トラックバック

<< ひた向きに質の高さを追及する国民性は文化 ←前|次→ことわざ・慣用句四択クイズ!リリース >>


人気の節約コンテンツ by ミャア先生の節約マニュアル
生活の知恵節約生活の知恵!
簡単節約術節約術で節約!!
買い物の節約買い物で節約!!
副収入お手軽副収入!!
節約リフォームリフォームで節約!!
一人暮らし一人暮らしの節約!!
節約グッズグッズで節約!!
水道代の節約水道代の節約術!
電気代の節約電気代の節約術!
ガス代の節約ガス代の節約術!
生活の知恵電話代の節約術!
生活の知恵諸経費の節約術!
生活の知恵食費の節約術!
生活の知恵冷暖房の節約術!
生活の知恵自動車の節約術!
節約生活プロフィール

管理人:ミャア先生

このブログは、節約生活の色々な出来事を日記で紹介するはずでしたが・・・最近は単なる管理人ブログと化しています。タイトルに釣られてやって来た人は、なるべく過去の記事を読んでみてください(笑)たまに真面目な記事も書いてます。




節約生活最近のコメント

節約生活最近のトラックバック