linear-gradient线性渐变实现虚线等简单实用图形

CSS3 linear-gradient线性渐变实现虚线等简单实用图形

这篇文章发布于 2017年10月27日,星期五,01:40,归类于 css相关。 阅读 9949 次, 今日 84 次

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6494

本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。

一、作为图片存在的CSS3 gradient渐变

我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的。

这种特性和box-shadow类似,参见“CSS3 box-shadow盒阴影图形生成技术”,text-shadow也有无限累加性,通常我们可以实现任意粗细和色彩的描边效果。

当然我们实际开发的时候,是不会使用CSS3渐变来模拟一张图片的,更多是用来生成一些简单实用的图形。

本文就将通过实现虚线,三角以及加号减号等案例,展示下CSS3 linear-gradient线性渐变要图形生成技巧。

二、CSS3 linear-gradient线性渐变生成比例可控虚线及工具

我们平常要实现一个虚线效果,多半是使用border-style:dashed声明实现,然而虚线边框有一个问题,那就是虚线的实虚比例是固定的,例如,Chrome和Firefox浏览器下,颜色区的宽高比是3:1,颜色区和透明区的宽度比例是1:1:

IE浏览器下颜色区的宽高比是2:1,颜色区和透明区的宽度比例也是2:1,如下:

如果有设计需求,希望我们的虚线颜色区的宽高比是5:1,此时,border-style:dashed就鞭长莫及了。

此时,借助CSS3 linear-gradient线性渐变我们可以轻松实现上面的效果,假设HTML代码如下:

则对应的CSS代码如下:

.dashed {

    height: 1px;

    background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);

    background-size: 10px 100%;

}

效果截图如下:

当我们使用CSS3渐变来构建图形的时候,最画龙点睛的属性,其实并不是渐变本身,而是background-size属性,让我们的图形约束在特定区域大小。

关于线性渐变生成虚线,我特意制作了一个CSS代码生成工具,您可以狠狠的点击这里:基于CSS3线性渐变实现的虚线CSS生成工具demo

我们可以选择你希望的虚线的比例,步幅以及颜色,然后对应的CSS代码就可以生成了,例如:

有兴趣的话可以手动试一试。

二、CSS3 linear-gradient线性渐变生成带线框的三角

做到三角图形的生成,最经典的应该是使用CSS border属性了,可参见“CSS border三角、圆角图形生成技术简介”一文,如果是纯色三角,使用CSS3 clip-path也是一个不错的方法,关于clip-path文章参见这里

但是有时候我们的三角是带线框的,类似下图这种效果:

如果不考虑兼容性,比较好的做法是border属性生成两侧线框,然后CSS3 transform旋转,但也有局限,那就是如果和三角对接的区域它不是纯色而是渐变背景,则就有问题了,因为此时的三角实际上是个旋转45度的正方形图形块。

此时使用渐变图形生成方法就没有任何压力了,因为可以得到一个真正的三角(135度斜向渐变到对角线位置),示意图如下:

相关CSS代码如下(这里线框也是渐变实现的):

.tri {

    width: 6px; height: 6px;

    background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;

    background-size: 6px 1px, 1px 6px, 6px 6px;

    transform: rotate(-45deg);

}

眼见为实,您可以狠狠的点击这里:基于CSS3线性渐变三角图形生成demo

更新记录(10-29):transparent 6px → hsla(0,0%,100%,0) 6px,新升级Firefox下transparent边缘会有灰色背景渲染bug,使用rgba或hsla白色透明表示可修复。

三、CSS3 linear-gradient线性渐变生成加号和减号

要实现一个减号效果非常简单,例如要实现一个10px*2px的减号图形,则CSS:

.minus {

    background-image: linear-gradient(to top, #666, #666);

    background-size: 10px 2px;

}

原理如下,先使用渐变生成一个铺满整个元素背景的纯色(#666)渐变图片,然后使用background-size属性控制成我们想要的大小,效果就实现了。

加号效果也是类似,只是要多一层linear-gradient的累加。

最终可以实现类似下图效果:

和传统::before, ::afetr伪元素配合background-color或border相比,使用渐变背景生成有个非常重要的好处,那就是居中定位非常方便,直接在background属性后面加个center即可,而传统实现通常需要绝对定位,然后再巴拉巴拉一通代码来居中,很啰嗦的。

眼见为实,您可以狠狠的点击这里:基于CSS3线性渐变加号和减号图形demo

四、结束语

本文可以说是渐变图形生成最基本入门,有个比较著名的CSS纹理网站CSS3 Patterns Gallery,这里面这些地方基本上全部都是使用CSS3渐变实现的,不仅有线性渐变,还有径向渐变。

有兴趣的话可以看看,比如说了解一些全面的实现原理等,但实际开发的时候,我们其实用的并不多,反而是本文介绍的这些基础的简单实用图形更加受益。

对于径向渐变,我目前玩得还不是很深入,等以后发现好玩的东西给大家介绍。

好,就这些内容吧,权当抛砖引玉。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容