css生成彩色阴影
通常用css生成单色或者同色系的的阴影(box-shadow),其实可以通过巧妙的利用 filter: blur 模糊滤镜,可以生成渐变色或者说是颜色丰富的阴影效果,如图:
原理:
利用伪元素,生成一个与原图一样大小的新图叠加在原图之下,然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度,透明度等滤镜,制作出一个虚幻的影子,伪装成原图的阴影效果。
关键代码:
filter: blur(10px) brightness(80%) opacity(.8)
完整示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
width: 200px;
margin: 20px auto;
}
.avator {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: url(http://img0.imgtn.bdimg.com/it/u=3743150250,644096170&fm=26&gp=0.jpg) no-repeat center center;
background-size: 100% 100%;
} .avator::after {
content: "";
position: absolute;
top: 10%;
left: 0%;
width: 100%;
height: 100%;
background: inherit;
background-size: 100% 100%;
border-radius: 50%;
transform: scale(.95);
filter: blur(10px) brightness(80%) opacity(.8);
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
<div class="avator"></div>
</div>
</body>
</html>
css生成彩色阴影的更多相关文章
- Android之自定义生成彩色二维码
先导个zxing.jar包 下面是xml布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.andro ...
- jquery.qrcode二维码插件生成彩色二维码
jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为tab ...
- 编写生成彩色验证码的Servlet
利用Ajax实现无刷新的彩色验证码时,也需要编写一个名称为PictureCheckCode.java的Servlet,该类继承HttpServlet,主要通过service()方法生成验证码. 下面将 ...
- 前端特效: 使用CSS生成的闪光照相机效果
使用纯CSS生成的照相机效果, 相关CSS代码如下: .container { position: absolute; top: 50%; left: 50%; -webkit-transform: ...
- css之单边阴影
css之单边阴影 需求:在网上找的其他博客上说单边阴影需要牺牲掉模糊,实际上牺牲掉模糊直接用border不就好了 效果: 原理: 1.在左边的外阴影就是右边的内阴影 2.将box-shadow写在be ...
- css实现动态阴影、蚀刻文本、渐变文本
css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...
- CSS生成内容
在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...
- CSS之弧形阴影
简述 网页上经常会出现一些弧形的阴影效果,看起来很漂亮,下面我们来讲述下如何用CSS来实现一个弧形阴影. 简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码 阴影 效果 首先实现一个简单的阴影 ...
- 酷炫,用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
随机推荐
- Windows内核开发-2-开始内核开发-2-内核开发入门
Windows内核开发-2-开始内核开发-2- 第一个驱动程序: 直接采用vs2019中的Empty WDM Driver 模块创建: 初始的项目文件夹中有一个Driver Files里面会有一个.i ...
- SpringBoot | 2.1 SpringBoot自动装配原理
@ 目录 前言 1. 引入配置文件与配置绑定 @ImportResource @ConfigurationProperties 1.1 @ConfigurationProperties + @Enab ...
- python 15篇 面向对象
1.面向对象编程概念 面向对象是包含面向过程 面向过程编程 买车: 1.4s看车,买车 2.上保险 保险公司 3.交税 地税局 4.交管所 上牌面向对象编程 卖车处: 1.4s 2.保险 3.交税 4 ...
- SOA-面向服务的架构
一.什么是SOA? SOA 面向服务架构,是一个架构思想,是跨语言和平台的.SOA宗旨简单明了,根据项目服务完成架构搭建,以服务为基准点完成组件化和模块化.提供服务是项目的基本内容,其他的contro ...
- java集合(3)-Java8新增的Stream操作集合
Java8新增了Stream,IntStream,LongStream,DoubleStream等流式API,这些API代表多个支持串行和并行聚集操作的元素.上面的4个接口中,Stream是一个通用的 ...
- Vue.js源码解析-Vue初始化流程之动态创建DOM
目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...
- Git初始化本地已有项目
1.初始化仓库 git init 2.remote git remote add origin 仓库地址 3.从远程分支拉取master分支并与本地master分支合并 git pull origin ...
- 初探SpringRetry机制
重试是在网络通讯中非常重要的概念,尤其是在微服务体系内重试显得格外重要.常见的场景是当遇到网络抖动造成的请求失败时,可以按照业务的补偿需求来制定重试策略.Spring框架提供了SpringRetry能 ...
- Spring Boot的MyBatis注解:@MapperScan和@Mapper(十七)
1.Spring Boot与MyBatis融合的矛盾问题: Spring家族的使命就是为了简化而生,但是随着Spring的发展壮大,有点事与愿违了.为了坚持初心,Spring家族祭出了一大杀器---S ...
- dotnet部署出现Failed to load the dll from [ ... hostfxr.dll], HRESULT: 0x80070057
起因 最近看到.net core 3支持wpf了,尝试一下(如果可行,会特别利于脱离.net运行时) dotnet new wpf dotnet publish -c Release -r win-x ...