Recently I was redesigning my own blog site and decided to use a calendar-style icon to display the time. The previous solution was generally to use background images. Thanks to css3, now we can implement such functions by using css3. I will use some properties such as linear-gradients, border radius and box shadow to replace the previous photoshop design.
photoshop concept diagramMany designers use the method of designing directly on the browser, but I still prefer the method of making photoshop concept diagrams first. Although many effects can be directly implemented with css now, the way of designing effects with photoshop is much simpler than the way of constantly trying to modify css to finally achieve the effect you want.
First create a rounded rectangle and set the rounded corner radius to 10px. After that, we will use the border-radius property of css.
Add a vertical gradient to the rectangle, the gradient color is from #dad8d8 to #fcfcfc.
Set a 1-pixel stroke, the color is #e3e3e3
Finally add a downward shadow effect with 20% transparency, a distance of 0 pixels and a size of 15 pixels. These effects will be implemented in CSS using the box-shadow property.
Copy the rectangle just now and remove the upper part. Modify the gradient, the color from #790909 to #d40000, fill the newly created rectangle, which will place the month information.
Set an inner shadow to represent 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 first half of the calendar icon. The font is Helvetica and the color is #9e9e9e.
Enter month information in the red section below, set the font to wide and the color to white.
The photoshop model is completed. In the past, we would take out the picture as the background and write the html numbers on it, but now all of this can be achieved with css.
HTML structure<div class=date>
<p>25 <span>May</span></p>
</div>
This time, ICON demo's html is very simple. We will use a div with class 'date' as the container, and then use a p tag to represent the date number. Days and months are represented by different sizes in our design, so we will use <span> tags to treat different elements differently.
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%);
}
The css style first sets the height and width of the entire container, and the gradient effect can be easily achieved through the css gradient.
.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;
}
Use the border attribute to achieve the 1px border effect in photoshop, and then use border-radius to achieve the rounded corner effect. Don't forget to add -moz- and -webkit- prefixes to enable 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 is to achieve the lower shadow effect in photoshop design through box-shadow. Add 0px horizontal and vertical offsets to increase the ambiguity of 15px. Use rgba to control transparency. In the photoshop design, 105 is replaced by 0.1 here.
.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}
We use the p tag to define styles to define text styles for dates. Font, text size, and text color are all copied from photoshop, and text-align is set to center. But the style also affects the month text, and 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 implementation of the red part is achieved by setting the linear-gradient attribute for the background of the span, and 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: #ffff; text-transform: uppercase;
display: block;
}
Modify the text style to match the design, set the size to 45px, set it to bold font, set the color to white, and use text-transform to implement capital conversion. Set the span tag to the block element so that it will match the size of the container and set a 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: #ffff; 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 head border, use the border-top style to implement it, and use the border-radius attribute to implement the two rounded corners at the lower part. A little padding attribute can make the month text have some spacing between up and down and other elements.
Browser compatibilityAlthough the improved properties of CSS can help us achieve the effects of gradients and shadows in photoshop, we still have to face the problems that web designers had to face in the past, browser compatibility.