作成したテーマ
使用中のテーマ:
作品☰
生成された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アプリケーションでは、事前定義された色とは異なる色相を選択することで、色の使用を制限することができます。
W3-赤 | それを試してみてください |
W3-ピンク | それを試してみてください |
W3-紫色 | それを試してみてください |
W3-ディープパープル | それを試してみてください |
W3-藍 | それを試してみてください |
W3-ブルー | それを試してみてください |
W3-水色 | それを試してみてください |
W3-シアン | それを試してみてください |
W3-ティール | それを試してみてください |
W3-グリーン | それを試してみてください |
W3-ライトグリーン | それを試してみてください |
W3ライム | それを試してみてください |
W3-カーキ | それを試してみてください |
W3-黄色 | それを試してみてください |
W3-アンバー | それを試してみてください |
W3-オレンジ | それを試してみてください |
W3-ディープオレンジ | それを試してみてください |
W3-ブルーグレー | それを試してみてください |
W3-ブラウン | それを試してみてください |
W3-グレー | それを試してみてください |
W3-ダークグレー | それを試してみてください |
W3-黒 | それを試してみてください |
W3-w3ii | それを試してみてください |
作品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 | カラー・テーマイエロー |