html点击图标出现日历,日历图标的纯CSS实现
今天我介绍采用纯CSS的方式来创建一个日历图标,你可以将其用在博客日志或者其它地方。自己也是学来的,但是效果是图片级的。如题所述,不在炫技,重在抛砖引玉。最终效果如下:
和从前一样,先看DEMO:
这个日历图标中使用的HTML代码异常简单,如下:
7February
我们需要用一个外围元素,在这里用的是p元素(或者使用HTML5中的新元素——TIME)。在这个外围元素中我们还需要一个包含着月份的元素。
实现原理:
现在,我们有两个可以操作的元素,另外,我们还要为每个真元素创建两个伪元素,这样我们总共有6个可以操作的元素,借助这些元素我们就可以对日历进行修饰。看看下面的图,你就清楚了。
实现过程:
首先我们对外围元素进行定义。你可能已经注意到我使用了 box-shadow、border-radius 以及 CSS渐变。并不是所有的浏览器都支持这些属性,但至少它们越来越普及。注意,我们没有定义固定的高度,所有的高度都是通过外围元素以及其中的 em 元素的 line-height 属性来控制的。
.calendar{
margin:.25em10px10px0;
padding-top:5px;
float:left;
width:80px;
background:#ededef;
background: -webkit-gradient(linear,lefttop,leftbottom, from(#ededef), to(#ccc));
background: -moz-linear-gradient(top,#ededef,#ccc);
font:bold30px/60pxArialBlack,Arial,Helvetica,sans-serif;
text-align:center;
color:#000;
text-shadow:#fff0 1px0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
position:relative;
-moz-box-shadow:0 2px2px#888;
-webkit-box-shadow:0 2px2px#888;
box-shadow:0 2px2px#888;
}
em 元素包含着月份的名称,它的CSS定义如下:
.calendar em{
display:block;
font:normalbold11px/30pxArial,Helvetica,sans-serif;
color:#fff;
text-shadow:#00365a0-1px0;
background:#04599a;
background:-webkit-gradient(linear,lefttop,leftbottom, from(#04599a), to(#00365a));
background:-moz-linear-gradient(top,#04599a,#00365a);
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border-top:1pxsolid#00365a;
}
现在,我们来定义伪元素。外围元素的伪元素(:before 和 :after)用来创建两个圆孔。
.calendar:before, .calendar:after{
content:'';
float:left;
position:absolute;
top:5px;
width:8px;
height:8px;
background:#111;
z-index:1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 1px1px#fff;
-webkit-box-shadow:0 1px1px#fff;
box-shadow:0 1px1px#fff;
}
.calendar:before{left:11px;}
.calendar:after{right:11px;}
而 em 的伪元素用来创建两个吊环。
.calendar em:before, .calendar em:after{
content:'';
float:left;
position:absolute;
top:-5px;
width:4px;
height:14px;
background:#dadada;
background:-webkit-gradient(linear,lefttop,leftbottom, from(#f1f1f1), to(#aaa));
background:-moz-linear-gradient(top,#f1f1f1,#aaa);
z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.calendar em:before{left:13px;}
.calendar em:after{right:13px;}
大功告成。。。。
【编辑推荐】
【责任编辑:张伟 TEL:(010)68476606】
点赞 0
html点击图标出现日历,日历图标的纯CSS实现相关推荐
- 抛砖引玉式炫技:日历图标的纯CSS实现【前端开发技能必备系列】
今天我介绍采用纯CSS的方式来创建一个日历图标,你可以将其用在博客日志或者其它地方.自己也是学来的,但是效果是图片级的.如题所述,不在炫技,重在抛砖引玉.最终效果如下: 和从前一样,先看DEMO: h ...
- html点击小图轮播图,使用纯CSS实现点击轮播图效果,无js。
使用纯CSS实现图片轮播效果 首先我们来看一下所实现轮播图的最终效果: 轮播图 效果 接下来为html+css代码部分: 以下为HTML代码部分: 以下为CSS代码部分: *{ margin:0; p ...
- 网站点击弹窗微信二维码功能纯CSS
复制粘贴下边代码,根据需要更换图片路径,以及css. <html> <head> <style> body { text-align:center; } .w ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- css加号图标_一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- tableau高级绘图(十一)-tableau绘制日历圆形图
前言 日历圆形图的形式非常适合用于展现一年12个月的相关数据,能清晰体现月份的分布,单点数值的大小. 请看最终效果图: 数据准备 我们可以使用 Tableau 自带的 Sample Superstor ...
- Python数据可视化 Pyecharts 制作 Calendar 日历热图
Python3 的 Pyecharts 制作 Calendar(日历热图) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 日历热图 日历热图带工具 ...
- echarts 日历热度图设置 calendar
echarts 日历热度图设置 calendar Calendar Option option: {color: this.$CHART_OPTION.COLOR,legend:{top: 10,le ...
- css 图标点击变色,纯CSS实现小图标变色的一些研究
by zhangxinxu from www.zhangxinxu.com/wordpress/?- 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可,任何网站均可摘要聚合,商用 ...
最新文章
- 昇腾AI 软硬件全栈平台
- 尼克的任务 dp 洛谷1280
- zoj - 3502 Contest
- Activity生命周期的学习和验证
- c++心形代码_c语言心形告白代码实现
- 利用screen和nohup让Linux服务器后台运行程序
- Win10设置WSL大小写敏感
- 每日一技|活锁,也许你需要了解一下
- 嵌入式记录2——Kame四足巡线机器人
- 一年级计算机上册计划进度表,一年级上册语文教学计划及进度表
- 设计原则SOLD之 —— 单一职责原则SRP
- 电脑上如何进行MP4格式转换成其它格式?
- win10锁屏c语言,Win10秘笈:如何在锁屏打开任意应用程序?
- 趣味代码 python画小猪佩奇
- 计算机流水线重要知识,计算机组成与体系结构——流水线相关知识点(常考计算)...
- 【操作系统】进程和线程调度
- 权重 缩写 英文_常用英语术语缩写--采购
- 【Typora】添加水印
- R语言逻辑回归 logistic regression
- 2022中国人力资源管理年度观察