首页 > 开发 > HTML5 > 正文

使用css如何制作时间ICON方法实践

2024-09-05 07:19:51

字体：大中小

来源：转载

供稿：网友

最近我在重新设计自己的博客站点，决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片，感谢css3，现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。

photoshop 概念图

很多设计者采用直接在浏览器上设计的方式，但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现，但是用photoshop设计效果的方式比不断尝试修改css来最终达到你想要的效果的方式简单很多。

首先创建一个圆角矩形，设置圆角半径为10px，之后我们会用css的border-radius属性实现。

为矩形添加垂直方向的渐变，渐变颜色是从#dad8d8 到 #fcfcfc。

设置1像素的描边，颜色是#e3e3e3

最后添加向下的阴影效果，透明度为20%，0像素的距离和15像素的大小。这些效果在css中将会用box-shadow属性实现。

复制刚才的矩形，移除上边的部分。修改渐变，颜色从#790909 到 #d40000，填充新创建的矩形，这部分将要放置月份信息。

设置一个内阴影来表示上边框，颜色为#a13838，100%透明度，3px的距离和0px的大小。

用photoshop的字体工具设置日历icon上半部分时间内容的字体效果，字体为Helvetica，颜色为#9e9e9e。

在下面红色部分输入月份信息，字体设置为宽，颜色为白色。

photoshop的模型就完成了。以前的话，我们会把图片抽出来作为背景，再在上面写上html的数字，但是现在所有这些都可以用css实现。
HTML结构
<div class="date">
<p>25 <span>May</span></p>
</div>
这次时间ICON demo的html非常简单。我们会用带有class为‘date’的div作为容器，然后用一个p标签来表示日期数字。天和月份在我们的设计里用不同大小的字符表示，所以我们会<span>标签来区别对待不同元素。
css样式

复制代码

上一篇：浅谈three.js中的needsUpdate的应用

下一篇：HTML5实践-图片设置成灰度图

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注