条纹背景

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揭秘 技巧(五):条纹背景的更多相关文章

  1. CSS揭秘 技巧(五):条纹背景

    条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...

  2. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...

  3. css条纹背景

    一. 水平条纹 1. 两种颜色: html <div class="stripe"></div> css .stripe{ width: 250px; he ...

  4. [CSS]《CSS揭秘》第四章——视觉效果

    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

  6. css条纹背景样式、及方格斜纹背景的实现

    一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...

  7. 使用css时的一些技巧及注意事项

    <!-- TITLE: 使用css时的一些技巧及注意事项 --> # CSS推荐书写顺序: 1. 位置属性(position, top, right, z-index, display, ...

  8. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  9. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

随机推荐

  1. 【[HNOI2012]矿场搭建】

    抄题解真开心 我真是越来越菜了 这是点双的板子题,于是求出所有点双,之后讨论 如果点双里之有一个割点,那么如果这个割点炸了,这个点双就出不去了,于是我们得在这个点双内部除了这个割点位置放一个 如果有两 ...

  2. POJ2187 Beauty Contest(旋转卡壳)

    嘟嘟嘟 旋转卡壳模板题. 首先求出凸包. 然后\(O(n ^ 2)\)的算法很好想,但那就不叫旋转卡壳了. 考虑优化:直观的想是在枚举点的时候,对于第二层循环用二分或者三分优化,但实际上两点距离是不满 ...

  3. 淡说Linux 的发展史

    ♦ 1  Linux的简单介绍 Linux与Windows一样都是一套OS(操作系统),Windows界面美观 ,普通用户很容易上手,点点鼠标就能搞定许多操作,而Linux生下来就是为程序员的,故精通 ...

  4. Ubuntu 14.04 系统安装后无法上网的问题(eth0识别不出)

    Ubuntu 14.04 1.网口处网线状态等正常跳动 2.ifconfig 指令查询不到网卡信息 说明缺少了网卡驱动. 使用 lspci 指令查看系统中所有的驱动信息,找到 Ethernet Con ...

  5. PHP+JQUERY+AJAX上传、裁剪图片

    PHP部分 /*图片上传*/ public function upload1(){ $file = $_FILES['file']; $upload = new \Think\Upload();// ...

  6. python接口自动化读取json,yaml配置文件+封装requests+unittest+HTMLRunner实现全自动化

    # coding=utf-8 import json import requests class TestApi(object): """ /* @param: @ses ...

  7. [Luogu1282]多米诺骨牌(DP)

    #\(\color{red}{\mathcal{Description}}\) \(Link\) 我们有一堆多米诺骨牌,上下两个部分都有点数,\(But\)我们有一个操作是可以对调上下的点数.若记一块 ...

  8. Android攻城狮学习笔记—入门篇一

    第一章 搭建Android开发环境 1.1 环境组成 JDK(Java Development Kit) Eclipse Android SDK(Software Development Kit) A ...

  9. 精读 SBAR SDN flow-Based monitoring and Application Recognition

    目录 架构 测量模块 分类模块 具体实现 实验:最后接入巴塞罗那的校园网流量测试: SBAR: SDN flow-Based monitoring and Application Recognitio ...

  10. 一个实现 手机端“输入验证码 ”效果Demo

    之前在“掘金”上看到这样一个demo 我觉得很有意思,于是今天把它搬下来,记在自己的“小本本”里也许会对以后的项目有点用,若要自己去实现这样一个案例也能实现,但是可能没有那么“妙”. 想法: 1.使用 ...