应用视觉设计——CSS实现线性渐变效果
在freeCodeCamp中应用视觉设计的课程中,介绍了一种通过使用CSS属性实现线性渐变效果。
1.线性渐变:
background:linear-gredient(gradient-direction,color1,color2,color3,...)
"gradient-direction"参数:指定了颜色转换开始的方向,使用度数表示,(ag:45deg);
后续的颜色:指定了使用的颜色顺序;
举个栗子:
<style> div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background:linear-gradient(35deg,#CCFFFF,#FFCCCC);
} </style> <div></div>
效果是这样的:
将渐变角度改成90deg时的效果是这样的:(垂直渐变)
2.使用CSS线性渐变创建条纹元素:
background:repeating-linear-geadient(gradient-direction,color1 像素/百分比,color2 像素/百分比,...);
"gradient-direction"参数:指定了颜色转换开始的方向,使用度数表示,(ag:45deg);
后续的颜色:指定了使用的颜色顺序;
像素/百分比值:类似宽度,标记了发生转换的位置
举个栗子:
<style> div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
90deg,
yellow 0px,
blue 40px,
green 40px,
red 80px
);
}
</style> <div></div>
效果是这样的:
在这个例子中,渐变从0像素处的黄色开始,然后在距离开始40像素处混合为第二种颜色蓝色。由于下一个颜色停止也是在40像素,梯度立即改变;
将转换梯度换一个值(45deg)或许更明显,更换后的效果是这样的:
注:如果每两个颜色停止值都是相同的颜色,那么混合就不明显了,因为它位于相同的颜色之间,然后很难过渡到下一个颜色,所以最后得到的是条纹。
举个栗子:
<style> div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
</style> <div></div>
效果就变成了黄黑条纹啦(如下图)
以上。
应用视觉设计——CSS实现线性渐变效果的更多相关文章
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3的线性渐变效果
1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- 纯CSS的颜色渐变效果
本例展示了一个纯css渐变的效果.其兼容IE6以上浏览器等各主流浏览器: 案例效果:查看演示 代码如下: css: *{margin:0;padding:0;} .linear{ width:100% ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变
线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- CSS3中颜色线性渐变实战
css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
随机推荐
- redis: Zset有序集合类型(七)
存值:zadd myset 1 one 取值:zrange myset 0 -1 127.0.0.1:6379> zadd myset 1 one #存值 分值为1 (integer) 1 12 ...
- MVC-基础02
MVC是Model(模型).View(视图)和Controller(控制). 1)最上面的一层,是直接面向最终用户的"视图层"(View).它是提供给用户的操作界面,是程序的外壳. ...
- Kylin on Parquet 介绍和快速上手
Apache Kylin on Apache HBase 方案经过长时间的发展已经比较成熟,但是存在着一定的局限性.Kylin 查询节点当前主要的计算是在单机节点完成的,存在单点问题.而且由于 HBa ...
- 深入实践Spring Boot1.4 运行与发布
1.4 运行与发布 本章实例工程的完整代码可以使用IDEA直接从GitHub的https://github.com/chen-fromsz/spring-boot-hello.git中检出,如图1-1 ...
- Flask中可以利用Flask-SQLAlchemy
为什么80%的码农都做不了架构师?>>> 官方文档:http://flask-sqlalchemy.pocoo.org/2.3/ 1.安装(进入虚拟环境)--利用镜像安装PyMy ...
- 关于SpringBoot集成myBatis时,mapper接口注入失败的问题
问题描述: 在Spring Boot集成myBatis时,发现启动时,mapper接口一直注入失败. 现象如下: VehicleDAO就是需要的mapper对象,一个简单的接口. 已经在applica ...
- 当setWidth()和setHeight()方法不起作用时
当在Android开发中用方法setWidth()和setHeight()动态设置控件的宽高时,当被改后的宽高小雨原来的宽高时,这两个方法将不会生效. 解决办法: 1 2 3 4 LayoutPara ...
- 让pomelo可以获取到反向代理websockets的真实用户IP
/node_modules/pomelo/lib/connectors/hybridsocket.js 找到 var Socket = function(id, socket) { 给remoteAd ...
- 编译警告:warning: operation on ‘i’ may be undefined
dest[i++]=src[i]; 这行代码,编译时会遇到警告: warning: operation on ‘i’ may be undefined(对于i变量的操作,有可能是未定义的) 改成 de ...
- 关于C primer plus 的学习计划(暂停)
最近想学数据结构,但是C的基础不够好,想借着C primer plus补一下基础.怎料第一章看的还挺快,到第二章看了二十多天.现在改改阅读方式:每日在这里添加进度,然后精看例题习题和章总结,其它简略看 ...