Webもモバイルデバイス向けもこれ1つ！～Fireworks拡張機能で思い通りのデザインを作成

原題：Fireworks CSS3 Mobile Packを使ってみよう

CSS3プロパティのコード

　下記は、図1のデザイン要素から抽出したCSS3プロパティです。

background-color:#f2bc1b; 
/* Firefox v3.6+ */ 
background-image: 
-moz-linear-gradient(50% 0% -90deg, 
rgb(242,188,27) 0%, 
rgb(242,223,167) 24%, 
rgb(242,181,68) 48%, 
rgb(242,242,242) 73%, 
rgb(217,139,43) 100%); 

/* safari v4.0+ and by Chrome v3.0+ */ 
background-image: 
-webkit-gradient(linear, 
50% 0%, 
50% 99%, 
color-stop(0, rgb(242,188,27)), 
color-stop(0.24, rgb(242,223,167)), 
color-stop(0.48, rgb(242,181,68)), 
color-stop(0.73, rgb(242,242,242)), 
color-stop(1, rgb(217,139,43))); 

/* Chrome v10.0+ and by safari nightly build*/ 
background-image: 
-webkit-linear-gradient(-90deg, rgb(242,188,27) 0%, 
rgb(242,223,167) 24%, 
rgb(242,181,68) 48%, 
rgb(242,242,242) 73%, 
rgb(217,139,43) 100%); 

/* Opera v11.10+ */ 
background-image: -o-linear-gradient(-90deg, 
rgb(242,188,27) 0%, 
rgb(242,223,167) 24%, 
rgb(242,181,68) 48%, 
rgb(242,242,242) 73%, 
rgb(217,139,43) 100%); 

background-image: linear-gradient(-90deg, 
rgb(242,188,27) 0%, 
rgb(242,223,167) 24%, 
rgb(242,181,68) 48%, 
rgb(242,242,242) 73%, 
rgb(217,139,43) 100%); 

width:150px; 

height:150px; 

/* Firefox v1.0+ */ 
-moz-border-radius:10px; 
/* Safari v3.0+ and by Chrome v0.2+ */ 
-webkit-border-radius:10px; 
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */ border-radius:10px; 

/* Firefox v3.5+ */ 
-moz-box-shadow:0px 0px 5px rgb(0,0,0) ,inset 0px 0px 5px rgba(0,0,0,0.75); 
/* Safari v3.0+ and by Chrome v0.2+ */ 
-webkit-box-shadow:0px 0px 5px rgb(0,0,0) ,inset 0px 0px 5px rgba(0,0,0,0.75); 
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+ and by Opera v10.5+ */ 
box-shadow:0px 0px 5px rgb(0,0,0) ,inset 0px 0px 5px rgba(0,0,0,0.75); 

filter: 
        progid:DXImageTransform.Microsoft.gradient(startColorstr = #fff2bc1b,endColorstr = #ffd98b2b,GradientType = 0) 
        progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 0,Color = #ff000000,Positive = true); 
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #fff2bc1b,endColorstr = #ffd98b2b,GradientType = 0) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 0,Color = #ff000000,Positive = true)";

　ブラウザベンダーで先行実装されているCSS3プロパティに関しては、自動でベンダープレフィックスを付けてくれます。また、クロスブラウザー対応も施されているので、特に意識する必要はありません。

　［CSS3 Property］パネルに表示されるプロパティは、CSS3で表現可能なものに限定されるということに注意してください。高さや幅はもちろんのこと、グロー／シャドウ(内側)／ドロップシャドウ／光彩といったフィルター類にも対応しています。ただし、ベベルやエンボスといったフィルター類はCSS3で表現することが不可能なのでパネル内には表示されません。

　デザインを行う際には、パネルにCSS3プロパティとして抽出されているか確認しながら作業を進め、デザイン要素をCSS3プロパティのみで表現可能な状態に保つようにしましょう。そうすることで、［CSS3 Property］パネルの利便性を最大限に活用できるとともに、全てCSSで表現されるので無駄な画像読み込みを減らすことができます。