Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

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!

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: