CSS

CSS Paint API

CSS Paint API是一个令人非常兴奋的东西,也是令人激动人心的时刻,它将开启CSS新的旅程。接下来让我们一起来看看它是什么,为什么会有它以及如何开始使用它。

CSS布局指南

在过去几年中,CSS布局已经发生了巨大的变化,现在我们开发网站的方式也发生了巨大变化。现在我们有需要可选的CSS布局方式来开发我们的网站,这也就要求我们对这些方式能作出正确而双合适的选择。在这篇文章中,将会介绍各种CSS布局的基本使用方式以及使用的目的。

CSS自定义属性使用指南

CSS自定义属性有很大的潜力可以改变我们编写和组织 CSS 的方式,并且在一定程度上改变 JavaScript 与 UI 组件的调用方式。我并不关心语法和它们的工作方式(为此,我建议你阅读“《是时候开始使用自定义属性》这篇文章。同时我想更深入地研究如何充分使用 CSS 自定义属性。

使用CSS渐变绘图

这里所说的绘制是指CSS图像,即使用HTML元素和CSS属性绘制的图像。它们看起来像是Adobe Illustrator绘制的svg,但它们是在浏览器中渲染出来的。我所见过的一些技巧是使用borderbox-shadowclip-path来绘制图像。如果你在Codepen搜索“daily css images”,你会发现有很多优秀的案例。我自己也画了一些,也做过一些极限挑战,就是在一个元素上使用background和尽量使用其他属性来绘制图像。

一个制作Web图案的组件:css-doodle

Web中使用一些图案做为背景图案是一种时常可见的,早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候,会通过CSS的相关技术,比如CSS的渐变属性配合background-size之类的来做一些复杂而又美观的Web图案,运用于background-image之中。随着前端技术不断的革新,不久前看到一个生成Web图片的组件:<css-doodle /> —— 使用CSS绘制图案的Web组件!

制作Loading组件

最近项目中使用到一个Loading效果,其实是一个很简单的效果,主要是因为这个Loading出现在不同的场景之中,而且大小也不一致。对于这样的效果,往往都会想通过组件的方式来处理,其出发点就是更易维护,易扩展。当然,这对于前端的同学而言并没有什么复杂性,也没有多少技术含量。不过我还是希望把这个过程记录下来。

结合SEM和BIO来改进CSS

有人可能会说,CSS很简单,但是“容易”会导致代码混乱。在大家的眼里,使用像Sass或LESS这样的处理器会让事情变得更为简单。但事实上并不一定如此,如果你使用的不小心,你的CSS将变得更难处理,而不是更易处理。Sass?困难吗?Sass的嵌套就展示了这一点,使用不当,Sass的嵌套就是地狱。如果你的Sass代码看起来像这样的,那么你肯定可以使用SEM和BIO来改进你的代码。接下来我就将向你介绍这方面的CSS技术。

CSS中最全的换行处理方式

在Web页面上常常可以看到某个元素内部有一个很长的单词,元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢?这取决于CSS,那么CSS如何控制布局,以及CSS如何让文本更合理的方式展示。

用CSS Houdini画一片星空

要问2018最让人兴奋的CSS技术是什么,CSS Houdini当之无愧,甚至可以去掉2018这个限定。其实这个技术在2016年就出来了,但是在今年3月发布的Chrome 65才正式支持。CSS Houdini可以做些什么?谷歌开发者文档列了几个Demo,我们先来看一下这几个Demo。

一个HTML元素和五个CSS属性的魔力

假设我告诉你,我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码,也没有使用图像(只是在html元素上使用了background设置了一个背景图片,只是为了表明这个元素有一些透明的部分),同样也没有使用JavaScript代码。你一定会觉得很神奇,对吧!有好奇之心,对于我们做前端的同学而言,应该一直都有,只有这样才能做出很多我们一直以为实现不了的效果,比如接下来要介绍的内容。

页面

返回顶部