[css 揭秘] :CSS揭秘 技巧(五):条纹背景
条纹背景
https://github.com/FannieGirl/ifannie/
问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗?
这一章相对还是比较复杂的哦!一起get.
首先我们做一个渐变的背景


横条背景
现在我们把这两个色标拉近一点

这样好像条纹背景 就出来了哦!不过这是横向的,是不是还可以竖线呢!肯定是可以的啦,看看多变的条纹背景
竖条背景


斜向背景


这样的条纹背景还是不够灵活的。还有更好的方案
liear-gradient() 和 radial-gradient() 还各有一个循坏的加强版:repeating-liear-gradient() 和 repeating-radial-gradient() 他们的工作方式是跟前两者类似的,但是不同点是:色标是无线循环重复的,直到填满整个背景。

灵活的同色系条纹
一般情况下,我们想要的条纹图案并不是由差异极大的几种颜色组成的,这些颜色往往属于同一色系,只是在明度方面有着轻微的差异

实例演示地址:https://jsfiddle.net/06sjmL6n/13/
后言:
如果你对基础的知识点已经很熟悉,你可以自动跳过。写上去的原因是查漏补缺,巩固一下基础。
如果有不对的地方,欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school;
参考链接 :http://www.w3school.com.cn/cssref/pr_background-clip.asp
[css 揭秘] :CSS揭秘 技巧(五):条纹背景的更多相关文章
- CSS揭秘 技巧(五):条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- 用css实现条纹背景
我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...
- css条纹背景
一. 水平条纹 1. 两种颜色: html <div class="stripe"></div> css .stripe{ width: 250px; he ...
- [CSS]《CSS揭秘》第四章——视觉效果
投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS简介
HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...
- css条纹背景样式、及方格斜纹背景的实现
一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...
- 使用css时的一些技巧及注意事项
<!-- TITLE: 使用css时的一些技巧及注意事项 --> # CSS推荐书写顺序: 1. 位置属性(position, top, right, z-index, display, ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
随机推荐
- C/C++——老夫记不住
常指针 Coordinate * const pCoor=&coor1; 指针所指向的地址不可改变. 常对象指针 const Coordinate *pCoor=&coor1; 所指对 ...
- 查看WIFI连接的信号强度
netsh wlan show interface (netsh wlan show interface) -match '^\s+Signal' -replace '\s+Signal\s+:\s+ ...
- 5.3.1 RPC端点RpcEndpoint
ThreadSafeRpcEndpoint对消息的处理都是串行的,即前一条消息处理完才能接着处理下一条消息.ThreadSafeRpcEndpoint的继承体系如图5-3所示. 5.3.2 RPC端点 ...
- Python自动化之Django中间件
django中间件 Django请求生命周期 中间件中可以定义方法,分别是 process_request(self,request) process_view(self, request, call ...
- ansible实用例子
寻找/etc/ 名为"hosts" 递归查找 ansible webserver -m find -a ' path=/etc/ file_type=any recurse=yes ...
- 我的QT5学习之路(一)——浅谈QT的安装和配置
一.前言 说到Qt,不能不说到C++,这门伟大的语言.因为其面向对象的编程思想和陡峭的学习曲线,一开始学习起来很是吃力.Qt从QT4开始基本封装了很多C++的工具库和界面库,而且支持跨平台,这是它最大 ...
- jquery 查找已经选中的下拉框/select
$("select[name='select_name']").find('option:selected').text(); $('#select_name option:sel ...
- Office365学习笔记—Lookup类型加载条目过多解决方案
1,随着接触的项目越来越多,遇到的各种奇葩的问题也越来越多,不得不说,SharePoint是个好东西,提高了开发效率,简化了很多基础的功能.但是令人头疼的问题是,当你想做个稍微复杂点的功能,就不得不研 ...
- 【腾讯敏捷转型NO.1】敏捷是什么鬼?
“敏捷是什么鬼” 最近对外进行<腾讯产品敏捷研发体系>授课的时候,我经常可以从参课学员的眼睛里找到这句话. 通常我会鼓励大家,说:“告诉大家一个好消息,你们今天所有的疑问都是有答案的,唯一 ...
- GoogleMock初探(0)
在进行测试过程中,待测的类或者方法经常会依赖其他类或方法的实现.如果此时这些依赖还没有实现,则需要打桩.另外测试讲求独立,测试之间的互相依赖会导致测试最终混乱不堪. GoogleMock提供一套方法来 ...