CSS3使用例 - 帆船堂電算小屋

忘れられたWiki
COMHUETTE - 帆船堂電算STUDIO CODEX
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== CSS3使用例 ======
CSS3(Cascading Style Sheets, level 3)の使用例です。

===== 背景に複数の画像を指定する =====
[background]に複数の画像を指定します。\\ 
<code>
background-image:
  url("bg03.png"),
  url("bg02.png"),
  url("bg01.jpg");
</code>
<html>
<iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-background01.html"></iframe>
</html>
\\
画像ごとに表示位置を指定します。\\ 
<code>
background:
  280px bottom no-repeat url("bg03.png"),
  0 center no-repeat url("bg02.png"),
  url("bg01.jpg");
</code>
<html>
<iframe style="border: none; width: 560px; height: 180px;" src="http://hansendo.com/hd-static/css3/css3-background02.html"></iframe>
</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の機能で背景を描画する =====
複数の[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}}
トレース:
Search

Navigation

Print/export

Tools

QR Code
