04/10/2018, 20:10

Hiển thị lịch đơn giản với HTML5 và CSS3

Thông thường thì rất hiếm khi chúng ta bắt gặp những website hoặc blog nào hiển thị lịch trên trang web , tuy nhiên, sẽ rất là hữu ích nếu các ban tạo các web app. Bài viết mà mình giới thiệu cho các bạn ngày hôm nay sẽ là sự kết hợp giữa HTML5 và CSS3, qua bài viết này, các bạn cũng có thể hiểu ...

Thông thường thì rất hiếm khi chúng ta bắt gặp những website hoặc blog nào hiển thị lịch trên trang web , tuy nhiên, sẽ rất là hữu ích nếu các ban tạo các web app. Bài viết mà mình giới thiệu cho các bạn ngày hôm nay sẽ là sự kết hợp giữa HTML5 và CSS3, qua bài viết này, các bạn cũng có thể hiểu và sử dụng thẻ time trong HTML5.

Hiển thị lịch đơn giản với HTML5 và CSS3

Xem Demo | Download

HTML

Chúng ta sẽ sử dụng thẻ time để tạo lịch theo cấu trúc html như sau :

 
<time datetime="2014-09-20" class="icon">
  <em>Saturday</em>
  <strong>September</strong>
  <span>20</span>
</time>

CSS

Trong đoạn css bên dưới, chúng ta cũng nhờ sự trợ giúp của css3 để tạo hiệu ứng chuyển động cho tờ lịch.

time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  awidth: 7em;
  height: 7em;
  background-color: #fff;
  margin: 2em auto;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(0deg) skewY(0deg);
  -webkit-transform-origin: 50% 10%;
  transform-origin: 50% 10%;
}

time.icon *
{
  display: block;
  awidth: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}

time.icon span
{
  awidth: 100%;
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

time.icon:hover, time.icon:focus
{
  -webkit-animation: swing 0.6s ease-out;
  animation: swing 0.6s ease-out;
}

@-webkit-keyframes swing {
  0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
  20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
  60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
  80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
  100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
}

@keyframes swing {
  0%   { transform: rotate(0deg)  skewY(0deg); }
  20%  { transform: rotate(12deg) skewY(4deg); }
  60%  { transform: rotate(-9deg) skewY(-3deg); }
  80%  { transform: rotate(6deg)  skewY(-2deg); }
  100% { transform: rotate(0deg)  skewY(0deg); }
}

Đây chỉ là một bài viết nhỏ giúp các bạn có thêm chút kiến thức cho ngày cuối tuần, chúc các bạn có một ngày nghỉ vui vẻ bên gia đình và bạn bè.

Tags: Calendar css3

Chuyên Mục: Css, HTML5

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

Bài liên quan

Hiển thị lịch đơn giản với HTML5 và CSS3

Thông thường thì rất hiếm khi chúng ta bắt gặp những website hoặc blog nào hiển thị lịch trên trang web , tuy nhiên, sẽ rất là hữu ích nếu các ban tạo các web app. Bài viết mà mình giới thiệu cho các bạn ngày hôm nay sẽ là sự kết hợp giữa HTML5 và CSS3, qua bài viết này, các bạn cũng có thể hiểu ...

Hoàng Hải Đăng viết 20:10 ngày 04/10/2018

Tạo Registration Form đơn giản với jQuery và CSS3

Nếu các bạn cần làm trang đăng ký thành viên cho website hay blog của mình, thì hôm nay mình xin chia sẻ cho các bạn một mẫu form đơn giản nhưng có đầy đủ chức năng cần thiết cho việc tạo thành viên. Mẫu form này sử dụng plugin progression.js , các bạn có thể donwload plugin này ở phần demo hoặc ...

Hoàng Hải Đăng viết 20:06 ngày 04/10/2018

Xây dựng một RestFul API đơn giản với python và Flask

Việc xây dựng 1 API trong python là khá dễ dàng. Trong bài viết này, chúng ta sẽ cùng tạo ra một REST API đơn giản bằng python với sự hỗ trợ của Flask Framework. Thiết kế REST hay RESTful API (State Representational State Transfer) được thiết kế để tận dụng các giao thức hiện có. Mặc dù REST có ...

Hoàng Hải Đăng viết 17:32 ngày 12/08/2018

Hướng dẫn xây dựng API đơn giản với Nodejs và Mysql

Khởi tạo project Requirement Nodejs 6.x Express 4.x Mysql 5.x Cài đặt Install npm npm init npm install Install express npm install express --save npm install express-generator -g express -h express --view=pug Chạy app với lệnh sau: Trên hệ điều hành MacOS hoặc ...

Trịnh Tiến Mạnh viết 17:21 ngày 12/08/2018

Xây dựng ứng dụng đơn giản với ReactJS và Laravel

Xin chào các bạn, hôm nay mình sẽ tiếp tục làm ví dụ đơn giản làm App Todo cho Reactjs với RESTful sử dụng Laravel. Nội dung Khởi tạo server bằng Laravel Step 1: Khởi tạo project: $ composer create-project --prefer-dist laravel/laravel laract "5.5.*" Ở đây mình sử dụng Laravel 5.5 ...

Trịnh Tiến Mạnh viết 17:16 ngày 12/08/2018
0