Cực cool với mẫu form tìm kiếm bằng CSS3

Hôm nay mình sẽ tranh thủ giơi thiệu cho các bạn một mẫu form tìm kiếm rất cool , có thể dùng ngay cho website hay blog của các bạn. Mẫu form tìm kiếm này được làm hoàn toàn bằng CSS3 , nên rất đơn giản và dễ thực hiện.

Xem Demo | Download

HTML

Đưới đây là html markup cho việc tạo form tìm kiếm :

<form class="searchform cf">
  <input type="text" placeholder="Is it me you’re looking for?">
  <button type="submit">Search</button>
</form>

CSS

Sau đó các bạn định dạng form với đoạn css sau :

/*--------------------------------------------------------------
1.0 - BASE SITE STYLES
--------------------------------------------------------------*/
*,*:after,*:before {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

body {
  background: #3aaae8;
  color: #fff;
  font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
a,a:visited {
  color:#fff
}

/*--------------------------------------------------------------
2.0 - SEARCH FORM
--------------------------------------------------------------*/
.searchform {
  background:#f4f4f4;
  background:rgba(244,244,244,.79);
  border: 1px solid #d3d3d3;
	left: 50%;
  padding: 2px 5px;
  position: absolute;
	margin: -22px 0 0 -170px;
	top: 50%;
  awidth:339px;
  box-shadow:0 4px 9px rgba(0,0,0,.37);
  -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
  -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
}

.searchform input, .searchform button {
	float: left
}
.searchform input {
	background:#fefefe;
	border: none;
	font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	margin-right: 5px;
	padding: 10px;
	awidth: 216px;
	box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px
}
	.searchform input:focus {
		outline: none;
		box-shadow:0 0 4px #0d76be inset;
		-moz-box-shadow:0 0 4px #0d76be inset;
		-webkit-box-shadow:0 0 4px #0d76be inset;
	}
	.searchform input::-webkit-input-placeholder {
  	font-style: italic;
  	line-height: 15px
	}

	.searchform input:-moz-placeholder {
	  font-style: italic;
  	line-height: 15px
	}

.searchform button {
	background: rgb(52,173,236);
	background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)), color-stop(100%,rgba(38,145,220,1)));
	background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
	background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
	background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
	background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
	border: none;
	color:#fff;
	cursor: pointer;
	font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	padding: 10px;
	awidth:106px;
	box-shadow: 0 0 2px #2692dd inset;
	-moz-box-shadow: 0 0 2px #2692dd inset;
	-webkit-box-shadow: 0 0 2px #2692dd inset;
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
}
	.searchform button:hover {
		opacity:.9;
	}

Thế là xong, từ giờ các bạn chỉ việc nhúng đoạn html và css ở bên trên là có ngay một form tìm kiếm đẹp mắt và cực cool cho website hay blog của mình rồi.

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

Chuyên Mục: Css

Bài viết được đăng bởi webmaster