| |
| css3使用例 [2012/02/04 18:32] – 作成 hansendo | css3使用例 [2012/02/05 12:34] (現在) – hansendo |
|---|
| |
| ===== 背景に複数の画像を指定する ===== | ===== 背景に複数の画像を指定する ===== |
| ==== 其の１ ==== | |
| [background]に複数の画像を指定します。\\ | [background]に複数の画像を指定します。\\ |
| <code> | <code> |
| </code> | </code> |
| <html> | <html> |
| <iframe style="width: 560px; height: 256px;" src="http://hansendo.com/hd-static/css3/css3-background01.html"></iframe> | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-background01.html"></iframe> |
| </html> | </html> |
| ==== 其の２ ==== | \\ |
| 画像ごとに表示位置を指定します。\\ | 画像ごとに表示位置を指定します。\\ |
| <code> | <code> |
| </code> | </code> |
| <html> | <html> |
| <iframe style="font-size: small; width: 560px; height: 256px;" src="http://hansendo.com/hd-static/css3/css3-background02.html"></iframe> | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-background02.html"></iframe> |
| </html> | </html> |
| | |
| | ===== 指定した色を透過させる ===== |
| | rgba(赤, 緑, 青, 透明度)を使って色指定を行うことで、指定した色に透明度をもたせる事ができます。\\ |
| | <code> |
| | color: rgba(0, 0, 0, 0.5); /*黒色のテキストを50%透過*/ |
| | border: 10px solid rgba(0, 0, 128, 0.2); /*青色の枠線を20%透過*/ |
| | background-color: rgba(255, 255, 255, 0.5); /*白色の背景を50%透過*/ |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-rgba01.html"></iframe> |
| | </html> |
| | \\ |
| | hsla(色相, 彩度, 明度, 透明度)を使うこともできます。\\ |
| | <code> |
| | color: hsla(0, 0%, 0%, 0.5); /*黒色のテキストを50%透過*/ |
| | border: 10px solid hsla(240, 100%, 24%, 0.2); /*青色の枠線を20%透過*/ |
| | background-color: hsla(0, 0%, 100%, 0.5); /*白色の背景を50%透過*/ |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-rgba02.html"></iframe> |
| | </html> |
| | |
| ===== CSSの機能で背景を描画する ===== | ===== CSSの機能で背景を描画する ===== |
| 複数の[linear-gradient]を指定して、CSSのみで背景を描画します。\\ | 複数の[linear-gradient]を指定して、CSSのみで背景を描画します。\\ |
| でも、今日はもう眠たいので今度書きます。 | <del>でも、今日はもう眠たいので今度書きます。</del> |
| | linear-gradient()を指定すると背景にグラデーションをかけることができます。\\ |
| | <code> |
| | background-image: linear-gradient(top, black, transparent); /*上から、黒→透明のグラデーションを指定*/ |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-gradient01.html"></iframe> |
| | </html> |
| | \\ |
| | 複数のグラデーションを指定することができます。\\ |
| | <code> |
| | background-image: linear-gradient( |
| | top, |
| | #ccc, #ccc 1px, /*上から1px分#cccで描画*/ |
| | #999 2px, #999 8px, /*2pxから8pxまで#999で描画*/ |
| | #333 9px, rgba(0, 0, 0, 0.8) 10px, /*9pxから10pxまで#333っぽい色で描画*/ |
| | transparent 24px); /*10pxから24pxまで影っぽい色のグラデーションで描画*/ |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-gradient02.html"></iframe> |
| | </html> |
| | \\ |
| | repeating-linear-gradient()は、指定したグラデーションを繰り返し表示することができます。\\ |
| | <code> |
| | background-image: repeating-linear-gradient(top, #ccc, #ccc 1px, #999 2px, #999 8px, #333 9px, rgba(0, 0, 0, 0.8) 10px, transparent 24px); |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-gradient03.html"></iframe> |
| | </html> |
| | \\ |
| | これらを応用することで、グラデーションを多重に指定した背景パターンを描画できます。\\ |
| | <code> |
| | background-image: |
| | repeating-linear-gradient(top, #ccc, #ccc 1px, #999 2px, #999 8px, #333 9px, rgba(0, 0, 0, 0.8) 10px, transparent 24px), |
| | /*↑のグラデーション90度回転したものが↓*/ |
| | repeating-linear-gradient(0deg, #ccc, #ccc 1px, #999 2px, #999 8px, #333 9px, rgba(0, 0, 0, 0.8) 10px, transparent 24px); |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-gradient04.html"></iframe> |
| | </html> |
| | \\ |
| | ==== 参考URL ==== |
| | http://lea.verou.me/css3patterns/ \\ |
| | http://www.htmq.com/css3/linear-gradient.shtml \\ |
| | http://dev.w3.org/csswg/css3-images/#linear-gradients \\ |
| | http://gradients.glrzad.com/ \\ |
| | |
| | ===== フォントを指定する ===== |
| | CSS3ではwebfontという機能を使って独自のフォントを指定して表示することができるようになりました。\\ |
| | GoogleWebfonts((http://www.google.com/webfonts#HomePlace:home))サービスを使うことで、オンライン上にあるフォントを指定することもできます。\\ |
| | <code> |
| | @import url(http://fonts.googleapis.com/css?family=Trade+Winds); /*Google Webfonts で指定されたコード*/ |
| | font-family: 'Trade Winds', cursive; |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-webfont01.html"></iframe> |
| | </html> |
| | \\ |
| | これに、text-shadowを組み合わせてみます。\\ |
| | <code> |
| | @import url(http://fonts.googleapis.com/css?family=Trade+Winds); /*Google Webfonts で指定されたコード*/ |
| | font-family: 'Trade Winds', cursive; |
| | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); /*text-shadowを使って、テキストの右斜め下にハイライトを描画します*/ |
| | color: rgba(64, 0, 0, 0.7); |
| | </code> |
| | <html> |
| | <iframe style="border: none; width: 800px; height: 200px;" src="http://hansendo.com/hd-static/css3/css3-webfont02.html"></iframe> |
| | </html> |
| ===== 関連タグ ===== | ===== 関連タグ ===== |
| {{tag>CSS}} | {{tag>CSS}} |
