CHÈN LỊCH VÀO WEB HTML

Home chèn lịch vào web html

Thông thường thì không nhiều Lúc họ bắt gặp đều website hoặc blog làm sao hiển thị lịch trên trang web , tuy nhiên, sẽ rất là có lợi trường hợp các ban chế tác những website tiện ích. Bài viết nhưng mà mình reviews cho các bạn ngày từ bây giờ đã là việc phối kết hợp giữa HTML5 với CSS3, qua bài viết này, những bạn có thể gọi với sử dụng thẻ time trong HTML5.

*

Xem Demo | Download

HTML

Chúng ta đã thực hiện thẻ time nhằm chế tạo kế hoạch theo kết cấu html nhỏng sau :

Saturday September 20CSS

Trong đoạn css dưới, bọn họ cũng nhờ việc giúp đỡ của css3 để tạo ra hiệu ứng chuyển động mang đến tờ kế hoạch.

time.icon font-size: 1em; /* change inhỏ size */ display: block; position: relative; width: 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: 1/2 10%; transform-origin: 50% 10%;time.icon * display: block; width: 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.inhỏ span width: 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;

Bạn đang xem: Chèn lịch vào web html

-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à 1 trong bài viết nhỏ dại giúp chúng ta bao gồm thêm chút kỹ năng cho một ngày cuối tuần, chúc các bạn gồm một ngày ngủ vui tươi mặt gia đình và bằng hữu.


Tags: Calendar css3

Xem thêm: Điện Thoại Tầm Trung Dưới 5 Triệu Cấu Hình Khủng Bán Chạy Nhất

Chuim Mục: Css, HTML5

Bài viết được đăng vì chưng webmaster


Nếu các bạn thấy nội dung bài viết hữu dụng thì góp bản thân Like dòng nhé !

Chia sẻ cho mình bè


Bài viết xem nhiều