ECOSYSTEM VIET NAM

passion creative

Tạo Form Tìm Kiếm Tuyệt Đẹp Bằng CSS3

Posted by millionking on February 14, 2014

HTML

Trước khi gõ code HTML, hãy chú ý hai thuộc tính placeholder và required. Đây là hai thuộc tính quan trọng khi tạo form tìm kiếm của HTML5.

1 <form class="form-wrapper">
2    <input id="search" type="text" />
3    <input id="submit" type="submit" value="go" />
4 </form>

CSS

01 .form-wrapper {
02    width450px;
03    padding8px;
04    margin100px auto;
05    overflowhidden;
06    border-width1px;
07    border-stylesolid;
08    border-color#dedede #bababa #aaa #bababa;
09    -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb0 4px 0 #aaa05px 5px #444;
10    -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb0 4px 0 #aaa,0 5px 5px #444;
11    box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb0 4px 0 #aaa0 5px5px #444;     
12    -moz-border-radius: 10px;     
13    -webkit-border-radius: 10px;    
14    border-radius: 10px;    
15    background-color#f6f6f6;    
16    background-image: -webkit-gradient(linear, left topleft bottom, from(#f6f6f6), to(#eae8e8));    
17    background-image: -webkit-linear-gradient(top#f6f6f6#eae8e8);     
18    background-image: -moz-linear-gradient(top#f6f6f6#eae8e8);     
19    background-image: -ms-linear-gradient(top#f6f6f6#eae8e8);    
20    background-image: -o-linear-gradient(top#f6f6f6#eae8e8);     
21    background-image: linear-gradient(top#f6f6f6#eae8e8);}            
22
23 .form-wrapper #search {
24    width330px;
25    height20px;
26    padding10px 5px;
27    floatleft;
28    fontbold 16px 'lucida sans''trebuchet MS''Tahoma';     
29    border1px solid #ccc;     
30    -moz-box-shadow: 0 1px 1px #ddd inset0 1px 0 #fff;
31    -webkit-box-shadow: 0 1px 1px #ddd inset0 1px 0 #fff;
32    box-shadow: 0 1px 1px #ddd inset0 1px 0 #fff;
33    -moz-border-radius: 3px;    
34    -webkit-border-radius: 3px;     
35    border-radius: 3px;}       
36
37 .form-wrapper #search:focus {
38    outline0;
39    border-color#aaa;
40    -moz-box-shadow: 0 1px 1px #bbb inset;
41    -webkit-box-shadow: 0 1px 1px #bbb inset;
42    box-shadow: 0 1px 1px #bbb inset;}
43
44 .form-wrapper #search::-webkit-input-placeholder {
45    color#999;
46    font-weightnormal;}
47
48 .form-wrapper #search:-moz-placeholder {
49    color#999;
50    font-weightnormal;}
51
52 .form-wrapper #search:-ms-input-placeholder {
53    color#999;
54    font-weightnormal;}
55
56 .form-wrapper #submit {
57    floatright;
58    border1px solid #00748f;
59    height42px;
60    width100px;
61    padding0;
62    cursorpointer;
63    fontbold 15px ArialHelvetica;
64    color#fafafa;
65    text-transformuppercase;
66    background-color#0483a0;
67    background-image: -webkit-gradient(linear, left topleft bottom, from(#31b2c3), to(#0483a0));
68    background-image: -webkit-linear-gradient(top#31b2c3#0483a0);     
69    background-image: -moz-linear-gradient(top#31b2c3#0483a0);
70    background-image: -ms-linear-gradient(top#31b2c3#0483a0);
71    background-image: -o-linear-gradient(top#31b2c3#0483a0);
72    background-image: linear-gradient(top#31b2c3#0483a0);
73    -moz-border-radius: 3px;     
74    -webkit-border-radius: 3px;
75    border-radius: 3px;
76    text-shadow0 1px 0 rgba(00 ,0, .3);
77    -moz-box-shadow: 0 1px 0 rgba(2552552550.3inset0 1px 0 #fff;
78    -webkit-box-shadow: 0 1px 0 rgba(2552552550.3inset0 1px 0 #fff;
79    box-shadow: 0 1px 0 rgba(2552552550.3inset0 1px 0 #fff;}
80
81 .form-wrapper #submit:hover, .form-wrapper #submit:focus {
82    background-color#31b2c3;
83    background-image: -webkit-gradient(linear, left topleft bottom, from(#0483a0), to(#31b2c3));
84    background-image: -webkit-linear-gradient(top#0483a0#31b2c3);     
85    background-image: -moz-linear-gradient(top#0483a0#31b2c3);
86    background-image: -ms-linear-gradient(top#0483a0#31b2c3);
87    background-image: -o-linear-gradient(top#0483a0#31b2c3);
88    background-image: linear-gradient(top#0483a0#31b2c3);}
89
90 .form-wrapper #submit:active {
91    outline0;     
92    -moz-box-shadow: 0 1px 4px rgba(0000.5inset;
93    -webkit-box-shadow: 0 1px 4px rgba(0000.5inset;
94    box-shadow: 0 1px 4px rgba(0000.5inset;}
95
96 .form-wrapper #submit::-moz-focus-inner {
97    border0;}

Chúc các bạn thành công!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: