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的新功能是很强大的,不要把你的思想太过 ...
随机推荐
- konga的初步使用
目录 1. 设置连接 2. konga的重要功能 Dashboard Snapshots Settings 3. 通过konga 实现kong api配置 前言: 在上篇文章中,我们已经创建了一个到k ...
- Chirp Z-Transform
Chirp Z-Transform 其实不是什么特别难的东西. 用于解决等比数列/类等比数列多点求值. \(b_i=\sum_{j=0}^{n}a_jc^{ij}\) 注意到 \(ij=\binom{ ...
- vue实现menu菜单懒加载
本文将在vue+element ui项目中简单实现menu菜单的懒加载. 最近接到这样的需求:菜单的选项不要固定的,而是下一级菜单选项需要根据上级菜单调接口来获取.what? 这不就是懒加载吗?翻了一 ...
- Android Studio(或IntelliJ IDEA )把Android程序运行到由VirtualBox创建 Android x86虚拟机中
一.运行前相关配置 1.把Android sdk platform-tools目录下的adb程序加入到path环境变量,默认情况下是其路径是: C:/Users/ [User]/AppData/Loc ...
- 【每日算法】存在重复元素 II
题目描述 这是 LeetCode 上的 219. 存在重复元素 II, 难度为 [简单] 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nu ...
- Web 字体 font-family 浅谈
前言 最近研究各大网站的font-family字体设置,发现每个网站的默认值都不相同,甚至一些大网站也犯了很明显的错误,说明字体还是有很大学问的,值的我们好好研究. 不同的操作系统.不同浏览器下内嵌的 ...
- 利用PhotoShop CS6进行抠图
相信大家在前端开发中一定遇到过抠图,一个方形图有好多种方法可以扣出来你想要的图片,可是你知道怎么扣出一个圆形的图片吗?(另附ps破解办法 亲测可用) 一:我们需要安装ps软件并进行破解,这里进行下载破 ...
- 深入刨析tomcat 之---第4篇 tomcat4.0连接池 实现原理
writedby 张艳涛
- SpringBoot自动装配-Condition
1. 简介 @Conditional注解在Spring4.0中引入,其主要作用就是判断条件是否满足,从而决定是否初始化并向容器注册Bean. 2. 定义 2.1 @Conditional @Condi ...
- SQL语句(一)基础查询与过滤数据
目录 一.数据库测试表 二.基础查询 1. 获得需要的记录的特定字段 2. 查询常量值 3. 查询表达式 4. 查询函数 5. 起别名 6. 去重 7. CONCAT函数的简单使用 三.过滤数据 大纲 ...