色や大きさの感じは、結局のところ試行錯誤になってしまいます。
ある程度、想像つくのですが、実際に設定してみて様子を観察します。
今回は、デザインを決めるのではなく、
デザインを決める経過を調査しているので、
仮の状況で試行錯誤をしています。
タグ:color
トップ画像を変更(無料ブログをカスタマイズ)
TOPのグラデーション(無料ブログをカスタマイズ)
トップ部分のグラデーションを変更してみました。
基本スタイルは次のようにしました。
(1)開始をピンク、終了色をグリーンの見本です。
ピンクとグリーンの重なる部分がくすんだ感じになります。
実際のHTMLはこちらをクリックしてください。→[ Click ]
(2)開始をピンク、終了色をグリーンに設定するとともに、中間色を薄いグレーにしました。
重なり部分の濁りが解消されたような気がします。
実際のHTMLはこちらをクリックしてください。→[ Click ]
(3)周辺に角丸を配置しました。
実際のHTMLはこちらをクリックしてください。→[ Click ]
基本スタイルは次のようにしました。
(1)開始をピンク、終了色をグリーンの見本です。
ピンクとグリーンの重なる部分がくすんだ感じになります。
実際のHTMLはこちらをクリックしてください。→[ Click ]
(2)開始をピンク、終了色をグリーンに設定するとともに、中間色を薄いグレーにしました。
重なり部分の濁りが解消されたような気がします。
実際のHTMLはこちらをクリックしてください。→[ Click ]
(3)周辺に角丸を配置しました。
実際のHTMLはこちらをクリックしてください。→[ Click ]
透明色の指定(無料ブログをカスタマイズ)
ベンダーフレックス(vendor prefix)
ブラウザによって、
CSSが動作しないことが有るそうです。
なので、ベンダー識別子(vendor identifier)を使って、動作をさせることが必要な場合もあるようです。
LiveDoorブログのカスタマイズで、
ヘッダー部分に透明色が利用されています。
こちらの見本の、一番上部(トップ部)が、背景がオレンジ色でブルーのグラデーションがかぶさっています。
このブルーグラデーションを指定しているCSSに、
ベンダーフレックス(vendor prefix)を利用しています。
上の、
-webkit- Google Chrome、Safari、 Opera
-moz- Firefox
-ms- Internet Explorer
ということらしいのですが、 特別に opera は特別に -o- という識別子も用意されているようです。
ちなみに上記のスタイルを表示してみることにします。
色を変えてみます。
ブラウザによって、
CSSが動作しないことが有るそうです。
なので、ベンダー識別子(vendor identifier)を使って、動作をさせることが必要な場合もあるようです。
LiveDoorブログのカスタマイズで、
ヘッダー部分に透明色が利用されています。
こちらの見本の、一番上部(トップ部)が、背景がオレンジ色でブルーのグラデーションがかぶさっています。
このブルーグラデーションを指定しているCSSに、
ベンダーフレックス(vendor prefix)を利用しています。
#blog-header {
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative;
}
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative;
}
上の、
- -webkit-
- -moz-
- -ms-
-webkit- Google Chrome、Safari、 Opera
-moz- Firefox
-ms- Internet Explorer
ということらしいのですが、 特別に opera は特別に -o- という識別子も用意されているようです。
ちなみに上記のスタイルを表示してみることにします。
#blog-header {
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative; }
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image: radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative; }
色を変えてみます。
#blog-header {
border-radius: 4px 4px 0 0;
background-color: #FFF;
background-image: -webkit-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image: -moz-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image: -ms-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image: radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
position: relative; }
あらためて、色や透明色の関係を試していきたいと思います。
border-radius: 4px 4px 0 0;
background-color: #FFF;
background-image: -webkit-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image: -moz-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image: -ms-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image: radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
position: relative; }
あらためて、色や透明色の関係を試していきたいと思います。
CSSの色を変更した(無料ブログをカスタマイズ)
CSSで使用している色(無料ブログをカスタマイズ)
無料ブログをカスタマイズ(色番号調査)
無料で提供されているブログがたくさんあります。
数あるフリーのブログでカスタマイズに一番適しているのがLivedoorのブログだと思います。l
に従って、ブログデザインの「custom」で使用されているCSS内の色を調べてみました。続きを読む