CSS3の角丸、グラデーションを試しにやってみた！
どもでしヽ(ﾟ◇ﾟ )ﾉ
やろうやろう、いつかはやってみなきゃ・・・
そんなシリーズ第２弾です(｡-人-｡)ｼﾘｰｽﾞﾓﾉﾀﾞｯﾀﾉ?
前回は、WordPressでした
⇒『初めてのWordPressの設定（XREAサーバー編） 』
そして、今回は
徐々に、対応ブラウザも増えてきた
CSS3ですﾍ(ﾟ∀ﾟ*)ﾉ
CSS3の入門編といえば、
角丸スタイルではないでしょうか。（勝手にそう思っている）
で、それにプラスして、
グラデーションのスタイルも試してみましたよ。
⇒CSS3の角丸、グラデーションのサンプル
（開くと携帯変換のリンクが出てきます、邪魔ですみませんが閉じるボタンで消してくださいm(_ _ )m ｆｃ2なのですが、これって消せないんですかね。。）
角丸スタイルの対応ブラウザは
いまのところ確認しているのは、Ｆｉｒｅｆｏｘ、Operaです。
IEでは駄目でした。
IEでは、別のやり方があるみたいなのですが、
どうもそれがうまくいきません。。
もう少し勉強します(ﾉ_-｡)
グラデーションの対応ブラウザは
いまのところ確認しているのは、Firefox、IE8（7もだったかな？）です。
サンプルページ には、同じ色合いの画像も一緒に置いていますが
CSS3のスタイルは、画像と変わらないくらいの出来栄えです(・∀・)ｽｺﾞｲﾅﾘ!
これには感動しました。
早く、全部のブラウザでCSS3が普通に対応されるようになることを
願うばかりです(｡-人-｡) 作業短縮できそう。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
今回用いた角丸表記↓
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
グラデーション表記↓
background: #FF9900; /* for non-css3 browsers */ ←css3未対応ブラウザ用
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FF9900), to(#FF6600)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FF9900, #FF6600); /* for firefox 3.6+ */
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
サンプルページのスタイルを見ていただいたほうが、
見やすいかもしれません(;^_^A
⇒CSS3の角丸、グラデーションのサンプル
もし、間違っていましたらご指摘いただけると助かります！
コーディングって、やりたいように出来たときが
パズルのピースがうまくはまった！
みたいな感覚で、気持ちよかったりします:*:・(￣∀￣)・:*:
ではでは～
わたしの2010年の目標はこちら
はじめましての方はこちら
テーマ別の目次
⇒三日坊主ブログ応援お願いします☆
⇒ブログランキング★転職
（おかげさまで転職カテゴリで上位にランクイン中です☆）
やろうやろう、いつかはやってみなきゃ・・・
そんなシリーズ第２弾です(｡-人-｡)ｼﾘｰｽﾞﾓﾉﾀﾞｯﾀﾉ?
前回は、WordPressでした
⇒『初めてのWordPressの設定（XREAサーバー編） 』
そして、今回は
徐々に、対応ブラウザも増えてきた
CSS3ですﾍ(ﾟ∀ﾟ*)ﾉ
CSS3の入門編といえば、
角丸スタイルではないでしょうか。（勝手にそう思っている）
で、それにプラスして、
グラデーションのスタイルも試してみましたよ。
⇒CSS3の角丸、グラデーションのサンプル
（開くと携帯変換のリンクが出てきます、邪魔ですみませんが閉じるボタンで消してくださいm(_ _ )m ｆｃ2なのですが、これって消せないんですかね。。）
角丸スタイルの対応ブラウザは
いまのところ確認しているのは、Ｆｉｒｅｆｏｘ、Operaです。
IEでは駄目でした。
IEでは、別のやり方があるみたいなのですが、
どうもそれがうまくいきません。。
もう少し勉強します(ﾉ_-｡)
グラデーションの対応ブラウザは
いまのところ確認しているのは、Firefox、IE8（7もだったかな？）です。
サンプルページ には、同じ色合いの画像も一緒に置いていますが
CSS3のスタイルは、画像と変わらないくらいの出来栄えです(・∀・)ｽｺﾞｲﾅﾘ!
これには感動しました。
早く、全部のブラウザでCSS3が普通に対応されるようになることを
願うばかりです(｡-人-｡) 作業短縮できそう。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
今回用いた角丸表記↓
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
グラデーション表記↓
background: #FF9900; /* for non-css3 browsers */ ←css3未対応ブラウザ用
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FF9900), to(#FF6600)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FF9900, #FF6600); /* for firefox 3.6+ */
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
サンプルページのスタイルを見ていただいたほうが、
見やすいかもしれません(;^_^A
⇒CSS3の角丸、グラデーションのサンプル
もし、間違っていましたらご指摘いただけると助かります！
コーディングって、やりたいように出来たときが
パズルのピースがうまくはまった！
みたいな感覚で、気持ちよかったりします:*:・(￣∀￣)・:*:
ではでは～
わたしの2010年の目標はこちら
はじめましての方はこちらテーマ別の目次
⇒三日坊主ブログ応援お願いします☆
⇒ブログランキング★転職
（おかげさまで転職カテゴリで上位にランクイン中です☆）