最新のWeb開発のチュートリアル
 

W3.CSSカラーテーマ




作成したテーマ

使用中のテーマ:

午前12時30分

作品

+
アバター

フローズン

アニメーションへの応答はばかげていました。


スターウォーズ

人々は新しいスターウォーズ映画のために終了しました。


アバター

アベンジャーズ

マーベルとディズニーのための大成功。

«»

生成されたCSS:

w3ii

W3.CSSテーマ例

チンクエテッレ

チンクエテッレ(5ランド)イタリアン・リヴィエラの一部です。 5つの村と海岸線:モンテロッソ、ヴェルナッツァ、コルニリア、Manarolaの、およびリオマッジョーレは、ユネスコの世界遺産に登録されて。

モンテロッソ

モンテロッソアルマーレはラ・スペツィアのリヴィエラの小さな人工岩礁で保護された小さな自然の湾、の中心に位置しています。 これは、チンクエ・テッレの最北端の村です。

ヴェルナッツァ

ヴェルナッツァチンクエ・テッレ地域の5つの町の別のです。 ヴェルナッツァは、第四町見出し北にあります。 それは車の交通を持っていない、とイタリアのリビエラの本当の「漁村」の一つです。


カラーテーマ

W3.CSSで、あなた自身のカラーテーマを使用してアプリケーションをカスタマイズすることは容易です。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href=" /lib/w3-theme-indigo.css ">

»それを自分で試してみてください


事前定義されたテーマ

HTMLアプリケーションでは、事前定義された色とは異なる色相を選択することで、色の使用を制限することができます。

作品2014

  • フローズン

    アニメーションへの応答はばかげました

  • 私たちのスターで障害

    、触るグリップと純粋によく作ら

  • アベンジャーズ

    マーベルとディズニーのための巨大な成功

«»


作品2014

  • フローズン

    アニメーションへの応答はばかげました

  • 私たちのスターで障害

    、触るグリップと純粋によく作ら

  • アベンジャーズ

    マーベルとディズニーのための巨大な成功

«»

プライベートテーマ

W3.CSSと、民間の色をテーマにしたアプリケーションをカスタマイズすることは容易です。

あなたは、<link>タグでプライベートテーマにリンクすることもできますし、<スタイル>タグでプライベートテーマを置くことができます:

<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5 !important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593 !important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-action {
color:#fff !important;background-color:#311b92 !important}
.w3-text-theme {
color:#1a237e !important}
</style>

»それを自分で試してみてください


グラデーションを追加します

ある読者は、私たちにこの提案を送った:あなたがテーマごとに勾配を追加することを検討することをお勧めします。

私はこの勾配を作成するために、青色のテーマから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-テーマamber.css カラー・テーマアンバー
W3-テーマblack.css カラーテーマブラック
W3-テーマblue.css カラー・テーマブルー
W3-テーマ-青- grey.css カラー・テーマブルーグレー
W3-テーマbrown.css カラー・テーマブラウン
W3-テーマcyan.css カラーテーマシアン
W3-テーマダークgrey.css カラー・テーマダークグレー
W3-テーマディープorange.css カラー・テーマディープオレンジ
W3-テーマディープpurple.css カラー・テーマディープ・パープル
W3-テーマgreen.css カラー・テーマグリーン
W3-テーマgrey.css カラーテーマグレイ
W3-テーマindigo.css カラー・テーマインディゴ
W3-テーマkhaki.css カラーテーマカーキ
W3-テーマ光blue.css カラー・テーマライトブルー
W3-テーマ光green.css カラー・テーマライトグリーン
W3-テーマlime.css カラーテーマライム
W3-テーマorange.css カラー・テーマオレンジ
W3-テーマpink.css カラー・テーマピンク
W3-テーマpurple.css カラー・テーマパープル
W3-テーマred.css カラー・テーマレッド
W3-テーマteal.css カラーテーマティール
W3-テーマyellow.css カラー・テーマイエロー