CSS3使用例

CSS3(Cascading Style Sheets, level 3)の使用例です。

背景に複数の画像を指定する

[background]に複数の画像を指定します。

background-image:
  url("bg03.png"),
  url("bg02.png"),
  url("bg01.jpg");

画像ごとに表示位置を指定します。

background:
  280px bottom no-repeat url("bg03.png"),
  0 center no-repeat url("bg02.png"),
  url("bg01.jpg");

指定した色を透過させる

rgba(赤, 緑, 青, 透明度)を使って色指定を行うことで、指定した色に透明度をもたせる事ができます。

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%透過*/

hsla(色相, 彩度, 明度, 透明度)を使うこともできます。

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%透過*/

CSSの機能で背景を描画する

複数の[linear-gradient]を指定して、CSSのみで背景を描画します。
~~でも、今日はもう眠たいので今度書きます。~~ linear-gradient()を指定すると背景にグラデーションをかけることができます。

background-image: linear-gradient(top, black, transparent); /*上から、黒→透明のグラデーションを指定*/

複数のグラデーションを指定することができます。

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まで影っぽい色のグラデーションで描画*/

repeating-linear-gradient()は、指定したグラデーションを繰り返し表示することができます。

background-image: repeating-linear-gradient(top, #ccc, #ccc 1px, #999 2px, #999 8px, #333 9px, rgba(0, 0, 0, 0.8) 10px, transparent 24px);

これらを応用することで、グラデーションを多重に指定した背景パターンを描画できます。

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);

参考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¹⁾サービスを使うことで、オンライン上にあるフォントを指定することもできます。

@import url(http://fonts.googleapis.com/css?family=Trade+Winds);  /*Google Webfonts で指定されたコード*/
font-family: 'Trade Winds', cursive;

これに、text-shadowを組み合わせてみます。

@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);

目次