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绝大部 ...
随机推荐
- C#整理2——C#的输入输出及基本类型
//输出 Console.WriteLine("摩西摩西"); Console.Write("hollo");不带回车的 注意: 1.注意大小写敏感.(快捷键操 ...
- sql必知必会(第四版) 学习笔记一
温习一遍简单的sql语法,把自己掌握还不够的地方,做了些笔记.... 1 去重复关键词,distinct select distinct sname from student; 2 限制结果top的用 ...
- Hexo 官方主题 landscape-plus 优化
博主喜欢简洁大方的Hexo主题,看了不下100个主题之后,最终选择了 landscape-plus 主题(针对中国大陆地区,对Hexo官方主题landscape进行优化后的版本).更多Hexo主题资源 ...
- jQuery Tags Input Plugin 插件的使用
一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能. 官网:http://xoxco.com/pr ...
- dom处理配置文件_待完善
import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...
- TSF自定义候选词列表界面
概述 TSF(Text Service Framework),已经取代IMM(Input Method Manager),成为win8+系统的输入法框架.现在有个需求,触摸屏上要使用软键盘(虚拟键盘, ...
- 矩阵乘法的MPI并行计算
1.问题描述 矩阵乘法问题描述如下: 给定矩阵A和B,其中A是m*p大小矩阵,B是p*n大小的矩阵.求C = A*B. 求解这个问题最简单的算法是遍历A的行和B的列,求得C的相应元素,时间复杂度O(m ...
- 轻松解决ubuntu系统引导问题
什么是ppa PPA,表示 Personal Package Archives,也就是个人软件包集. 有很多软件因为种种原因,不能进入官方的 Ubuntu 软件仓库. 为了方便 Ubuntu 用户使用 ...
- mysql导出命令
数据库备份 /data/mysql/bin/mysqldump -hlocalhost -u'root' -p'do' my_db --single-transaction -q | gzip > ...
- 项目中关于AJAX的使用总结
一.使用情况:AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下使用.AJAX的核心:向服务器发送多个请求而无需用户等待来至服务器的响应. 二.AJAX的优势 1. ...