文章关键字 ‘css相关’

几种CSS渐变背景图片transtion动画方法

2018年03月25日,星期日

background-image不支持CSS3 transition,因此,当CSS3 gradient渐变作为背景图片存在的时候,直接设置transition是不会有过渡效果的,那该怎么办呢?

阅读全文…

CSS百分比padding实现比例固定图片自适应布局

2017年08月17日,星期四

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的……

阅读全文…

小tips:了解CSS变量var

2016年11月26日,星期六

在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。

本文几乎就是业界关于CSS3 var()变量首发的文章,希望里面的内容能够对您的工作和学习有所帮助~~

阅读全文…

找到适合自己的前端发展方向

2016年08月26日,星期五

前端发展迅猛,除了自身更加厚重外,往前以及往后都有了发展和延伸,当前对前端的要求更高,而人的精力总是有限的,这个时候,就需要我们把有限的精力放在更适合自己发展的方向上,那应该放在哪个方向上呢?本文就将通过我自身的经验、观察和认识,为大家指明前进的道理。

阅读全文…

PNG格式小图标的CSS任意颜色赋色技术

2016年06月8日,星期三

CSS可以修改图片的颜色,没错,可以,本文就带你一睹真相,再次领略CSS的潜力和造诣。

阅读全文…

秋月何时了,CSS3 border-radius知多少?

2015年11月1日,星期日

深入理解CSS3 border-radius的一些特性表现。平时使用的那点东西只是浮于表面的,实际上,border-radius支持的属性值呢,还是有点料的,也有很多需要注意的tips. 本文就算是border-radius进阶学习,还是一如既往的,有丰富的截图,表情图,琐碎图,插科打诨图;有丰富的源代码展示,对了,还有纯手动打算的便于学习的demo。希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS混合模式mix-blend-mode/background-blend-mode简介

2015年05月29日,星期五

熟悉PS的人都应该知道混合模式,什么叠加、正片叠底、颜色减淡、颜色加深、滤色……之类的。在web上基本上常见的现代web技术都支持混合模式,例如SVG啊,Canvas等。CSS3自然也不在话下,本文就将介绍CSS3中两个与混合模式有关的CSS属性mix-blend-mode和background-blend-mode,一起进来看看眼界吧~~

阅读全文…

CSS中height:100%和height:inherit的异同

2015年02月15日,星期日

不知大家有没有相关CSS中height:100%和height:inherit的有什么异同?是否可以替换使用?height:inherit的价值在哪里?

本文就将回答这一系列问题,同样的,有截图,有demo,还有必要的源代码展示,总之希望本文的内容对您的学习有所帮助。

阅读全文…

准确理解CSS clear:left/right的含义及实际用途

2014年06月9日,星期一

我们平时一般都使用clear:both清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right,虽知其作用(80%确定而已),但不知其机理。

有必要再次整理下,温故知新。可能很多同行都没有注意left/right值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…

阅读全文…

深入理解CSS3 gradient斜向线性渐变

2013年09月6日,星期五

CSS3斜向渐变,看上去好像挺简单。实际上,其远没有你想得那么简单。本文就将逐步揭开其一些复杂、特意的地方。避免您在日后的使用中掉进坑里。
很多自己制作演示图,希望本文的内容能够对您的学习有所帮助。

阅读全文…