Mouseover & Focus Selector CSS3 Transitions Code HTML and CSS3

By Anonymous -

Mouseover & Focus Selector CSS3 Transitions Code HTML and CSS3


HTML:

Horizontal Tab (Resize auto and auto focus in any device transtition): 

<div class="tab" id="blue">Blue</div> 
 <div class="tab" id="green">Green</div> 
 <div class="tab" id="yellow">Yellow</div> 
 <div class="tab" id="red">Red</div>
On Form Submissions: 

<input class="searchBar" id="blue" type="text" value="Search"> 
 <br/> 
 <input class="searchBar" id="green" type="text" value="Search"> 
 <br/> 
 <input class="searchBar" id="yellow" type="text" value="Search"> 
 <br/> 
 <input class="searchBar" id="red" type="text" value="Search">
CSS3 of HTML above: 

/* BODY STYLING */ 

body{padding: 50px 50px; background: #fff; font-family:Verdana; color:#2d2d2d; font-weight:100; } 
hr {color:#2d2d2d; } 

 

/* EXPANDING SEARCH BAR STARTS HERE */ 

 /* Main Styling */ 

 input[type=text].searchBar{width:100px;padding:4px 8px;margin-top:10px;color:#fff;font-size:12px;border-radius:10px;border:0;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s}



/* Individual Styling */ 

input[type=text]#blue{background:#0faae4}


input[type=text]#green{background:#5cb85c}


input[type=text]#yellow{background:#f0ad4e}


input[type=text]#red{background:#d9534f}


input[type=text].searchBar:focus{width:165px;outline:0;background:#fff;border:1px solid #999}


/* Individual Styling on Focus */ 

 input[type=text]#blue:focus{color:#0faae4; background:#fff; } 
 input[type=text]#green:focus{color:#5cb85c; background:#fff; } 
 input[type=text]#yellow:focus{color:#f0ad4e; background:#fff; } 
 input[type=text]#red:focus{color:#d9534f; background:#fff; } 





/* EXPANDING MOUSE OVER TAB STARTS HERE */ 
/* Main Styling */ 

div.tab{width:100px;float:left;display:inline-block;padding:4px 8px;color:#fff;font-size:12px;border:0;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s}
/* Individual Styling */
div#blue{background:#0faae4;border-radius:10px 0 0 10px}div#green{background:#5cb85c}
/* Main Styling On Focus for all */
div#yellow{background:#f0ad4e}div#red{background:#d9534f;border-radius:0 10px 10px 0}div.tab:hover{width:165px;outline:0;background:#fff}
/* Individual Styling on Focus */
div#blue:hover{width:200px;color:#e9e9e9}div#green:hover{color:#e9e9e9;width:165px}div#yellow:hover{width:110px;color:#e9e9e9}div#red:hover{width:140px;color:#e9e9e9}





DeMo







































Comments













Post a Comment




Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.




















Popular posts from this blog











How to Make Blogger Safelink Converter v3









By



Anonymous




-














Image







      How to Make Blogger Safelink Converter v3           Understanding What is Safelink on blogger or wordpress ?   Safelink is one option blogs download or url redirect is used by many people, because of the benefits and usefulness Safelink itself is to increase the revenue from advertising on the Internet and put it on the blog Safelink, aims to secure your link and show your ads on the blog Safelink that, with the help of base64 allow your link to be safe as before leads to the link destination, the link to the blog Safelink beforehand, so automatically the link will be converted via javascript, without having we convert it, so it is highly of banned google adsense if the Safelink blog for your own personal or blog.     In contrast, if you use the url Shorte or from Safelink adfly heading other blogs first, because we are going to create your own blog as a blog on without having to enter the url because it can automatically put a link in addition to the url internal, or we can choo








Read more












List of weapon buff materials, effects and how it can be durango wild lands









By







-














Image







                Weapons are one of the most important elements in durango games,         whatever we do in the game definitely requires weapons. whether it's         fighting, taming dinosaurs, collecting materials to make items done         with weapons and tools.                   therefore almost most of the durango players end up choosing wpc as         their main job.                   but there are many things you need to know in making weapons, one of         them is a buff.            there are many types of buffs for weapons in this game, all buffs are     divided into 3 ie buff (marked in yellow) debuff (marked by ash) rare buff     (marked in green).       well this time we will discuss the yellow and gray buff, for the green buff     I have previously discussed so you can directly read it by clicking the     link below.                Read:                      Type of green buffer type and its effect durango wild lands                      Buff from raw materials      








Read more












Install deb package via Termux









By







-














Image







     Packages are manually  installed via the    dpkg  command (Debian Package Management System). dpkg  is the backend to commands like    apt-get  and aptitude , which in turn are the     backend for GUI install apps like the Software Center and Synaptic.       Something along the lines of:       dpkg      --> apt-get , aptitude  --> Synaptic,     Software Center       But of course the easiest ways to install a package would be, first, the     GUI apps (Synaptic, Software Center, etc..), followed by the terminal     commands apt-get  and aptitude  that add a very     nice user friendly approach to the backend dpkg, including but not limited     to packaged dependencies, control over what is installed, needs update, not     installed, broken packages, etc.. Lastly the dpkg command which     is the base for all of them.       Since dpkg is the base, you can use it to install packaged directly from     the command line.       Install a package  sudo dpkg -i DEB_PACKAGE       For 








Read more