きったんの頭

HOME > 開発室

CSS3

Column, Box Shadow, Radius

padding:3px;
border: 1px solid gray;
-moz-column-width: 14em;
-webkit-column-width: 14em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
-moz-column-rule: 1px dotted gray;
-webkit-column-rule: 1px dotted gray;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-box-shadow: 0px 0px 7px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 7px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.3);

Shadow

text-shadow: 2px 2px 1px rgba(0,0,0,0.4);

rotate

rotate(0deg)

rotate(30deg)

gradient

background:#39f;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, .5), rgba(255, 255, 255, .8));
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, .2)), color-stop(50%, rgba(255, 255, 255, .5)), color-stop(90%, rgba(255, 255, 255, .8)));
background: -moz-linear-gradient(left, rgba(255, 0, 0, 0.7), rgba(255, 165, 0, 0.7), rgba(255, 255, 0, 0.7), rgba(0, 128, 0, 0.7), rgba(0, 0, 255, 0.7), rgba(75, 0, 130, 0.7), rgba(238, 130, 238, 0.7)); background: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 0, 0, 0.7)), color-stop(0.14, rgba(255, 165, 0, 0.7)), color-stop(0.28, rgba(255, 255, 0, 0.7)), color-stop(0.43, rgba(0, 128, 0, 0.7)), color-stop(0.57, rgba(0, 0, 255, 0.7)), color-stop(0.71, rgba(75, 0, 130, 0.7)), color-stop(0.86, rgba(238, 130, 238, 0.7)));

font-family

serif  ひげつき文字で、縦横線に強弱がある。明朝体系統のフォント。
sans-serif  ひげのない文字で、線に強弱がなく、跳ね払いがない。ゴシック体系統のフォント。
cursive  筆記体。続け書き風と手書き風のフォント。
fantasy  装飾が主となるフォント。絵文字も含む。
monospace  固定幅フォントで、タイプライター体とも呼ばれる。

リンク

CSSツール