Friday, November 18, 2016

TEXT-THEME

W3.CSS

Indigo

w3-text-theme

+
w3-theme-l5 (w3-theme-light)
w3-theme-l4
w3-theme-l3
w3-theme-l2
w3-theme-l1
w3-theme
w3-theme-d1
w3-theme-d2
w3-theme-d3
w3-theme-d4
w3-theme-d5 (w3-theme-dark)

Private Themes

Below you can create your own private themes.

Input a color in the yellow box below or select a color from colors of the year.

Adding Gradients

One reader sent us this suggestion: You might want to consider adding a gradient for each theme.

used the l2 and l1 colors from the blue theme to create this gradient:

Example

.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%)}

**<!DOCTYPE html><html><head><style>#myDIV { position: absolute; width: 300px; height: 150px; background-color: lightblue; border: 1px solid black; } #DIV2 { position: relative; top: 130px; left: 30px; width: 300px; height: 150px; background-color: coral; border: 1px solid black; } </style></head> <body> <p>Click the "Try it" button to change the z-index of the blue DIV element:</p> <button onclick="myFunction()">Try it</button> <div id="DIV2"><br> <h1>Hello!</h1> <h2>Xin chào mọi người.</h2></div> <div id="myDIV"></div> <script>function myFunction() { document.getElementById("myDIV").style.zIndex = "-1"; } </script> </body></html> <p align="center"> </p><p align="center"> </p><p align="center"> </p><p align="center"> </p><p align="center"> </p>http://nguyenvanguyen.blogspot.com/2016/11/mydiv-position-absolute-width-300px_99.htmlnoreply@blogger.com (Thanh)0tag:blogger.com,1999:blog-484459571859985074.post-4292626303994095247Sat, 12 Nov 2016 03:07:00 +00002016-11-11T21:08:23.772-08:00 <!DOCTYPE html><html><head><style>div {position: absolute;} #container div { background-color: lightblue; border: 1px solid #333333; width: 100px; height: 100px; opacity: 0.5; } div#myBox { opacity: 1; background-color: coral; z-index: 1; -webkit-animation: mymove 5s infinite linear; /* Chrome, Safari, Opera */ animation: mymove 5s infinite linear; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 50% {z-index: 5;} } /* Standard syntax */ @keyframes mymove { 50% {z-index: 5;} } </style></head> <body style="position:absolute"> <p>The z-index property is <em>animatable</em> in CSS.</p><p><strong>Note:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> <p>Gradually change the z-index property of "myBox" from 1, to 5, and back to 1:<p><div id="container"> <div id="myBox">myBox</div> <div style="top:20px;left:20px;z-index:1;">z-index 1</div> <div style="top:40px;left:40px;z-index:2;">z-index 2</div> <div style="top:60px;left:60px;z-index:3;">z-index 3</div> <div style="top:80px;left:80px;z-index:4;">z-index 4</div></div> </body></html> </div></div></div></div></div></div><p align="center"> </p><p align="center"> </p><p align="center"> </p><p align="center"> </p><p align="center"> </p>http://nguyenvanguyen.blogspot.com/2016/11/div-position-absolutecontainer-div.htmlnoreply@blogger.com (Thanh)0tag:blogger.com,1999:blog-484459571859985074.post-8003133152362718239Fri, 11 Nov 2016 20:41:00 +00002016-11-11T13:03:21.563-08:00<!DOCTYPE html><html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"><link rel="stylesheet" href="/lib/w3-theme-indigo.css"><body> <div class="w3-card-4"><div class="w3-container w3-theme w3-card-2"> <h1>Indigo</h1></div> <div class="w3-container w3-text-theme"><h2>w3-text-theme</h2></div> <ul class="w3-ul w3-border-top"> <li class="w3-theme-l5" style="position:relative"> <a class="w3-btn-floating-large w3-theme-action w3-right" style="position:absolute;top:-28px;right:16px;">+</a> <p>w3-theme-l5 (w3-theme-light)</p> </li> <li class="w3-theme-l4"> <p>w3-theme-l4</p> </li> <li class="w3-theme-l3"> <p>w3-theme-l3</p> </li> <li class="w3-theme-l2"> <p>w3-theme-l2</p> </li> <li class="w3-theme-l1"> <p>w3-theme-l1</p> </li> <li class="w3-theme"> <p>w3-theme</p> </li> <li class="w3-theme-d1"> <p>w3-theme-d1</p> </li> <li class="w3-theme-d2"> <p>w3-theme-d2</p> </li> <li class="w3-theme-d3"> <p>w3-theme-d3</p> </li> <li class="w3-theme-d4"> <p>w3-theme-d4</p> </li> <li class="w3-theme-d5"> <p>w3-theme-d5 (w3-theme-dark)</p> </li></ul></div> </body></html> <h2>Private Themes</h2><p>Below you can create your own private themes.</p><p>Input a color in the yellow box below or select a color from colors of the year.</p><div class="w3-row"><div class="w3-half"><input type="text" id="color" class="w3-yellow" onchange="createTheme(-1)" size="8" style="height:34px;padding-left:4px" value="#efc050"><button class="w3-btn" style="margin-bottom:4px" onclick="createTheme(-1)">Create Theme</button></div><div class="w3-half"><select id="select01" class="w3-select w3-large" name="option" onchange="createSuggestion()"> <option value="" disabled selected>Colors of the Year</option> <option style="color:#fff;background-color:#4c6a92" value="#4c6a92">2016 Riverside</option> <option style="color:#fff;background-color:#92b6d5" value="#92b6d5">2016 Airy Blue</option> <option style="color:#fff;background-color:#838487" value="#838487">2016 Sharkskin</option> <option style="color:#fff;background-color:#b93a32" value="#b93a32">2016 Aurora Red</option> <option style="color:#fff;background-color:#af9483" value="#af9483">2016 Warm Taupe</option> <option style="color:#fff;background-color:#ad5d5d" value="#ad5d5d">2016 Dusty Cedar</option> <option style="color:#fff;background-color:#006e51" value="#006e51">2016 Lush Medow</option> <option style="color:#fff;background-color:#d8ae47" value="#d8ae47">2016 Spicy Mustard</option> <option style="color:#fff;background-color:#9e4624" value="#9e4624">2016 Potter's Clay</option> <option style="color:#fff;background-color:#b76ba3" value="#b76ba3">2016 Bodacious</option> <option style="color:#fff;background-color:#f7cac9" value="#f7cac9">2016 Rose Quarts</option> <option style="color:#fff;background-color:#92a8d1" value="#92a8d1">2016 Serenity</option> <option style="color:#fff;background-color:#f7786b" value="#f7786b">2016 Peach Echo</option> <option style="color:#fff;background-color:#034f84" value="#034f84">2016 Snorkel Blue</option> <option style="color:#fff;background-color:#98ddde" value="#98ddde">2016 Limpet Shell</option> <option style="color:#fff;background-color:#9896a4" value="#9896a4">2016 Lilac Grey</option> <option style="color:#fff;background-color:#b18f6a" value="#b18f6a">2016 Iced Coffe</option> <option style="color:#fff;background-color:#dd4132" value="#dd4132">2016 Fiesta</option> <option style="color:#fff;background-color:#fae03c" value="#fae03c">2016 Buttercup</option> <option style="color:#fff;background-color:#79c753" value="#79c753">2016 Green Flash</option> <option style="color:#fff;background-color:#955251" value="#955251">2015 Marsala</option> <option style="color:#fff;background-color:#b565a7" value="#b565a7">2014 Radiand Orchid</option> <option style="color:#fff;background-color:#009b77" value="#009b77">2013 Emerald</option> <option style="color:#fff;background-color:#dd4124" value="#dd4124">2012 Tangerine Tango</option> <option style="color:#fff;background-color:#d65076" value="#d65076">2011 Honeysucle</option> <option style="color:#fff;background-color:#45b8ac" value="#45b8ac">2010 Turquise</option> <option style="color:#fff;background-color:#efc050" value="#efc050">2009 Mimosa</option> <option style="color:#fff;background-color:#5b5ea6" value="#5b5ea6">2008 Blue Izis</option> <option style="color:#fff;background-color:#9b2335" value="#9b2335">2007 Chili Pepper</option> <option style="color:#fff;background-color:#dfcfbe" value="#dfcfbe">2006 Sand Dollar</option></select></div></div> <div class="w3-row" style="margin-top:32px"><div class="w3-half"> <input type="text" id="hue" size="8" style="height:34px;padding-left:4px" value="0" disabled> <button class="w3-btn" style="margin-bottom:4px" onclick="huePlus(-5)">Hue -</button> <button class="w3-btn" style="margin-bottom:4px" onclick="huePlus(+5)">Hue +</button></div><div class="w3-half"> <input type="text" id="saturation" size="8" style="height:34px;padding-left:4px" value="0" disabled> <button class="w3-btn" style="margin-bottom:4px" onclick="saturationPlus(-0.05)">Sat -</button> <button class="w3-btn" style="margin-bottom:4px" onclick="saturationPlus(0.05)">Sat +</button></div></div> <hr><div class="w3-row-padding" style="margin:0 -16px"><div class="w3-half"> <hr> <h2>Adding Gradients</h2><p>One reader sent us this suggestion: You might want to consider adding a gradient for each theme.</p><p> used the l2 and l1 colors from the blue theme to create this gradient:</p> <div class="w3-example"> <h3>Example</h3><div class="w3-code notranslate cssHigh"> .w3-theme-gradient {<br>  color: #000 !important;<br>  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}<br> .w3-theme-gradient {<br>  color: #000 !important;<br>  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}<br>.w3-theme-gradient {<br>  color: #000 !important;<br>  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}<br> .w3-theme-gradient {<br>  color: #000 !important;<br>  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}<br>.w3-theme-gradient {<br>  color: #000 !important;<br>  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)} </div></div></div></div> <hr><hr> <p align="center"> </p> <select id="select01" class="w3-select w3-large" name="option" onchange="createSuggestion()"> <option value="" disabled selected>Colors of the Year</option> <option style="color:#fff;background-color:#4c6a92" value="#4c6a92">2016 Riverside</option> <option style="color:#fff;background-color:#92b6d5" value="#92b6d5">2016 Airy Blue</option> <option style="color:#fff;background-color:#838487" value="#838487">2016 Sharkskin</option> <option style="color:#fff;background-color:#b93a32" value="#b93a32">2016 Aurora Red</option> <option style="color:#fff;background-color:#af9483" value="#af9483">2016 Warm Taupe</option> <option style="color:#fff;background-color:#ad5d5d" value="#ad5d5d">2016 Dusty Cedar</option> <option style="color:#fff;background-color:#006e51" value="#006e51">2016 Lush Medow</option> <option style="color:#fff;background-color:#d8ae47" value="#d8ae47">2016 Spicy Mustard</option> <option style="color:#fff;background-color:#9e4624" value="#9e4624">2016 Potter's Clay</option> <option style="color:#fff;background-color:#b76ba3" value="#b76ba3">2016 Bodacious</option> <option style="color:#fff;background-color:#f7cac9" value="#f7cac9">2016 Rose Quarts</option> <option style="color:#fff;background-color:#92a8d1" value="#92a8d1">2016 Serenity</option> <option style="color:#fff;background-color:#f7786b" value="#f7786b">2016 Peach Echo</option> <option style="color:#fff;background-color:#034f84" value="#034f84">2016 Snorkel Blue</option> <option style="color:#fff;background-color:#98ddde" value="#98ddde">2016 Limpet Shell</option> <option style="color:#fff;background-color:#9896a4" value="#9896a4">2016 Lilac Grey</option> <option style="color:#fff;background-color:#b18f6a" value="#b18f6a">2016 Iced Coffe</option> <option style="color:#fff;background-color:#dd4132" value="#dd4132">2016 Fiesta</option> <option style="color:#fff;background-color:#fae03c" value="#fae03c">2016 Buttercup</option> <option style="color:#fff;background-color:#79c753" value="#79c753">2016 Green Flash</option> <option style="color:#fff;background-color:#955251" value="#955251">2015 Marsala</option> <option style="color:#fff;background-color:#b565a7" value="#b565a7">2014 Radiand Orchid</option> <option style="color:#fff;background-color:#009b77" value="#009b77">2013 Emerald</option> <option style="color:#fff;background-color:#dd4124" value="#dd4124">2012 Tangerine Tango</option> <option style="color:#fff;background-color:#d65076" value="#d65076">2011 Honeysucle</option> <option style="color:#fff;background-color:#45b8ac" value="#45b8ac">2010 Turquise</option> <option style="color:#fff;background-color:#efc050" value="#efc050">2009 Mimosa</option> <option style="color:#fff;background-color:#5b5ea6" value="#5b5ea6">2008 Blue Izis</option> <option style="color:#fff;background-color:#9b2335" value="#9b2335">2007 Chili Pepper</option> <option style="color:#fff;background-color:#dfcfbe" value="#dfcfbe">2006 Sand Dollar</option></select></div></div><p align="center"> </p>

cây bút 3