HTML5 practice-use CSS to create a time icon

Recently I have re-designed my blog site and decided to display the time with a calendar icon. In the past, the solution generally used background images. Thanks to css3. Now we can use css3 to implement this function. I will use some linear-gradients, border radius and box shadow attributes to replace the previous Photoshop design.

 

Photoshop concept Diagram

 

Many designers adopt a direct design method on the browser, but I prefer the concept map method of Photoshop first. Although many effects can be directly implemented using CSS, it is much easier to design effects using Photoshop than to constantly try to modify CSS to achieve the desired effect.

First, create a rounded rectangle and set the radius of the rounded corner to 10px. Then, use the border-radius attribute of CSS.

Add a vertical gradient to the rectangle. The gradient color ranges from # dad8d8 to # fcfcfc.

Set the stroke of 1 pixel. The color is # e3e3e3

Add the shadow effect to the bottom. The transparency is 20%, the distance from 0 pixels and the size of 15 pixels. These effects will be implemented using the box-shadow attribute in CSS.

Copy the rectangle and remove the above part. Modify the gradient. The color ranges from #790909 to # d40000. Fill in the newly created rectangle. This part will contain the month information.

Set an inner shadow to indicate the upper border. The color is # a13838, 100% transparency, 3px distance, and 0px size.

Use Photoshop's font tool to set the font effect of the last part of the calendar icon. The font is Helvetica and the color is # 9e9e9e.

Enter the month information in the red section below. The font is set to width and the color is white.

The Photoshop model is complete. In the past, we would extract the image as the background and write HTML numbers on it, but now all these can be implemented using CSS.

 

HTML Structure

<div class="date">    <p>25 <span>May</span></p></div>

The HTML of the icon DEMO at this time is very simple. We use the DIV with the class 'date' as the container, and then use a p label to represent the date number. The day and month are represented by characters of different sizes in our design, so we treat different elements differently using the <span> label.

 

CSS style

.date {    width: 130px; height: 160px;    background: #fcfcfc;    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);}

 

 

CSS style first sets the height and width of the entire container. Gradient of CSS can easily achieve the gradient effect.

.date {    width: 130px; height: 160px;    background: #fcfcfc;    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);    border: 1px solid #d2d2d2;    border-radius: 10px;    -moz-border-radius: 10px;    -webkit-border-radius: 10px;}

 

 

You can use the border attribute to achieve the effect of a 1px border in Photoshop, and then use the border-radius to achieve the effect of rounded corners. Do not forget to add the-moz-and-WebKit-prefixes to achieve compatibility with older browsers.

.date {    width: 130px; height: 160px;    background: #fcfcfc;    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);    border: 1px solid #d2d2d2;    border-radius: 10px;    -moz-border-radius: 10px;    -webkit-border-radius: 10px;    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);    -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);    -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);}

 

 

The last part of the code implements the shadow effect in Photoshop design through box-Shadow. Add the horizontal and vertical offset of 0px to increase the Blur degree of 15px. Use rgba to control transparency. In Photoshop design, 105 is changed to 0.1.

.date p {    font-family: Helvetica, sans-serif;    font-size: 100px; text-align: center; color: #9e9e9e;}

 

 

We use the P label to define a style to define a text style for a date. The font, text size, and text color are all copied from Photoshop, and the text-align is set to center. However, the style also affects the month text. Next we will define the span label style for it separately.

.date p span {    background: #d10000;    background: linear-gradient(top, #d10000 0%, #7a0909 100%);    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);}

 

 

The red part is implemented by setting the linear-gradient attribute for the span background. The red value also comes from Photoshop.

.date p span {    background: #d10000;    background: linear-gradient(top, #d10000 0%, #7a0909 100%);    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;    display: block;}

 

 

Modify the text style to match the design. Set the size to 45px, bold, and white. Use text-transform to convert the text in uppercase. Set the span label as a block element so that it matches the container size and sets the red background.

.date p span {    background: #d10000;    background: linear-gradient(top, #d10000 0%, #7a0909 100%);    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;    display: block;    border-top: 3px solid #a13838;    border-radius: 0 0 10px 10px;    -moz-border-radius: 0 0 10px 10px;    -webkit-border-radius: 0 0 10px 10px;    padding: 6px 0 6px 0;}

 

 

The rest is to add the header border and implement it with the border-top style, and use the border-radius attribute to implement the lower two rounded corners. A little bit of padding can separate the text of a month from other elements.

 

Browser compatibility

 

Although CSS improved attributes can help us achieve gradient and shadow effects in Photoshop, we still have to face the problems that web designers have to face before, browser compatibility.

 

Address: http://line25.com/tutorials/how-to-create-a-cool-blog-post-date-icon-with-css