W3.CSSカラーテーマ
カラーテーマ
W3.CSSを使用すると、カラーテーマを使用してアプリケーションを簡単にカスタマイズできます。
映画2014
-
凍った
アニメーションへの反応はばかげていた
-
私たちの星のせい
触れて、握って、本当によくできている
-
アベンジャーズ
マーベルとディズニーの大成功
«»»
映画2014
-
凍った
アニメーションへの反応はばかげていた
-
私たちの星のせい
触れて、握って、本当によくできている
-
アベンジャーズ
マーベルとディズニーの大成功
«»»
あなたがしなければならないのは、事前定義された（または自家製の）テーマへのリンクを追加することです：
例
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-theme-indigo.css">
事前定義されたテーマ
これらは、W3.CSSで事前定義されたテーマです。
| w3-テーマ-赤 | |
| w3-テーマピンク | |
| w3-テーマパープル | |
| w3-テーマ-ディープパープル | |
| w3-テーマ-藍 | |
| w3-テーマブルー | |
| w3-テーマ-ライトブルー | |
| w3-テーマシアン | |
| w3-テーマティール | |
| w3-テーマグリーン | |
| w3-テーマ-ライトグリーン | |
| w3-テーマライム | |
| w3-テーマカーキ | |
| w3-テーマイエロー | |
| w3-テーマ-琥珀 | |
| w3-テーマ-オレンジ | |
| w3-テーマ-ディープオレンジ | |
| w3-テーマ-青-灰色 | |
| w3-テーマブラウン | |
| w3-テーマグレー | |
| w3-テーマ-ダークグレー | |
| w3-テーマブラック | |
| w3-テーマ-w3schools |
グラデーションの追加
ある読者から、この提案が送られてきました。テーマごとにグラデーションを追加することを検討してください。
青のテーマのl2とl1の色を使用して、このグラデーションを作成しました。
例
.w3-theme-gradient {
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
ダウンロード可能なカラーテーマ
Googleのマテリアルデザインに触発されたダウンロード可能なカラーテーマは次のとおりです。
| スタイルシート | 説明 |
|---|---|
| w3-theme-amber.css | カラーテーマアンバー |
| w3-theme-black.css | カラーテーマブラック |
| w3-theme-blue.css | カラーテーマブルー |
| w3-theme-blue-grey.css | カラーテーマブルーグレー |
| w3-theme-brown.css | カラーテーマブラウン |
| w3-theme-cyan.css | カラーテーマシアン |
| w3-theme-dark-grey.css | カラーテーマダークグレー |
| w3-theme-deep-orange.css | カラーテーマディープオレンジ |
| w3-theme-deep-purple.css | カラーテーマディープパープル |
| w3-theme-green.css | カラーテーマグリーン |
| w3-theme-grey.css | カラーテーマグレー |
| w3-theme-indigo.css | カラーテーマインディゴ |
| w3-theme-khaki.css | カラーテーマカーキ |
| w3-theme-light-blue.css | カラーテーマライトブルー |
| w3-theme-light-green.css | カラーテーマライトグリーン |
| w3-theme-lime.css | カラーテーマライム |
| w3-theme-orange.css | カラーテーマオレンジ |
| w3-theme-pink.css | カラーテーマピンク |
| w3-theme-purple.css | カラーテーマパープル |
| w3-theme-red.css | カラーテーマレッド |
| w3-theme-teal.css | カラーテーマティール |
| w3-theme-yellow.css | カラーテーマイエロー |