文档章节

CSS3_卷曲阴影效果

喵王不瞌睡
 喵王不瞌睡
发布于 2013/12/26 13:46
字数 233
阅读 40
收藏 0
//纯 CSS3 制作的页面卷曲阴影效果

ul.box {

    position: relative;

    z-index: 1; /* prevent shadows falling behind containers with backgrounds */

    overflow: hidden;

    list-style: none;

    margin: 0;

    padding: 0;

}

 

ul.box li {

    position: relative;

    float: left;

    width: 250px;

    height: 150px;

    padding: 0;

    border: 1px solid #efefef;

    margin: 0 30px 30px 0;

    background: #fff;

    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

}

 

ul.box li:before,

ul.box li:after {

    content: '';

    z-index: -1;

    position: absolute;

    left: 10px;

    bottom: 10px;

    width: 70%;

    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */

    max-height: 100px;

    height: 55%;

    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    -webkit-transform: skew(-15deg) rotate(-6deg);

    -moz-transform: skew(-15deg) rotate(-6deg);

    -ms-transform: skew(-15deg) rotate(-6deg);

    -o-transform: skew(-15deg) rotate(-6deg);

    transform: skew(-15deg) rotate(-6deg);

}

 

ul.box li:after {

    left: auto;

    right: 10px;

    -webkit-transform: skew(15deg) rotate(6deg);

    -moz-transform: skew(15deg) rotate(6deg);

    -ms-transform: skew(15deg) rotate(6deg);

    -o-transform: skew(15deg) rotate(6deg);

    transform: skew(15deg) rotate(6deg);

}

© 著作权归作者所有

喵王不瞌睡
粉丝 11
博文 168
码字总数 51103
作品 0
浦东
个人站长
私信 提问
每位设计师都应该拥有的50个CSS代码片段

面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. 网站设计者和前端工程师都已经全面的使用 CSS3 properties, 决定这些的是 浏览器支持 和新的特性. 但是还是有些优秀的CSS2代码片段...

maverickpuss
2013/06/05
22.3K
51
24款非常实用的CSS3工具终极收藏

对于Web设计和开发人员来说,CSS是非常重要的一部分,随着越来越多的浏览器对CSS3的支持及不断完善,设计师和开发者们有了更多的选择。如今,用纯CSS就可以实现各种各样很酷的效果,甚至是动...

SeanCai
2011/03/09
472
0
10款精心挑选的在线 CSS3 代码生成工具

今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效。 CSS3 是对 CSS 规范的改善和增强,增加了圆角、旋转、阴影、渐变和动画等众多强大...

cacao111
2018/07/11
0
0
Photoshop投影与CSS中box-shadow的转换

box-shadow是给元素块添加周边阴影效果,Photoshop投影与CSS中box-shadow的转换 text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果 基本语法是{box-shadow:[inset] x...

小草先森
05/28
12
0
6 个典型的 HTML5 文字特效示例

在HTML5出现之前,网页上的文字比较单一,除了设置大小、颜色、粗细之外,没有任何出色的特效,当然优秀的文字排版也能让页面显得舒服温馨,但 是当我们需要让页面变得震撼惊奇的话,那么HTM...

tp_wire
2012/08/30
11.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

官方来源的 Duo Mobile App 解决了我的 Network Difficulties 问题

https://help.duo.com/s/article/2094?language=en_US 我利用百度搜索下载了一个 Duo Mobile App (由于 Google Play)在大陆不可用。 在扫描旧手机上的 Duo Mobile App 的二维码时, 显示出错...

圣洁之子
9分钟前
2
0
Zabbix监控Mysql容器(Docker容器)主从是否存活

1、在Zabbix Web端创建模板 2、为该模板创建监控项 3、创建触发器 4、在zabbix-agent端操作 在/etc/zabbix/zabbix_agentd.d新建customize.confw文件 内容如下 UserParameter=mysql.replicat...

abowu
10分钟前
1
0
基于 RocketMQ 的同城双活架构在美菜网的挑战与实践

本文整理自李样兵在北京站 RocketMQ meetup分享美菜网使用 RocketMQ 过程中的一些心得和经验,偏重于实践。 嘉宾李样兵,现就职于美菜网基础服务平台组,负责 MQ ,配置中心和任务调度等基础...

大涛学长
16分钟前
2
0
设计模式之:外观模式和桥接模式

作者:DevYK 链接:https://juejin.im/post/5d7e01f4f265da03b5747aac 外观模式 介绍 外观模式 (Facade) 在开发过程中的运用评率非常高,尤其是在现阶段,各种第三方 SDK “充斥” 在我们周边...

Java架构Monster
17分钟前
1
0
人证合一核验设备

人脸身份验证机,人证合一设备1:N如我们现在在车站或一些重要的场所如步行街、城中村等人流密集的场所应用的人脸识别布控系统,其特点是动态和非配合。所谓的动态也就是识别的不是照 片,不是...

非思丸智能
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部