css3 drop-shaow阴影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: CSS drop-shadows without images – Nicolas Gallagher</title>
<meta name="description" content="Using CSS pseudo-elements, box-shadows, and transforms to create drop-shadow effects without images from semantic HTML"> <style>
body {
padding:20px 0 30px;
font:14px/1.5 Arial, sans-serif;
text-align:center;
color:#333;
background:#FAF0D9;
} a {
font-weight:bold;
color:#346AA8;
} a:hover,
a:focus,
a:active {
text-decoration:none;
} .container {
position:relative;
z-index:1;
width:600px;
padding:20px;
margin:0 auto;
background:#FAF0D9;
} .container:after {
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
font-size:0;
} /* Shared styles */ .drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
} .drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
} .drop-shadow p {
font-size:16px;
font-weight:bold;
} /* Lifted corners */ .lifted {
-moz-border-radius:4px;
border-radius:4px;
} .lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
} .lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
} /* Curled corners */ .curled {
border:1px solid #efefef;
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
} .curled:before,
.curled:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
} .curled:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
} /* Perspective */ .perspective:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
max-height:50px;
-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-webkit-transform:skew(50deg);
-moz-transform:skew(50deg);
-ms-transform:skew(50deg);
-o-transform:skew(50deg);
transform:skew(50deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
} .perspective:after {
display:none;
} /* Raised shadow - no pseudo-elements needed */ .raised {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
} /* Curved shadows */ .curved:before {
top:10px;
bottom:10px;
left:0;
right:50%;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
} .curved-vt-2:before {
right:0;
} .curved-hz-1:before {
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
} .curved-hz-2:before {
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
} /* Rotated box */ .rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
} .rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
} </style> </head>
<body>
<div class="container">
<h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1> <div class="drop-shadow lifted">
<p>Lifted corners</p>
</div> <div class="drop-shadow curled">
<p>Curled corners</p>
</div> <div class="drop-shadow perspective">
<p>Perspective</p>
</div> <div class="drop-shadow raised">
<p>Raised box</p>
</div> <div class="drop-shadow curved curved-vt-1">
<p>Single vertical curve</p>
</div> <div class="drop-shadow curved curved-vt-2">
<p>Vertical curves</p>
</div> <div class="drop-shadow curved curved-hz-1">
<p>Single horizontal curve</p>
</div> <div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div> <div class="drop-shadow lifted rotated">
<p>Rotated box</p>
</div>
</div>
</body>
</html>
对应效果图如下：
css3 drop-shaow阴影效果的更多相关文章
- CSS3 之书页阴影效果
视觉如下: CSS3 之书页阴影效果: <html> <head> <meta charset="UTF-8"> <title>书页 ...
- CSS3 -web-box-shadow实现阴影效果
-webkit-box-shadow:2px -2px 10px #06c; 给元素添加阴影效果 text-shadow 是给文本添加阴影效果属性同上 形成的阴影跟阴影本体大小一致,四个属性分别代表 ...
- CSS3 box-shadow 内外阴影效果
说明 box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果.定义多个阴影,使用逗号分隔. 语法 box-shadow: none | [inset? && [<o ...
- 一个CSS3滤镜Drop-shadow阴影效果
<html> <head> <title>CSS3 Drop-shadow阴影</title> <style type="text/cs ...
- 用CSS3实现带有阴影效果和颜色渐变的按钮
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片:本想直接在这个页面下嵌html的,,试了后发现有些cs ...
- 转：前端集锦：十款精心挑选的在线 CSS3 代码生成工具
今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效.CSS3 是对 CSS 规范的改善和增强,增加了圆角.旋转.阴影.渐变和动画等众多强大的 ...
- css3前端工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
- css3工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
- 为 Web 设计师准备的 20 款 CSS3 工具
1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...
- 12款有助于简化CSS3开发的工具
网站开发者能通过CSS3为网站设计增添很多时尚元素,CSS3 对CSS规范做了很大的改进.现在,本文将介绍12款有助于简化CSS3开发的工具. 1.CSS3 Pie: 允许在IE上使用CSS3绝大部 ...
随机推荐
- （八）Android广播接收器BroadcastReceiver
一.使用Broadcast Reciver 1.右击java文件夹,new->other->Broadcast Receiver后会在AndroidManifest.xml文件中生成一个r ...
- javascript 正则表达式代码
正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表 ...
- [string]字符串中几个比较难的算法和容易搞混的题目
一.两个难点算法 1.Manacher算法,线性时间求最长回文子串 2.KMP算法,字符串匹配问题,c语言中的strStr 二.几个题目 1.最长回文子串 方法:暴力,动态规划,中心扩展,manach ...
- 设计模式之适配器模式(Decorator)
1.意图 动态地给一个对象添加一些额外的功能. 2.适用性 动态.透明的方式给单个对象添加职责. 如果不适合适用子类来进行扩展的时候,可以考虑适用装饰模式. 避免子类数目爆炸性增长. 3.结构 4.参 ...
- AfxSocketInit()
作用:初始化Windows套接字 原型:BOOL AfxSocketInit(WSADATA* lpwsaData = NULL ); 参数:lpwsaData 指向WSADATA结构的指针. ...
- Android 不通过USB数据线调试的方法
在开发Android应用时,通常情况下是通过USB数据线连接设备和计算机,但对于一些需要使用USB设备的应用,这种方法就碰到了麻烦,手机的USB接口已经和外接的USB设备连接,无法再连数据线,此时可以 ...
- [linux]segvcatch简单使用
https://code.google.com/p/segvcatch/ This is a crossplatform C++ library designed to convert a hardw ...
- jQuery validate (转载)
转自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html jQuery校验 官网地址:http://bassistance.de/jquery-p ...
- Qt for Android遇到的几个错误解决[Win7 + Qt5.6 +jdk 8u91]
[1]SDK Manager无法更新Android SDK安装后需要运行SDK Manager下载安装包,默认从google网站下载,但被GWF和谐了,感谢一位网友提供的镜像站点.具体步骤是:运行SD ...
- poj 3250 Bad Hair Day(单调队列)
题目链接:http://poj.org/problem?id=3250 思路分析:题目要求求每头牛看见的牛的数量之和,即求每头牛被看见的次数和:现在要求如何求出每头牛被看见的次数? 考虑到对于某头特定 ...