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绝大部 ...
随机推荐
- CMS(Concurrent Mark-Sweep)
CMS(Concurrent Mark-Sweep)是以牺牲吞吐量为代价来获得最短回收停顿时间的垃圾回收器.对于要求服务器响应速度的应用上,这种垃圾回收器非常适合.在启动JVM参数加上-XX:+Use ...
- C#中按指定质量保存图片的实例代码 24位深度
/// <summary> /// 按指定的压缩质量及格式保存图片(微软的Image.Save方法保存到图片压缩质量为75) /// </summary ...
- barManager.Menu(barSubItem)
DevExpress 的帮助文档是在太缺乏了,他自己的帮助只有简单描述,没有样例,而它的网站上的在线帮助只有利用它的设计器设计的ToolBar.PopupMenu ,没有利用代码开发的.虽然要利用代码 ...
- Linux系统的简介及Linux系统的安装
一.写在前面 本文仅仅对Linux系统进行简要的概述已经对Linux系统的安装进行简要的介绍 二.完成目标 1.Linux操作系统的基本概念 2.Linux系统的安装 三.基本概念 1.什么是操作系 ...
- uploadify控件使用在.net
第一次是博客,还有丢丢小兴奋呢.作为一个资深菜鸟,为了给自己留下点什么,开始记录一些技术问题.当然也是学习过程. 下面是成品的在.net web下的应用,还有很多不足的地方,期待大家的点评. $ ...
- input file 样式以及获取选择文件方法集合
样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...
- 实现一个对象验证库系列 -- 3) Fluent以及扩展方法实现 (请大神批评)
前情回顾: 上一篇 2) 验证器实现 简单描述了下验证器的简单实现 本文将说说Fluent方式的实现,欢迎大神们指点指点 3) Fluent以及扩展方法实现 我们按照之前 Fluent 的设想以及我们 ...
- 用Struts2标签实现Map的迭代
最近在做一个论坛,论坛通常分为几个主版块,每一个主版块下面又有几个子版块. 想不出更好的展现方式,最终采用了如下的方法来实现: 用一个Map,HashMap或者Treemap承载之.一个子版块名字对应 ...
- html 中head显示 在标题栏里面的图片
在<head>标签里加<link rel="Shortcut Icon" href="你的ico图片地址" /> 一般标题栏里的图片是1 ...
- CSS中字体尺寸总结
下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖! 前端开发过程中,我们经常会遇到设置某个div固定显示几行文本:这时我们需要精确计算每个字号字体的宽度和高度. 下面是w3school中描述的尺 ...