CSS秘密花园

CSS秘密花园:复杂背景图案

上一节中,我们学习了如何使用 CSS 渐变创建各种类型的条纹。不过,条纹并不能代表所有的背景图案,最多只能算是背景中的几何图案。此外,我们还会常常用到许多类型的背景,比如网格、波尔卡圆点、棋盘格等等。值得庆幸的是,CSS 的渐变属性就可以帮我们创建这些背景图案。虽然几乎可以使用 CSS 的渐变创建各种类型的几何图案,但是这些背景图案的效果并不具有实用性。如果开发中稍不注意,那么代码就会迅速变得冗杂和繁琐。CSS 的背景图案也是非常适合使用 CSS 预处理器来处理的问题之一,比如可以使用 Sass 来减少重复背景图案中的重复工作。

CSS秘密花园:条纹背景

和其他视觉设计相关的媒体一样,在 Web 上各类大小、颜色、角度不同的纹理也非常流行。不过,实现这些纹理的技术却并不理想。通常,我们需要创建独立的位图,如果有需求变更的话都需要重新更改文件。有些开发者使用 SVG 替代位图,但是 SVG 仍然是一种独立的文件,而且其语法也不够友好。那么是否有一种出色的方法让我们直接在 CSS 中创建纹理呢?你会惊喜的发现,我们将在文中逐步解决这一问题。

CSS秘密花园:内凹圆角

border-radius属性在CSS中已经不是什么新东东。大家都知道它可以帮助大家很容易完成圆角效果。有些时候,我们只希望容器的内部边框是圆角的,但是外部轮廓线要是矩形的,要完美的实现还是需要一定的技巧的。这篇文章告诉大家如何通过数学中的勾股定理来实现内凹圆角效果。

CSS秘密花园:灵活的背景定位

在 CSS 2.1 中,只能指定图片相对左上角的偏移量,或者使用关键字定位到其他的角落。如果需要让背景图距离元素四边距有一定的偏移量,相对而言是较为麻烦。在这篇文章中,作者通过background-position新特性、修改background-origin以及calc()函数等三种方法,实现了一种灵活型的背景图定位。希望这篇文章对大家有所帮助。

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秘密花园: CSS 编码技巧

第一篇整理了有关于W3C标准规范的阐述,让大家对W3C组织有了更进一步的了解。今天整理了第二篇文章,这篇文章主要介绍了在编写CSS时有何技巧,在实际编码中如何注重这些细节。比如CSS属性的简写、响应式设计中的一些注意事项以及我们在实际开发中要不要使用CSS预处理器等。

CSS秘密花园:Web 标准是友是敌?

CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是CSSer值得一读的一本书,经过一段时间的阅读,我、@南北@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。在这篇文章主要介绍了有关于Web标准(W3C)一些科普知识,让刚刚接触的同学对W3C有一个更完整的了解。

用CSS和SVG制作饼图

饼图,即使是最简单的只有两种颜色的形式,用Web技术创建也并不简单,尽管都是一些常见的信息内容,从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现,或是使用大型的JavaScript框架来设计更复杂的图表。尽管这个东西并不像它曾经看起来那么难以实现,但是也没有什么直接并且简单的方法。但是,现在已经有很多更好、更易于维护的方式来实现它。

页面

返回顶部