quang cao hosting

Hướng dẫn Tạo Form đẹp mắt với HTML5 và CSS3 Transitions

Xem: 7059    Tải: 32   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

4 điểm   ( 9 đánh giá ) File đã được kiểm thử
Miễn Phí [megacode]huong-dan-tao-form-dep-mat-voi.rar (3.85 KB)
Tải miễn phí
Xem Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-form-dep-mat-voi.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Với sự có mặt của CSS3 transition thì giao diện web đã được cải tiến đáng kể với những hiệu ứng động mà không cần phải dùng đến JavaScript. Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn một cách làm form đẹp mắt bằng các thẻ input của HTML5 và sử dụng CSS3 :valid pseudo class để làm hiệu ứng đẹp và sinh động hơn rất nhiều.

Với sự có mặt của CSS3 transition thì giao diện web đã được cải tiến đáng kể với những hiệu ứng động mà không cần phải dùng đến JavaScript. Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn một cách làm form đẹp mắt bằng các thẻ input của HTML5 và sử dụng CSS3 :valid pseudo class để làm hiệu ứng đẹp và sinh động hơn rất nhiều.

Bước 1 : HTML Markup
Đầu tiên chúng ta sẽ xây dựng bộ khung HTML Form chuẩn như sau :

<form id="contactform" name="contact" method="post" action="#">
  <p class="note"><span class="req">*</span> Asterisk fields are required</p>
  <div class="row">
    <label for="name">Your Name <span class="req">*</span></label>
    <input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="Steve Jobs" required>
  </div>
 
  <div class="row">
    <label for="email">E-mail Address <span class="req">*</span></label>
    <input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="address@domain.com" required>
  </div>
 
  <div class="row">
    <label for="subject">Subject <span class="req">*</span></label>
    <input type="text" name="subject" id="subject" class="txt" tabindex="3" placeholder="Advertising/Press Ideas" required>
  </div>
 
  <div class="row">
    <label for="message">Message <span class="req">*</span></label>
    <textarea name="message" id="message" class="txtarea" tabindex="4" required></textarea>
  </div>
 
  <div class="center">
    <input type="submit" id="submitbtn" name="submitbtn" tabindex="5" value="Send Message">
  </div>
</form>

Bước 2 : Định dạng CSS

Chúng ta sẽ định dạng Form với đoạn css sau :

/* form styles */
form .row {
  display: block;
  padding: 7px 8px;
  margin-bottom: 7px;
}
form .row:hover {
  background: #f1f7fa;
}
 
form label {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  width: 120px;
  padding: 6px 0;
  color: #464646;
  vertical-align: top;
}
form .req { color: #ca5354; }
 
form .note {
  font-size: 1.2em;
  line-height: 1.33em;
  font-weight: normal;
  padding: 2px 7px;
  margin-bottom: 10px;
}
 
form input:focus, form textarea:focus { outline: none; }
 
/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; }           /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; }          /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #aaafbd; font-style: italic; }      /* Internet Explorer 10+ */

Bước 3 : Tạo hiệu ứng động Transitions

Kế tiếp chúng ta sẽ định dạng css cho các thẻ input và textarea thông qua 2 class là .txt và .txtarea

form .txt {
  display: inline-block;
  padding: 8px 9px;
  padding-right: 30px;
  width: 240px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-image: url('images/checkmark.png');
  background-position: 110% center;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
 
form .txtarea {
  display: inline-block;
  padding: 8px 11px;
  padding-right: 30px;
  width: 320px;
  height: 120px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-image: url('images/checkmark.png');
  background-position: 110% 4%;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

Sau đó chúng ta sẽ tạo hiệu ứng khi người dùng nhấp vào các thẻ input như sau :

form .txt:focus, form .txtarea:focus {
  width: 300px;
  color: #545454;
  background-color: #fff;
  background-position: 110% center;
  background-repeat: no-repeat;
  border-color: #059;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
}
form .txtarea:focus {
  width: 375px;
  background-position: 110% 4%;
}
 
form .txt:valid {
  background-color: #deecda;
  background-position: 98% center;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txtarea:valid {
  background-color: #deecda;
  background-position: 98% 4%;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txt:focus:valid, form .txtarea:focus:valid {
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
}

Cuối cùng là chúng ta sẽ định dạng cho nút submit :

#submitbtn {
  height: 70px;
  width: 275px;
  padding: 0;
  cursor: pointer;
  font-family: 'Oxygen', Arial, sans-serif;
  font-size: 2.0em;
  color: #0a528f;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.65);
  border-width: 1px;
  border-style: solid;
  border-color: #317bd6 #3784e3 #2d74d5 #3774e3;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #4581e5;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6faefd), to(#4581e5));
  background-image: -webkit-linear-gradient(top, #6faefd, #4581e5);
  background-image: -moz-linear-gradient(top, #6faefd, #4581e5);
  background-image: -ms-linear-gradient(top, #6faefd, #4581e5);
  background-image: -o-linear-gradient(top, #6faefd, #4581e5);
  background-image: linear-gradient(top, #6faefd, #4581e5);
  -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
#submitbtn:hover, #submitbtn:focus {
  -webkit-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
  -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
  box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
}
 
#submitbtn:active {
  -webkit-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  box-shadow: 0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
}

Các bạn thấy đó, chỉ vài bước thưc hiện đơn giản là chúng ta đã có ngay một form đẹp và cực cool rồi, chỉ cần copy và past vào bên trong các form trên các website của các bạn là có thể sử dụng được. Mình hy vọng với bài viết này, sẽ có thể mang lại cho các bạn một chút kinh nghiệm về CSS3 Transitions và HTML5.

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

Hướng dẫn Tạo Form đẹp mắt với HTML5 và CSS3 Transitions

Hướng dẫn Tạo Form đẹp mắt với HTML5 và CSS3 Transitions Đăng ngày 14-08-2014  Với sự có mặt của CSS3 transition thì giao diện web đã được cải tiến đáng kể với những hiệu ứng động mà không cần phải dùng đến JavaScript. Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn một cách làm form đẹp mắt bằng các thẻ input của HTML5 và sử dụng CSS3 :valid pseudo class để làm hiệu ứng đẹp và sinh động hơn rất nhiều. 0.44444444444444/10 7059

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Số di động (Hotline): 085.99999.25
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: 085.99999.25;