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.

css3, form tìm kiếm, search form, css, thu thuat css

 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%;

  width: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;

    width: 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;

    width: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.