お問い合せはリアルサポートセンターまでお問い合わせフォーム、お電話、メールなどでお気軽にお申し付けください。 9:00-22:00(年中無休)  |
CSS3：デザイン要素からプロパティ1
CSSは、デザインを決定させます。自在に操れるようにしたいですね。
そこで、シリーズ化できればいいのですが、Adobe Fireworksで作成したデザイン要素にCSS3を書き出す拡張機能が公開され、適用できるようになっています。画像よりもCSSで表示することによって少しでもサイズを減らすために・・・。
スマホのブラウザでCSS3とHTML5でサイト構築が肝なので、身に刻むために公開します。
以下のCSSは上記画像を表現しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | background-color:#97461a; /* Firefox v3.6+ */ background-image: -moz-linear-gradient(54% -66% -90deg, rgb(151,70,26) 0%, rgb(251,216,197) 30%, rgb(108,46,22) 83%, rgb(239,219,205) 100%); /* safari v4.0+ and by Chrome v3.0+ */ background-image: -webkit-gradient(linear, 54% -66%, 54% 124%, color-stop(0, rgb(151,70,26)), color-stop(0.3, rgb(251,216,197)), color-stop(0.83, rgb(108,46,22)), color-stop(1, rgb(239,219,205))); /* Chrome v10.0+ and by safari nightly build*/ background-image: -webkit-linear-gradient(-90deg, rgb(151,70,26) 0%, rgb(251,216,197) 30%, rgb(108,46,22) 83%, rgb(239,219,205) 100%); /* Opera v11.10+ */ background-image: -o-linear-gradient(-90deg, rgb(151,70,26) 0%, rgb(251,216,197) 30%, rgb(108,46,22) 83%, rgb(239,219,205) 100%); background-image: linear-gradient(-90deg, rgb(151,70,26) 0%, rgb(251,216,197) 30%, rgb(108,46,22) 83%, rgb(239,219,205) 100%); width:100px; height:50px; /* 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; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff97461a,endColorstr = #ffefdbcd,GradientType = 0); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff97461a,endColorstr = #ffefdbcd,GradientType = 0)"; |
コメントをどうぞ
