Kako Kreirati CSS3 Expanding Search Box

Live Demo

U HTML/JavaScript dodajte ovaj kod:

<form id="searchform" name="searchform" method="get" action="index.html"> <div class="fieldcontainer"> <input type="text" name="s" id="s" class="searchfield" placeholder="Keywords..." tabindex="1"> <input type="submit" name="searchbutton" id="searchbutton" value=""> </div></form>

Sad idite ovde ( Template Designer)

Tu dodajte sledeće Css kodove:
1. CSS 1
::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; font-style: italic; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; font-style: italic; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; font-style: italic; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #ccc !important; font-style: italic; } #searchform { display: block; margin-bottom: 15px; } .fieldcontainer { display: block; position: relative; width: 90%; margin: 0 auto; } .searchfield { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 45%; padding: 11px 7px; padding-right: 43px; background-color: #fff; font-size: 1.6em; color: #ccc; border: 1px solid #c8c8c8; border-bottom-color: #d2e2e7; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } .searchfield:focus { width: 100%; color: #666; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0; }

2. CSS 2
#searchbutton { position: absolute; right: 380px; top: 5px; height: 52px; width: 52px; border: 0; cursor: pointer; zoom: 1; filter: alpha(opacity=65); opacity: 0.65; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUcI2gvu_64NJ2Xqevvgvrl7thIBSjQrRDW1epdRxca5eOsCiYFHDTEIP2JpDuGslnVszjrF8sbRChC5r5VCkxHMLBvtc9as9wsASlsjBNZt9bAxyEXjU6bq4QYSh2y8TNr9CXvnO0A56/s1600/search+icon.png) top left no-repeat; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } #searchbutton:hover, #searchbutton:focus { filter: alpha(opacity=90); opacity: 0.9; } .searchfield:focus + #searchbutton { right: 10px; /* adjust button position as the field expands */ }

Nemam puno šta da dodam pa ako vam se svidja i može da vam koristi, biće mi drago a ako ne umete da instalirate, javite se da rešimo problem ili jednostavno koristite običan Search Box, kao ja. To nije toliko neophodno da izgleda lepo ako već imate, važno je da obavlja funkciju koju ima. Ali pazite kako instalirate, to uvek napominjem radi vas jer i ja imam problem ponekad sa puno iskustva a ovo je za početnike i kako da uspešno krenu u bloging.
I tako to....srećan pos'o