CSS秘密花园:多边框

Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image属性来模拟。不过,WG显然忘记了在 CSS 代码中灵活地调整边框,才是我们需要的,现在开发者只能使用一些Hack手段来模拟多重边框,比如使用多重元素的嵌套来模拟多重边框。现在,我将告诉你一些更优秀的方法,无需使用多余的标签即可实现多重边框。

CSS秘密花园:透明边框

虽然在border-color上能运用rgba()hsla()设置边框为半透明或完全透明,如果元素设置了背景颜色或背景图片的时候,会直接影响边框的透明颜色效果。特别是,要看到边框底下的内容时。造成这个现象是由于背景图片会延伸到边框底部。要解决这一问题,可以通过CSS3的background-clip来修正。@Chris Coyier早在2010年的时候就在CSS-Tricks详细介绍过这方面的知识

CSS vs SVG: 美化复选框和单选按钮

这是有关于CSS和SVG技术对比的系列文章第二篇,目的是通过示例解释两者的利弊,更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。在上一篇文章中,我们讨论了使用CSS和SVG创建带纹理的文本效果,并得到结论是:目前阶段,使用SVG比使用CSS做更方便,更强大。在这篇文章中,我们将处理自定义的复选框和单选按钮的效果。

CSS vs. SVG:图形文本的效果

这篇文章是探索有关于CSS和SVG技术的系列文章第一篇,通过例子来阐述CSS和SVG相关技术的比较。因为大家对SVG有一定的偏见,这个系列文章只是为了证明SVG解决Web上的某些设计问题。因为它是自然图像。但从客观的角度来看,我们要考虑每个技术的利弊,找出何时何地使用CSS或SVG更好。在这篇文章中,我们将复习一些使用CSS或SVG创建图形文本的技术和相关影响。

float是如何工作的

虽然现在很少使用浮动,但在某些情况下,浮动是唯一可行的解决方案。偶尔会觉得很沮丧,因为我觉得浮动应该起作用但是它并没有。所以我决定研究下浮动的工作原理以及如何正确的使用浮动。

[转载]2015前端组件化框架之路

Web应用的组件化是一个很复杂的话题。在大型软件中,组件化是一种共识,它一方面提高了开发效率,另一方面降低了维护成本。但是在Web前端这个领域,并没有很通用的组件模式,因为缺少一个大家都能认同的实现方式,所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了,没有哪个别的领域能出现这么混乱而欣欣向荣的景象。这一方面说明前端领域的创造力很旺盛,另一方面却说明了基础设施是不完善的。

[转载]前端工程——基础篇

不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的角度系统的介绍一下我对前端,尤其是Web前端的理解。只要我们还把自己的工作看作为一项软件开发活动,那么我相信读过下面的内容你也一定会有所共鸣。

CSS element()函数

七月份我写了一篇有关于先进的CSS filters技术,比如说backdrop-filterfilter()的特性。今天我想分享一个更牛逼的CSS特性。但是在分享之前让大家先知道,这个特性到目前为止只有Firefox浏览器支持,而且其他浏览器还没有表示要支持这个特性。当然,有可能后面会支持这个特性,但这并不影响我们一起对这个特性的探讨。

CSS模块

如果让你选出一个近期CSS发展的转折点,你很可能会选2014年11月NationJS大会上Christopher Chedeau关于“CSS in JS”的分享。那个时刻是个分水岭,一系列不同的想法像经历过高能碰撞一样在各自方向上螺旋上升。例如,React Style, jsxstyleRadium 是目前在React中写样式的三个最新,最好,最可行的方法并且所有的参考资料都在它们的项目Readme中。如果发明是对于相邻可能性的一种探索,那么Christopher的责任是让许许多多的可能性更加靠近。

SVG中的结构化、分组和引用元素

SVG有自己结构化文档的方式。通过某些SVG元素,我们可以在文档中定义、分组以及引用对象。这些元素使得元件重用变得简单,而且还保持了代码的简洁性和可读性。在这篇文章中我们将讲解这些元素,并指出它们之间的区别,以及每个元素各自的优势。

页面

返回顶部