设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
开启辅助访问 切换到窄版
搜索
热搜: 活动 交友 discuz
返回列表 发新帖
查看: 2760|回复: 0
打印 上一主题 下一主题

[CSS3] 纯CSS3实现的各种阴影效果

[复制链接]
kevin-ying
跳转到指定楼层
楼主
发表于 2015-9-24 12:04:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式


[HTML] 纯文本查看 复制代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,阴影,shadow,CSS3" />
<meta name="description" content="纯CSS3实现的各种阴影效果，更多阴影,shadow,CSS3请访问脚本分享网JS代码频道。" />
<title>纯CSS3实现的各种阴影效果_脚本分享网</title>
 <link rel="canonical" href="/css-drop-shadows-without-images/demo/">     
    <style>
        body {
            padding:20px 0 0;
            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 60px 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;
            -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);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .lifted:after {
            right:10px; 
            left:auto;
            -webkit-transform:rotate(3deg);   
               -moz-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;
            height:55%;
            max-width:200px;
            -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); 
               -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4);
                    box-shadow:0 8px 16px rgba(0, 0, 0, 0.4);
            -webkit-transform:skew(-8deg) rotate(-4deg);
               -moz-transform:skew(-8deg) rotate(-4deg);
                 -o-transform:skew(-8deg) rotate(-4deg);
                    transform:skew(-8deg) rotate(-4deg);
        } 
      
        .curled:after { 
            right:10px; 
            left:auto;
            -webkit-transform:skew(8deg) rotate(4deg); 
               -moz-transform:skew(8deg) rotate(4deg);     
                 -o-transform:skew(8deg) rotate(4deg); 
                    transform:skew(8deg) rotate(4deg);
        }
        
        /* Perspective */

        .perspective:before {
            left:80px;
            bottom:8px;
            width:50%;
            height:35%;
            max-width:200px;
            -webkit-box-shadow:-80px 5px 10px rgba(0, 0, 0, 0.4);
               -moz-box-shadow:-80px 5px 8px rgba(0, 0, 0, 0.4);
                    box-shadow:-80px 5px 8px rgba(0, 0, 0, 0.4);
            -webkit-transform:skew(50deg);
               -moz-transform:skew(50deg);
                 -o-transform:skew(50deg);
                    transform:skew(50deg);
            -webkit-transform-origin:0 100%;
               -moz-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 60px 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);   
                 -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 60px 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>
    
    <script>
        var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']);
        (function() {
            var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>

</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 hozitonal 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>

content, center, color, 频道

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？免费注册

x

本帖被以下淘专辑推荐:

  • · 参考|主题: 16, 订阅: 0
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖1

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-23 22:57 , Processed in 0.156000 second(s), 31 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表