会员专栏

CSS中的数量查询

CSS的数量查询是一个先进的概念,对于新手来说可能有点难或者蛋疼。然而,当我们理解清楚了CSS3的伪类选择器,并且能运用自如,那么理解文章介绍的数量查询并不是复杂的事情。而且这样的工具将会越来越多,比如CSS的预处理器和后处理器都具备了这方面的功能。有了CSS的数量查询这个新概念和功能,我们在页面中就可以根据数量来选择到匹配的元素。如果你感兴趣,不仿自己跟着这篇文章尝试一下。你会有更深入的体会。

Web中的图标

随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>。除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧图)Icon Font(字体图标)SVG Icon等等。今天我们就来一起探讨一下这些方法在Web中实现Icon的利弊。

前端路上的旅行

从步入社会算起到今天,风风雨雨走过了15个年头,望着天空,掐指一算,从事前端已近五个年头。也算三分之一的时间在做前端,也是从事过时间最久的一份工作。问我为什么能做这么久?其实我也时常问自己,怎么就进前端这个行当,怎么就整了五年。正如网上所言,一入前端深似海。玩了五年,或许后面还会有一个五年,两个五年,或许...... 未来的路,谁与说不清楚,我只想每天走好自己想走的路。

SVG Sprite

Sprite(雪碧图)在Web运用中已不是新技术,但大部分同学都还停留在位图的Sprite运用,比如.png图的合成。而这种技术对于现在的Web页面而言并不完美,比如位图在Retina屏幕带来的图标不清晰等现像,是我们技术人员必须面对的一件事情。而今天要说的,就是如何避开使用位图制作Sprite,来适应所有屏幕的显示。而这种技术就是SVG的Sprite来替代早期的位图Sprite。

CSS Blend Modes(Part1)

在现代浏览器中可以使用mix-blend-modebackground-blend-mode属性实现Photoshop中的图层的混合模式。属性值有lightenmultiplyhard-light等,这些属性在CSS中运用效果和Adobe Photoshop效果完全一样。即使每天都在Photoshop中使用它们,但了解混合模式的人相对较少。在这篇文章中,我将介绍基本的混合模式是什么,它们是如何工作的?

纯CSS写的小雨打在窗户上效果

华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上。站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐。似乎如此的场景只有在诗中才会出现。那么今天我们一起来用CSS技术来描绘这样的一个场景。这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAMLSass

纯CSS实现内容过滤

内容过滤是一个在Web上常见的一个功能,特别是在电商网站上,为了让用户过滤内容,仅显示符合自己的要求的内容。当初实现这样的一个功能,需要依赖于JavaScript或者jQuery插件来完成,所幸的事,今天我们可以仅使用CSS来实现一个类似的功能,当然比使用JavaScript做的功能简单一些,但这种案例可以拓展我们的思路。感兴趣的同学,不仿自己动手做做。

如何通过Sass将工具转换成可用的混合宏

为了提高码农的开发效率,现在在线上有很多在线小工具,这些小工具可以帮助大家快速实现自己需要的效果,并且可以生成可用代码。前几天看到一个制作三角的小工具,尝试着使用Sass来将其转换成可用的混合宏。尝试成功,来说说怎么实现的。其实只要你有时间,很多小工具都可以用类似的方法来实现。

试探列表中的::marker

前几天有位同学问过一个问题,<li>元素中的子元素浮动(float:left)之后,列表的项目符号会跑到浮动元素的后面。这个问题似乎在三年前碰到过,但又有那么点不一样。后来查阅相关文档,了解到,造成这个问题就是列表中的::marker造成。虽然将来能解决,但在浏览器还没有支持这个属性之前,我们也只能另寻途径,先解决问题,感兴趣的同学可以先跟我一起初探::marker

如何处理CSS3属性前缀

今天闲来无聊,重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说:"为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin。"姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性。也这样让我在思考,那么有了Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不是已失去了他存在的意义。带着这样的为什么?我们一起来开启今天有关于CSS3前缀的探讨。

页面

返回顶部