9bicMag™

自分用のメモです。ナカトミツヨシです。

CSS3って、結局何をどう書いたら、どうなるんだっけ？っていうメモを書いておこうと思います。まだ現段階ではCSS3は策定中なので、各ブラウザごとのベンダープレフィックスも一緒に記述しておきますー。あ、Opera(-o-) と IE(-ms-) はベンダープレフィックスに対応していないようなので、今回は割愛させていただきました。

グラデーション（gradient）

background: -moz-linear-gradient(top, #dff277, #7dad34);　/* Firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#dff277), to(#7dad34)); 　/* Safari,Google Chrome */

サンプル

角丸（radius）

-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, GoogleChrome */
border-radius: 10px; /* Opera, IE */

サンプル

ボックスドロップシャドウ（box-shadow）

-moz-box-shadow: #8a8a8a 5px 5px 10px; /* Firefox */
-webkit-box-shadow: #8a8a8a 5px 5px 10px; /* Safari, GoogleChrome */
box-shadow: #8a8a8a 5px 5px 10px; /* Opera, IE */

サンプル

テキストドロップシャドウ（text-shadow）

text-shadow: 1px 1px 3px #666666;

サンプル

カラム組み（column）

-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px dotted #666;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dotted #666;

サンプル

とりあえず、ここまで！個別のプロパティや、他のCSS3コードは、追々記事にします！