CSS3 を試してみる

Box Model

ページ全体で高位のレベルのレイアウトのために使用されるっぽい。コンテンツ部分の段組みとか。

参考サイト

builder by ZDNet Japan

HTML

CSS

.box-model{ display:-moz-box; display:-webkit-box; } .box-model .box-0,.box-model .box-1,.box-model .box-2{ margin:0 10px 0 0; padding:0 10px; width: 300px; border:1px solid #000000; } .box-model .box-0 p,.box-model .box-1 p,.box-model .box-2 p{ padding-bottom:20px; } .box-model .box-0{ width:250px;} .box-model .box-1{ width: 300px;} .box-model .box-2{ width: 200px;}

Multi Column

文字組のレイアウトのために使用されるっぽい。高さの基準がわからん。

参考サイト : builder by ZDNet Japan

HTML

CSS

.multi-column{ -column-count:3; kit-column-count:3; mn-count: 3; h:800px; } .multi-column div{ width:220px; }

Border Radius

経線の角丸。

参考サイト

builder by ZDNet Japan

HTML

CSS

#border-radius div{ margin:0 20px 0 0; padding:0 20px 20px 20px; } #border-radius div.radius-0{ -moz-border-radius-topleft:10px; -moz-border-radius-topright:6px; -moz-border-radius-bottomright:14px; -moz-border-radius-bottomleft:30px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:6px; -webkit-border-bottom-right-radius:14px; -webkit-border-bottom-left-radius:30px; border:6px solid #cc0000; } #border-radius div.radius-1{ -moz-border-radius:10px; -webkit-border-radius:10px; border:6px dotted #336633; } #border-radius div.radius-2{ -moz-border-radius:20px; -webkit-border-radius:20px; border:2px dashed #339999; } #border-radius div.radius-3{ background-color:#adea87; -moz-border-radius:22px; -webkit-border-radius:22px; border:1px solid #adea87; }

Gradient

参考サイト

-moz-radial-gradient

Introducing CSS Gradients

サイト

CSS3 Gradient Generator

HTML

• 背景がグラデだよ
• ここも背景がグラデだよ

CSS

.gradient-list li:nth-child(1){ background:-webkit-gradient(radial, 0 0, 102, 500 10, 90, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)); background:-moz-radial-gradient(center 45deg, circle farthest-side, #FFAAAA 50%, #FFAA00 80%); } .gradient-list li:nth-child(2){ background:-webkit-gradient(linear, left top, left bottom, from(#8DD3F5), to(#5998E2)); background: -moz-linear-gradient(top, #8DD3F5, #7BBFEB 70%, #5998E2); }

Selector

参考サイト

セレクタ 2001年11月13日のW3Cの勧告候補

builder by ZDNet Japan

Attribute

input type=“submit” にのみStyleを定義。

HTML

CSS

input[type="submit"]{ background:#000000; color:#ffffff; }

nth-child

HTML

• List0
• List1
• List2
• List3
• List4
• List5
• List6

CSS

/*奇数*/ #selector .has-child li:nth-child(odd){ background-color:lime; } /*偶数*/ #selector .has-child li:nth-child(even){ background-color:green; } /*指定*/ #selector .has-child li:nth-child(2){ background-color:red; }

Text Shadow

参考サイト

builder by ZDNet Japan

HTML

この道はいつか来た道 ああ そうだよ あかしやの花が咲いてる

CSS

#text-shadow{ text-shadow: 2px 2px 1px pink;/*横方向のオフセット 縦方向のオフセット ぼかしの半径 影の色*/ }

Text overflow

HTML

はみだした文字を省略するよはみだした文字を省略するよ

はみだした文字を切るよはみだした文字を切るよはみだした文字を切るよ

CSS

.ellipsis, .clip{ width:15em; overflow: hidden; white-space: nowrap; } /*省略*/ .ellipsis{ text-overflow: ellipsis; } /*非表示*/ .clip{ text-overflow: clip; }

Transition

.transition-bg{ background-color:#CCC; padding:20px; -webkit-transition-property:background-color,color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease-in-out; -moz-transition-property:background-color,color; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease-in-out; } .transition-bg:hover{ background-color:red; color:white; } .transition-rotate{ padding:20px; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; border:2px solid #CCC; } .transition-rotate:hover{ -webkit-transform:rotate(180deg) scale(1.5); -moz-transform:rotate(180deg) scale(1.5); } .transition-expanding{ width:150px; -webkit-transition:all 0.6s ease-out; -moz-transition:all 0.6s ease-out; } .transition-expanding:focus{ width:200px; height:200px; -webkit-transition:all 0.6s ease-out; }