文章关键字 ‘background’

我们一起学习CSS image-set()

2019年11月17日,星期日

我们一起学习占位图

我们无法一起学习,但是我们可以一起谈恋爱。我们无法学习CSS image-set(),但是我们可以看唯我成幸和众妹子们一起学习CSS image-set()方法。

阅读全文…

是时候了,无外链的CSS开发策略

2019年08月17日,星期六

无外链的CSS开发

是时候了,如果你的项目不需要兼容IE8浏览器,则试试贯彻下面这条CSS开发策略:CSS文件永无外链!好处多多哟。

阅读全文…

CSS实现文字下面波浪线动画效果

2019年04月21日,星期日

波浪线头图占位图

很多人对本站部分链接hover时候出现的波浪线动画很感兴趣,本文就专门介绍相关的技术实现,共介绍两种web前端实现方法,希望可以对感兴趣的人带来帮助。

阅读全文…

写给自己看的CSS shapes布局教程

2019年02月2日,星期六

CSS Shapes布局

本文详细介绍CSS Shapes布局,兼容性不错,移动端项目和中后台项目都可以使用,可以实现很多很棒的布局效果,需要和浮动配合使用。不仅支持基础图形,还支持PNG,SVG图像,以及渐变图形的环绕效果。是非常值得学习的一种布局方式。

阅读全文…

CSS届的绘图板CSS Paint API简介

2018年11月26日,星期一

CSS Paint API绘制

本文介绍CSS Paint API,CSS Paint API是CSS Houdini的一部分,是目前应用比较多的API之一,其是做什么用的呢?有什么好处呢?本文就将通过一个简单的案例,带你快速了解CSS Paint API,本文属于大发时时彩广度方面的学习,博闻强识。

阅读全文…

CSS <position>值简介理解background百分比定位

2015年03月16日,星期一

MDN上<position>值解释是:一种CSS数据类型,2D坐标空间,用来设置相对盒子的坐标。

我们经常使用的background-position的值就是<position>值,最近刚介绍的object-position的值也是<position>值。

<position>值支持1~4个值,可以是具体数值,也可以是百分比,也可以是……

阅读全文…

小tips: CSS3 webkit下彩条文字效果实现

2015年03月15日,星期日

此效果用的是以前介绍过的两个技术实现,第一个就是CSS3实现纹理图案背景,第二个就是文字遮罩实现。两者合在一起就可以实现彩条文字效果了。

阅读全文…

半深入理解CSS3 object-position/object-fit属性

2015年03月15日,星期日


现代web显示环境万变,响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局(任意宽度水平自适应)都比较常见,结果,在处理这些有着固定尺寸的元素的时候,就会遇到障碍,例如,一个2:1的视频,永远要等比例充满容器,但是,随着浏览器宽度不一样,容器的长宽比有可能小于2,也有可能大于2. 你说,你能轻松实现小于比例2时候,视频宽度100%;比例大于2的时候,高度100%吗?

显然,很麻烦,最后大多还是使用JS去把控。正是为了应对类似这样的响应式需求,object-fit和object-position才应运而生……

阅读全文…

SVG特征、支持以及一些实际使用问题

2012年08月22日,星期三

去年9月份曾写过“使用SVG实现gradient背景渐变”一文,其中有对SVG比较术语化的解释,以及SVG的创建、SVG编辑器使用、简单的实际应用等。
不过,之前的介绍,虽然也有内容,不过总给人以生硬之感,仿佛是直接从山上凿下的原石,没有美化与雕琢。而这里的介绍(自然没有重复)似乎更接地气些,应该会给你一点别样的关于SVG的收获。

一如既往,有demo,有截图,有源代码示意。希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip:巧用CSS3属性作为CSS hack

2011年08月15日,星期一

本文是个短篇,一点小技术的展示。如何妙用CSS3属性作为CSS hack来实现一些兼容性的页面效果,同时,又能兼顾一些现代浏览器。提供demo页面,必要截图以及源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…