木灵鱼儿
阅读:2108
CSS3文字渐变效果
暂时还是需要加前缀才可以生效,而且只支持webkit,个人测试电脑端新的浏览器都是可以支持的,除了ie不行,手机端我测试了安卓7.0和火狐浏览器,都是可以显示的,所以日常用一用还是可以的!
效果图:
代码:
-webkit-text-fill-color: transparent;
background:linear-gradient(to bottom,#666 50%, #aaa 50%);
-webkit-background-clip:text;
注意:
原理是通过设置文字填充为透明,然后让背景色渐变显示到文字中,background-clip:text将渐变展示为文本大小。
由于这个属性暂时只支持-webkit-,所以按道理来讲,我们设置渐变的时候也是要加上-webkit-前缀,但是由于浏览器已经都支持了,前缀被取消了,所以你加了前缀反倒没有效果,这个地方要注意下。
"原版:background:-webkit-linear-gradient(to bottom,#666 50%, #aaa 50%);"
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
css使用系统字体作为网页字体最佳实践
目前前端对字体的选择,最好的做法就是用系统的默认字体,这样省去了对每个操作系统的字体判断,谁知道我们指定的这个字体用户安装没有,而且字体文件一向都很大,特别是中文字体。但是对于指定系统字体,其实也是需要兼容的,这里就放上一个专业的字体文章:《奇思妙想 CSS 文字动画》;虽然这个文章名字叫动画,但是里面内容很丰富,自己学习。以css-tricks的为模板,提取其中精华,大概是这么一条信息:{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

fetch 请求报错处理思路
之前写过一片使用fetch下载文件的方法,但是如果后端返回一个错误对象,使用response.blob()会将这个错误对象直接转为blob对象,然后被转为文件下载下来。但实际上我们是要区分处理的,比如是文件流我们就下载文件,是错误对象,我们就进行错误提示和抛出错误。所以这里,我主要分享下我对错误处理的思路。基础知识首先,在fetch第一个then回调中,我们可以对response对象进行三种方法操作:response.text 返回的是一个纯文本 是一个promise对象response.json 返回的是一个对象(json/array) 是一个promise对象response.b...

Ajax 表单序列化
什么是表单序列化呢?将所有表单的提交通过一个标准化的方法去获取并且提交出去,那就是序列化,也就是说不同的表单,如注册啊,登录啊,修改资料啊,这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求:不能发送禁用的表单字段;只发送勾选的复选框和单选按钮;不发送type是reset、submit、file、button以及字段集;多选选择框中的每个选中的值单独一个条目;对于select元素,如果有value值,就指定value作为发送的字段,如果没有,就指定text值;已经将ajax的代码作为单独的一个文件保存,而调用则使用ajax()的方法,之前也做了一个表单提交的方法,在所有条件...
YoDu魔改版主题v3.1更新 (修复bug)
YoDu魔改版主题v3.1更新:修复了长代码在小分辨率下无法换行问题。针对表格代码做了样式调整。回复可见代码微调。修复了footer元素由于启用了css3的弹性布局,导致tim使用软件内浏览时,其内核过旧不能支持,特重新调整,改为css2特性,取消了footer的背景渐变。字体大小调整。

自定义insertAfter() 在当前元素节点的后面添加新的内容
由于document中并没有insertAfter()这个功能,只有insertBefore()在当前元素节点的前面添加新的内容,在后面添加是没有的,但是我们可以自己做一个有这个功能得函数。首先有几点前提条件:该元素节点后面有其他同级得节点如果没有同级得节点他应该就是最后一个节点由于我们写html时会有换行得操作,导致产生了空白节点,所以我们还需要移除这个空白节点才能正常操作。我们先写一个简单得html代码:<body> /*这是该元素为最后一个节点*/ <div id="box"> <p>1</p> <...
用渐变来模拟斑马纹
斑马纹应用很广泛,用于表格,代码展示,列表展示等等,一般都是先给每一行加一个block的父元素,然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素,这样就会产生一个问题,第一行一般都是标题之类的,这样写会让标题和内容部分相同,于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以,但是岂不是很麻烦,需要给每一个子元素加一个block,如果子元素本身就是block那好办,如果不是呢,只是纯文本呢,那不是还要用js去选择,得不偿失,于是我们可以试着用背景层去模拟,然后用em或者rem单位控制大小,这样,既可以自适...

创建渐变条纹linear-gradient以及一些感悟
渐变条纹linear-gradient一些感悟:条纹背景其实用的还是比较少的,主要是因为色彩的调控,有点喧宾夺主,如果是只是简单的页面,非多内容的,其实也可以考虑用色彩比较淡一些的条纹做为背景,然后内容部分用颜色块去凸显主体,不过个人是没有这个调控能力,等以后有机会再试试吧!先我们来讲讲linear-gradient的代码意思:background: linear-gradient(#58a 50%,#999 70%); 这是一段常见的背景渐变,淡蓝色在上面,灰色在下面。如图:这里的50%和70%就需要特别说明一下,这个百分百并不是指颜色占据的高度或者宽度,而是颜色渐变的起始点、结束点,...

CSS的简写形式合集
注:| 符号为空格!font:italic(font-style:字体倾斜样式)|small-caps(font-variant:小型大写字母)|bold(font-weight:字体粗细)|12px(font-size:字体大小)/1.5em(line-height:行高)|arial,verdana(font-family:字体);例:完整写法:font:italic small-caps bold 12px/1.5em arial,verdana;简单写法:font: 12px arial,verdana; [字体大小必须在前面!]简写形式必须要有font-size和font-fa...
这次把主题升级了下,然后哭着改完CSS(多列布局属性)
距离自己上次魔改主题也过去了一段时间,说实话我差不多把自己改的地方都忘了,然后这次脑子一抽就更新了,然后就是666.....从凌晨2点左右就在搞了,各种更新调试,只能怪自己不熟练,找了好多地方调整,然后本来如果是直接在原来的css的属性上改会比较省事,但是发现以后要是再更新,那我不得想死,于是又单独开了一列,用了超多!important属性,然后呕心沥血的改好了,防止自己作死删了修改好的源文件,直接贴上大部分的CSS吧!又需要也可以自己粘贴使用哈哈,不过仅限于YoUDu这个主题。说下心得:本来我是想着既然css3出了一个多列布局的属性,那么不用白不用,就来体验下,发现,这个属性最大的bu...
