html邮箱图标代码,CSS3 单元素邮件图标
CSS
语言:
CSSSCSS
确定
/* This Mail Icons was made with LOVE by @lukyVj for Webgate*/
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/* High res */
background: #ddd; }
mail {
display: block;
margin: 50px auto;
width: 60px;
height: 40px;
background: linear, top, #fefefe, #f5f5f5;
box-shadow: 0 0 1px 0px #999, 0 6px 13px -5px rgba(0, 0, 0, 0.3);
border-radius: 2px;
transition: all 1s ease; }
mail:hover {
box-shadow: 0 0 1px 0px #999, 0 6px 13px -5px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.3); }
mail:before {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border-left: 30px dashed transparent;
border-right: 30px dashed transparent;
border-top: 30px dashed #ebebeb; }
mail:after {
content: '';
position: absolute;
display: block;
margin: 10px auto;
width: 0;
height: 0;
border-left: 30px dashed transparent;
border-right: 30px dashed transparent;
/* basic */
border-bottom: 30px dashed rgba(235, 235, 235, 0.5); }
mail:nth-child(2) {
width: 40px;
height: 30px; }
mail:nth-child(2):before {
border-left: 20px dashed transparent;
border-right: 20px dashed transparent;
border-top: 20px dashed #ebebeb; }
mail:nth-child(2):after {
border-left: 20px dashed transparent;
border-right: 20px dashed transparent;
/* little */
border-bottom: 20px dashed rgba(235, 235, 235, 0.5); }
mail:nth-child(3) {
width: 30px;
height: 20px; }
mail:nth-child(3):before {
border-left: 15px dashed transparent;
border-right: 15px dashed transparent;
border-top: 15px dashed #ebebeb; }
mail:nth-child(3):after {
margin: 5px auto;
border-left: 15px dashed transparent;
border-right: 15px dashed transparent;
border-bottom: 15px dashed rgba(235, 235, 235, 0.5); }
html邮箱图标代码,CSS3 单元素邮件图标相关推荐
- html中购物车图标,纯CSS3实现单元素购物车图标
CSS 语言: CSSSCSS 确定 .shopping-cart { width: 100px; height: 100px; background-color: rgb(0, 180, 255); ...
- html纵向固定导航菜单代码,CSS3单页面垂直固定导航
当屏幕足够小时(如手机移动设备),会在屏幕右下角展示一个图标,触控图标,则会展开导航菜单,点击菜单页面会滚动到对应的节点,效果非常酷. HTML 我们的导航条是一个无序列表ul,包含在nav.cd-v ...
- python运行微软图标代码_获取windows程序图标并将其另存为.png Python
下面我有一些代码,获取一个.exe文件,从中获取图像,并将其保存为.bmp文件.这很好,但我需要保存.bmp与原来的透明背景.exe文件图标.有没有方法可以修改下面的代码来做到这一点?在 代码:def ...
- android 和风图标字体移植显示墨迹天气图标
android studio版本:21.2.1 例程:newareaautov1 和风天气字体图标使用方法见: android 显示和风天气字体图标_kim5659的博客-CSDN博客_qweathe ...
- 删除iPhone邮箱smtp服务器,教你iPhone邮件怎么添加删除附件及iPhone特殊代码分享...
中国邮箱网讯 12月11日消息 iPhone自带的邮件应用中找不到添加附件的选项,该怎么给邮件添加附件,收到带有附件的邮件又该怎么快速删除多有附件呢?下面我们就来看看详细的教程. 一.邮件添加附件 1 ...
- input眼睛显示 vue_修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标...
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
- table中加表单元素每行怎么验证_Validform 一行代码搞定整站的表单验证 - 文章
Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符 ...
- jquery对文本赋值和取值_jQuery对表单元素的取值和赋值操作代码
JS jQuery对表单元素的取值和赋值操作代码 作者: 来源:www.28hudong.com2013-03-30 00:52:47 阅读次 $("#keyword")[0].v ...
- HTML第四章 input新表单元素(10个,附带详细代码)
目录 1. 数字控件 2. 颜色控件 3. 日期控件 4. 月份控件 5. 星期控件 6. 邮箱控件 7.搜索控件 8. URL控件 9. 电话号码控件 10. 范围控件 每日一句 1. 数字控件 & ...
最新文章
- 《BI项目笔记》用Excel2013连接和浏览OLAP多维数据集
- mysql centos 源码安装_CentOS5下MySQL源码安装方式
- 小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
- 苹果计算机磁盘格式,苹果电脑如何完全写入NTFS格式磁盘
- 穿越火线全部服务器都显示爆满,穿越火线大区全部爆满,频道挤不进去背后的故事!...
- 事物与持久化_跟面试官侃半小时MySQL事务,说完原子性、一致性、持久性的实现...
- JavaScript的检测及其数据类型
- Java中getclass(),class()与iinstanceof的区别与联系
- NIO蔚来EC6ES6ES8智能电动汽车维修手册电路图用户手册技术信息资料
- 防火墙结构之屏蔽主机体系结构
- android学习---开发Google地图应用程序
- 人工神经网络ANN(BP网络)
- QT5串口读取宇电温控器温度
- 计算机电源插座安装,弱电箱的插座要怎么安装 弱电箱安装插座安装方法介绍【详解】...
- 工程师必看:常见的PCB检测方法有哪些?
- 安全基线规范之Cisco核心交换机
- 微信小程序新蓝海全行业深度解析报告
- java接收前端传来的日期,格式化后录入数据库
- NLP领域中文对话系统数据集总结(有下载地址)
- Springboot实体类配置索引注解