Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use HTML5 and CSS3 to make calendar icons", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, to study and learn "how to use HTML5 and CSS3 to make calendar icons" bar!

Alternative scheme

A few years ago we might need to use PNG or FIG images to do this. You can continue to use this scheme now, but it has many shortcomings, is not easy to modify, cannot be included in search, and cannot be scaled. A better solution is to use SVG. The solution for using SVG will be very flexible, but we don't need to use SVG.

So, I'm going to use the HTML5 element time that not many people know about. It is used to show the date or time-it may be a calendar or a holiday. Here is the simplest syntax for using the time element (9:01, September 20, 2014):

2014-09-20T21:01:00Z

You can write specific to the day: 2014-09-20, to the month: 2014-09 the latter to the year: 2014. The Z at the end represents coordinated Universal time (UTC). You can replace it with your own time zone, such as + 01:00,-06:00, etc.

Although such an event format is suitable for machine reading, it is not easy for people to understand. So, you can add a datetime attribute to the time element, put your date or time in it, use something easier to understand, internationalize, and so on.

9:01pm, Saturday September 20th, 2014

When using microdata or microformats, you need to carefully consider the time element.

HTML of the calendar icon

Use the following HTML to form our calendar icon:

Saturday

September

twenty

Add the style "icon" to the time element.

I use em, strong, and span elements to represent the day, month, and day of the week, making it easy to define CSS styles. They are all non-semantic in-line elements, so no other styles are required, and the date is readable. Of course, you can also use other elements as needed.

CSS of the calendar icon

Let's first define the icon perimeter style:

Time.icon

{

Font-size: 1em; / * change icon size * /

Display: block

Position: relative

Width: 7em

Height: 7em

Background-color: # fff

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

}

The width and height of the icon are 7em, so we can set the font to any size and the icon will be scaled accordingly. Just try it!

The multi-page effect at the bottom of the icon is achieved using multiple box-shadow styles. I initially considered using pseudo classes, but this didn't work because we defined overflow:hidden (cutting out the fillet of the month at the top).

We set position to relative while locating the inline elements in it. Let me add the basic style to them:

Time.icon *

{

Display: block

Width: 100%

Font-size: 1em

Font-weight: bold

Font-style: normal

Text-align: center

}

The wildcard * selector allows multiple elements in the icon to use the same style. There should be no problem, but if your calendar has a different layout, you may need to be more specific.

Define the style of the month:

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

}

Place the bar at the top of the icon and use the dotted border to achieve the effect of a sewing thread. The monthly bar should be over the edge of the sewing thread, so I used a box-shadow below.

The week is placed at the bottom of the icon:

Time.icon em

{

Position: absolute

Bottom: 0.3em

Color: # fd9f1b

}

Zoom in on the positioning date:

Time.icon span

{

Font-size: 2.8em

Letter-spacing:-0.05em

Padding-top: 0.8em

Color: # 2f2f2f

}

Finally, I added a little animation that wobbles when your mouse rolls over the icon-but I'll leave the work to you and you can do it yourself.

Thank you for your reading, the above is the content of "how to use HTML5 and CSS3 to make calendar icons". After the study of this article, I believe you have a deeper understanding of how to use HTML5 and CSS3 to make calendar icons. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.