04/10/2018, 20:11

Tạo mẫu flat checkbox animation với CSS3

Bỏ qua những kiểu check box lỗi thời, hãy dành thời gian chỉnh sửa lại các checkbox, nếu như trang web của các bạn đang dùng tới nó. Kiểu checkbox mà mình chia sẻ cho các bạn trong bài viết này được thực hiện hoàn toàn bằng CSS3, do đó rất dễ chỉnh sửa và rất nhẹ cho trang web hay blog sử dụng. ...

Bỏ qua những kiểu check box lỗi thời, hãy dành thời gian chỉnh sửa lại các checkbox, nếu như trang web của các bạn đang dùng tới nó. Kiểu checkbox mà mình chia sẻ cho các bạn trong bài viết này được  thực hiện hoàn toàn bằng CSS3, do đó rất dễ chỉnh sửa và rất nhẹ cho trang web hay blog sử dụng.

Tạo mẫu flat checkbox animation với CSS3

Xem Demo | Download

HTML

Để có thể tuỳ chỉnh mặc định hiển thị của checkbox, thủ thuật ở đây là đặt nó nằm bên trong thẻ label như sau :

<label>
  <input type="checkbox">
  <span>Flat checkbox</span> 
</label>

CSS

Và đoạn css sau sẽ định dạng cũng như tạo hiệu ứng đơn giản cho checkbox.

label {
  margin: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1rem;
  height: 1rem;
  background: inherit;
}

input {
  background: tra;
  position: relative;
  cursor: pointer;
  awidth: 1.2rem;
  height: 1.2rem;
 margin-right: .4rem;
  background: inherit;
}

input:before {
  content: "";
  position: absolute;
  awidth: 1.2rem;
  height: 1.2rem;
  background: inherit;
  cursor: pointer;
}

input:after {
  content: "";
  transition: .4s ease-in-out;
  position: absolute;
  z-index: 1;
  awidth: 1rem;
  height: 1rem;
 border: .1rem solid rgba(200, 200, 200, .3);
}

input:checked:after {
  transform: rotate(-45deg);
 height: .5rem;
  border-color: #43A047;
  border-top-color: transparent;
  border-right-color: transparent;
}

.anim input:checked:after {
  transform: rotate(-45deg);
 height: .5rem;
  /* border-color: #43A047; */
  border-color: transparent;
  border-right-color: transparent;
  animation: .4s rippling .4s ease;
  animation-fill-mode: forwards;
}


 @keyframes 
rippling { 50% {
 border-left-color: #43A047;
}
 100% {
 border-bottom-color: #43A047;
 border-left-color: #43A047;
}
}

Hy vọng các bạn sẽ thích mẫu thiết kế này.

Tags: checkbox css3

Chuyên Mục: Css

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

Bài liên quan

Tạo mẫu flat checkbox animation với CSS3

Bỏ qua những kiểu check box lỗi thời, hãy dành thời gian chỉnh sửa lại các checkbox, nếu như trang web của các bạn đang dùng tới nó. Kiểu checkbox mà mình chia sẻ cho các bạn trong bài viết này được thực hiện hoàn toàn bằng CSS3, do đó rất dễ chỉnh sửa và rất nhẹ cho trang web hay blog sử dụng. ...

Trần Trung Dũng viết 2 tuần trước

Tạo hiệu ứng quảng cáo với CSS3

Việc tạo những mẫu giảm giá hoặc các thông tin khuyến mại nhằm thu hút người dùng ngay từ các nhìn đầu tiên sẽ giúp cho doanh số bán hàng của khách hàng các bạn sẽ tăng lên rõ rệt. Hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng chạy quảng cáo mà chúng ta thường thấy trên các trang web bán hàng. ...

Vũ Văn Thanh viết 2 tuần trước

Click Effect : Tạo hiệu ứng click chuột với CSS3

Có đôi lúc chúng ta cũng cần phải tạo một vài hiệu ứng click chuột để tạo cảm giác “Pro” cho người dùng. Nếu các bạn không thích sử dụng flash hoặc các đoạn script tạo hiệu ứng, thì thử dùng hiệu ứng click mà mình chia sẻ cho các bạn trong bài viết này. Với hiệu ứng này, các bạn chỉ ...

Tạ Quốc Bảo viết 2 tuần trước

Flat Login Form với CSS3 và jQuery

Mẫu thiết kế login form mà mình giới thiệu cho các bạn trong bài viết này sẽ chứa cả form cho phép người dùng đăng ký thành viên, với hiệu ứng chuyển form được làm bằng CSS3 rất sinh động và đẹp mắt. Với mẫu này, các bạn có thể học thêm được rất nhiều các thuộc tính CSS3 cũng như cách tạo hiệu ứng ...

Trần Trung Dũng viết 2 tuần trước

Thiết kế mẫu Credit Card Form với CSS3

Trong bài viết này, mình sẽ chia sẻ cho các bạn một mẫu thiết kế form dùng để nhập dữ liệu credit card, vốn là một trong những form không thể thiếu trong các trang web bán hàng hay giao dịch điện tử. Mẫu form này rất đơn giản như hình bên dưới. Xem Demo | Download HTML Đầu tiên, ...

Trịnh Tiến Mạnh viết 2 tuần trước
0