[CSS]CSS 3のサンプルとブラウザでの見え方

CSS3対応ブラウザも増えてきたので、CSS3.infoのエントリー「CSS3 Preview」のサンプルが、どのようにブラウザで表示されるかを試してみました。

使用したブラウザは、Firefox 3beta5, Safari 3.1, Opera 9.5betaです。
各プロパティの下の記載は、キャプチャを撮ったブラウザで、対応ブラウザの全てではありません。

Border

border-colorのキャプチャ

border-color
Fx 3

border-imageのキャプチャ

border-image
Safari 3.1

border-radiusのキャプチャ

border-radius
Fx 3

box-shadowのキャプチャ

box-shadow
Safari 3.1

Background

background-origin and background-clipのキャプチャ

background-origin and background-clip
Safari 3.1

background-sizeのキャプチャ

background-size
Safari 3.1

multiple backgroundsのキャプチャ

multiple backgrounds
Safari 3.1

Color

HSL colorsのキャプチャ

HSL colors
Fx 3

HSLA colorsのキャプチャ

HSLA colors
Fx 3

opacityのキャプチャ

opacity
Safari 3.1

RGBA colorsのキャプチャ

RGBA colors
Fx 3

Text effects

text-shadowのキャプチャ

text-shadow
Safari 3.1

text-overflowのキャプチャ

text-overflow
Fx 3

word-wrapのキャプチャ

word-wrap
Safari 3.1

User-interface

box-sizingのキャプチャ

box-sizing
Fx 3

resizeのキャプチャ

resize
Safari 3.1

outlineのキャプチャ

outline
Fx 3

Selectors

attribute selectorsのキャプチャ

attribute selectors
Safari 3.1

Other modules

media queriesのキャプチャ

media queries
Safari 3.1

multi-column layoutのキャプチャ

multi-column layout
Fx 2

speachのキャプチャ

speach
Op 9.5

sponsors

top of page

©2018 coliss