FBMLのデモ

各要素がどうなっているのかな

div

h1

h2

h3

h4

h5
h6

pです。pです。pです。pです。p > emです。pです。pです。p > strongです。pです。pです。p > aです。pです。pです。pです。

  1. ol > li
  2. ol > li
  3. ol > li
dt
dd
dt
dd
thead > th thead > th thead > th
tbody > th td td
tbody > th td td

blockquote > p

CSS3は使えるかな

border-radius

border-radiusを指定してみた。

#mbrs_border-radius p {
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #ccc;
}

RGBa

RGBaを指定してみた。

#mbrs_RGBa p {
	padding: 5px;
	background: rgba(0,0,0,.5);
}

opacity

opacityを指定してみた。

#mbrs_opacity p {
	padding: 5px;
	background: #000;
	color: #fff;
	opacity: .5;
}

text-shadow

text-shadowを指定してみた。

#mbrs_text-shadow p {
	text-shadow: 0 0 3px #b33;
}

box-shadow

box-shadowを指定してみた。

#mbrs_box-shadow p {
	background: #ccc;
	-webkit-box-shadow: 2px 2px 4px #000;
	-moz-box-shadow: 2px 2px 4px #000;
	box-shadow: 2px 2px 4px #000;
}

gradient

gradientを指定してみた。

#mbrs_gradient p {
	padding: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#c90), to(#c30));
	background: -moz-linear-gradient(top, #c90, #c30);
	color: #fff;
}

transform

transformを指定してみた。

#mbrs_transform p {
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

transition

transitionを指定してみた。

#mbrs_transition p {
	padding: 5px;
	background: #000;
	color: #fff;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
#mbrs_transition p:hover {
	padding: 20px;
	background: #b33;
}

Web Fonts

Web Fontsを指定してみた。

@font-face {
	font-family: 'MT_TARE_P';
	src: url('http://maboroshi.biz/font/MT_TARE_P.eot');
	src: local('hide from IE'), url('http://maboroshi.biz/font/MT_TARE_P.ttf') format('truetype');
}
#mbrs_Web_Fonts p {
	font-family: MT_TARE_P;
}

他のドメインから背景画像を埋め込んでみる

セレクタ

:target のためのページ内リンク

class="mbrs_1"

class="mbrs_2"

class="mbrs_3"

class="maboroshi_1"

class="maboroshi_2"

class="maboroshi_3"

:taget のとび先

#mbrs_selector ul li:nth-child(odd) {
	color: #b33;
	font-weight: bold;
}
#mbrs_selector p:target {
	padding: 5px;
	background: #b33;
	color: #fff;
}
#mbrs_selector p[class^="mbrs"] {
	font-style: italic;
}
#mbrs_selector p[class$="1"] {
	font-weight: bold;
}
#mbrs_selector ul li:last-of-type {
	color: #33b;
	font-weight: bold;
}