使用CSS3 Gradients创建图片占位符
图片占位符,我们最常用的方案就是留空白区域,或者使用空的div标签来模拟,甚至使用一张背景图片来做。但这些方案都不是一个完美的方案,那么什么是完美的方案呢?今天我们通过CSS3的渐变来实现图像的占位符功能,这种方案既让你的代码更为干净,而且还可以帮你减少HTTP的请求数。最后还通过使用Sass让你实现自动化功能。感兴趣的同学请点击阅读正文。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
图片占位符,我们最常用的方案就是留空白区域,或者使用空的div标签来模拟,甚至使用一张背景图片来做。但这些方案都不是一个完美的方案,那么什么是完美的方案呢?今天我们通过CSS3的渐变来实现图像的占位符功能,这种方案既让你的代码更为干净,而且还可以帮你减少HTTP的请求数。最后还通过使用Sass让你实现自动化功能。感兴趣的同学请点击阅读正文。
和其他视觉设计相关的媒体一样,在 Web 上各类大小、颜色、角度不同的纹理也非常流行。不过,实现这些纹理的技术却并不理想。通常,我们需要创建独立的位图,如果有需求变更的话都需要重新更改文件。有些开发者使用 SVG 替代位图,但是 SVG 仍然是一种独立的文件,而且其语法也不够友好。那么是否有一种出色的方法让我们直接在 CSS 中创建纹理呢?你会惊喜的发现,我们将在文中逐步解决这一问题。
渐变是一个很意思的CSS3属性,有了它可以帮助我们解决很多问题。而这篇文章的内容源于@Keith Clark最近在Twitter发的帖子。CSS的重复线性渐变可以做些什么?我们使用线性渐变和background-size
能做出相同的效果吗?而且有哪些效果是linear-gradient
和background-size
结合在一起无法完成的效果。
想要在你的网站有一个好看的渐变背景吗?background-image:linear-gradient(red,blue)
,就能很轻易的实现一个red
至blue
的渐变背景图片。就是这么的简单。感觉老话重提,有点无聊。如果您想了解更多这方面的知识,建议你阅读以前整理过的相关文章。我也推荐css-tricks和MDN上的相关文章。
最近我在 Codepen 上看到了一个例子,我的第一个想法是这个案例可以只用三个元素完成:一个容器,一个 range
类型的 input
和一个 output
。在 CSS 方面,涉及到使用一个把 CSS 自定义属性作为范围渲染参数的圆锥渐变函数 conic-gradient()
。
记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力,把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果:CSS如何实现内凹角的效果。
假设我告诉你,我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码,也没有使用图像(只是在html
元素上使用了background
设置了一个背景图片,只是为了表明这个元素有一些透明的部分),同样也没有使用JavaScript代码。你一定会觉得很神奇,对吧!有好奇之心,对于我们做前端的同学而言,应该一直都有,只有这样才能做出很多我们一直以为实现不了的效果,比如接下来要介绍的内容。
这里所说的绘制是指CSS图像,即使用HTML元素和CSS属性绘制的图像。它们看起来像是Adobe Illustrator绘制的svg
,但它们是在浏览器中渲染出来的。我所见过的一些技巧是使用border
、box-shadow
和clip-path
来绘制图像。如果你在Codepen搜索“daily css images”,你会发现有很多优秀的案例。我自己也画了一些,也做过一些极限挑战,就是在一个元素上使用background
和尽量使用其他属性来绘制图像。
到目前为止,CSS的渐变属性linear-gradient
和radial-gradient
已经是很成熟的CSS特性了,而且repeating-linear-gradient
和conic-gradient
也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了,它们可以帮助我们绘图、创建图片占位符、制作环形进度条等等。另外还可以通过transition
和animation
让渐变动起来。
CSS的渐变主要分布在 CSS Images Module Level 3 和 CSS Image Values and Replaced Content Module Level 4 两个规范模块中,其中Level 4 和 Level 3相比,新增了conic-gradient()
和repeating-conic-gradient()
两个属性。在CSS中,CSS的渐变相当于图像,我们可以使用线性渐变(linear-gradient()
和repeating-linear-gradient()
)、径向渐变(radial-gradient()
和repeating-radial-gradient()
)和锥形渐变(conic-gradient()
和repeat-conic-gradient()
)。事实上这三种渐变就相当于背景图像,而且渐变通常是一种颜色渐变到另一种颜色,但是CSS允许你控制渐变发生的每一个方面,从方向、形状到颜色,以及它们如何从一个渐变到另一个渐变。在这篇文章中,主要和大家一起探讨有关于CSS渐变相关的话题。