Kako uraditi Search form?
2 posters
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
Kako uraditi Search form?
Želite da imate Search formu na web stranici, forumi, apsolutno nebitno gde. Pokaću vam kako da odradite ovakav Search form:
[You must be registered and logged in to see this image.]
Morate pre svega shvatiti kako funkcioniše Search forma.
[You must be registered and logged in to see this image.]
Imamo HTML kod:
Sada idemo na estetiku koju svi mi volimo:
[You must be registered and logged in to see this image.]
Sada je došlo vreme da sredimo TextBox i Button i na taj način imamo kul izgled jedne Search forme.
Kod:
Izgled:
[You must be registered and logged in to see this image.]
Sada izgleda prekrasno.
Browseri koji podržavaju ove kodove:
* Firefox 3.7+
* Safari 4.0+
* Chrome 4.0+
* Opera 11+
Opera 11 podržava placeholders pa s toga vaš CSS kod mora imati i ovo:
DEMO: [You must be registered and logged in to see this link.]
Tutorial by Catalin Rosu a.k.a Red
Prevedeno sa Engleskog: System32
[You must be registered and logged in to see this image.]
Morate pre svega shvatiti kako funkcioniše Search forma.
[You must be registered and logged in to see this image.]
- Kod:
<input type="text">
- Kod:
<input type="submit">
- Kod:
<form>
Imamo HTML kod:
- Kod:
<form id="searchbox" action="">
<input id="search" type="text" placeholder="Type here">
<input id="submit" type="submit" value="Search">
</form>
Sada idemo na estetiku koju svi mi volimo:
- Kod:
#searchbox
{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden; /* Clear floats */
}
[You must be registered and logged in to see this image.]
Sada je došlo vreme da sredimo TextBox i Button i na taj način imamo kul izgled jedne Search forme.
Kod:
- Kod:
#search, #submit
{
float: left;
}
#search
{
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
/* ----------------------- */
#submit
{
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}
#submit:active
{
background: #95d788;
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
border: 0; /* Small centering fix for Firefox */
}
Izgled:
[You must be registered and logged in to see this image.]
Sada izgleda prekrasno.
Browseri koji podržavaju ove kodove:
* Firefox 3.7+
* Safari 4.0+
* Chrome 4.0+
* Opera 11+
Opera 11 podržava placeholders pa s toga vaš CSS kod mora imati i ovo:
- Kod:
#search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}
#search:-moz-placeholder {
color: #9c9c9c;
font-style: italic;
}
DEMO: [You must be registered and logged in to see this link.]
Tutorial by Catalin Rosu a.k.a Red
Prevedeno sa Engleskog: System32
Mr.Joker- Administrator
- Broj poruka : 1709
D4U Novac : 1871
Reputacija : 31
Godina : 31
Lokacija : Svet Foruma
Poso/dokolice : Programiranje
Re: Kako uraditi Search form?
Nema na čemu
Mr.Joker- Administrator
- Broj poruka : 1709
D4U Novac : 1871
Reputacija : 31
Godina : 31
Lokacija : Svet Foruma
Poso/dokolice : Programiranje
Similar topics
» Custom search bar
» Kako koristiti java skriptu?
» Kako postaviti baner u headeru?
» Kako promeniti boju selektovanog texta
» Kako skloniti "Konektovan kao [USERNAME]"
» Kako koristiti java skriptu?
» Kako postaviti baner u headeru?
» Kako promeniti boju selektovanog texta
» Kako skloniti "Konektovan kao [USERNAME]"
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu
|
|