网站建设
 
设为首页 收藏本站 
用户ID/邮箱: 密 码:
客户中心 Customer service 您目前的位置:首 页 > 客户中心 > DIV+CSS 



DIV+CSS,网站建设DIV+CSS:Css3新特性应用之视觉效果

Css3新特性应用之视觉效果

一、单侧阴影

  • box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍
    • h-sahdow:水平阴影的位置,允许负值
    • v-shadow:垂直阴影的位置,允许负值
    • blur:模糊距离
    • spread:阴影的尺寸,扩张距离,可以为负数
    • color:阴影的颜色
    • inset/outset:内部或者外部阴影
  • 阴影的扩张距离对四边都有效,不能单独应用于单边。
  • box-shadow支持多组值同时生效的设置
  • 示例代码:
.wrap{ 
            width: 200px; 
            height: 120px; 
            background: yellowgreen; 
            box-shadow: 2px 0px 4px -2px black, 
                        -2px 0px 4px -2px black; 
        }

二 、不规则投影

  • 利用border-radius生成的形状,用投影很好,但是如果加入了伪元素和半透明的装饰,
    阴影表现就很不好了,如下情况都会有问题。
    • 半透明图像、背景图像、或者border-image
    • 元素设置了点状、虚线或半透明的边框,但没有背景(或者background-clip不是border-box时)
    • 元素内部有小角是用伪元素生成
    • 通过clip-path生成的形状
  • 解决办法:利用svg的drop-shadow来实现
  • 示例代码:
.wrap{ 
            width: 200px; 
            height: 120px; 
            border: 6px dotted yellowgreen; 
            --box-shadow: 0px 0px 4px 0px black; 
            -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1)) 
        }

三、染色体效果

  • 基于滤镜实现,应用filter属性的相关值,调整图片的饱合度、亮度等值
  • 基于min-blend-mode实现,作用:实现元素内容与背景以及下面的元素发生“混合”
  • 基本background-blend-mode实现,作用:实现背景颜色与背景图片、背景图片与图片的混合
  • 三种情况的示例代码:
.wrap1{ 
            width: 200px; 
            height: 120px; 
            overflow: hidden; 
        } 
        .wrap1 > img{ 
            max-height: 100%; 
            max-width: 100%; 
            -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg); 
        } 

        .wrap2{ 
            width: 200px; 
            height: 120px; 
            background: hsl(335, 100%, 50%); 
            overflow: hidden; 
        } 
        .wrap2 > img{ 
            height: 100%; 
            width: 100%; 
            mix-blend-mode: luminosity; 
        } 

        .wrap3{ 
            width: 200px; 
            height: 120px; 
            background-size: cover; 
            background-color: hsl(335, 100%, 50%); 
            background-image: url("../img/cat.png");  
            background-blend-mode: luminosity; 
        }

四、毛玻璃效果

主要实现原理:内容伪元素背景与底层背景相同的图片;并加上filter:blur模糊滤镜即可。
注意blur不能应用在底层背景,也不能应用在元素的背景上(这样会地元素本身应用blur模糊,会导致文本看不见),
只能就用在伪元素上。

代码如下:

body{ 
    background: url("../img/cat.png") no-repeat; 
    background-size: cover; 
} 
.wrap{ 
    position: relative; 
    width: 500px; 
    margin: 0px auto; 
    padding: 10px; 
    line-height: 1.5; 
    background: hsla(0, 0%, 100%, .3); 
    overflow: hidden; 
} 
.wrap::before{ 
    content: ’’; 
    background: url("../img/cat.png") 0/cover fixed; 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    filter: blur(20px); 
    z-index: -1; 
    margin: -30px; 
}

代码说明:

  • body与wrap伪元素都应用相同的背景图片
  • wrap的background-attachment设置为fixed,让背景图不要跟随滚动一起动
  • wrap伪元素设置为绝对定位,且z-index层级只高于背景
  • 利用blur设定wrap伪元素的模糊尺寸
  • 用margin负值增加宽度,父元素用overflow:hidden隐藏溢出,让模糊背景更加真实。

五、折角效果

实现步骤

  • 首先利用linear-gradient实现切角效果
  • 然后再利用linear-gradinet生成一个三角形,并设置他的位置与宽高
  • 代码如下:
.wrap{ 
        background: linear-gradient(to left bottom, transparent 50%, 
rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em, linear-gradient(-135deg, transparent 1.4em, #58a 0)
; width: 200px; height: 120px; }

注意

  • 100% 0/2em 2em在定位背景元素的位置与宽高,尤其是2em的宽与高都是背景元素正常的宽度。
  • 而第二个linear-gradient中的1.4em是沿着渐变轴进行度量的,也就是渐变轴到元素顶边的距离,
    本例是渐变轴到右上边顶的距离
  • to left bottom是表示渐变从左下角开始

上一条: 关于Layer弹出框初探
下一条: 吸引人的标题模板大全(二)
相关文章
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
前端页面隐藏元素
URL怎么优化
URL优化方法
css中的三种基本定位机制
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
推广经验分享
其它
网站建设资源
常见问题
网站知识
快速导航 Fast Navigation
网站建设投诉建议
投诉建议
网站建设客户服中心
客服中心
网站建设付款中心
付款方式
网站优化中心
网站优化
网站建设套餐
网站建设

网站价值

轻松一刻
站长工具
站长工具

积分兑换
网站首页关于我们业务范围新闻资讯成功案例客服中心联系我们深圳网站建设网站优化付款帐户
文档下载:网站建设服务协议 | 网站建设报价 | 网站备案资料 | 网页设计软件 | PhotoShop(图片处理) | FTP网页上传/下传软件
深圳网站建设公司专业提供各种营销型网页设计\网站优化服务... 【老字号】、重庆、广州、东莞、深圳网站建设
网页设计登陆 | 网站建设 | 网页设计 | 网站优化 | 网站地图 | 专业的深圳网站建设,深圳网站优化,网页设计,网站建设开发团队
COPYRIGHT(C) 2005-2018 亚网互联·中国 版权所有 ALL RIGHTS RESERVED  ( 粤ICP备15005241号 ) 来访IP:54.81.232.54
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦1529-1531 室     E-Mail:sales@yanet.cn   web@yanet.cn  
公司电话:0755-89812581(8线)   4006-800535
深圳市博士通科技有限公司