跳到主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
svg filters

18 篇文章
{
,

}
文章“颗粒感渐变”的直接链接
背景 滤镜 渐变 svg 滤镜

颗粒感渐变

浏览 Dribbble 或 Behance,你会发现设计师使用一种简单的技巧为图像添加纹理:噪点。添加噪点使原本纯色或平滑的渐变(如阴影)更加真实。但尽管设计师对纹理情有独钟,…

Avatar of Jimmy Chion
Jimmy Chion 发表于 2021 年 9 月 14 日
文章“使用 CSS 和 SVG 滤镜为 SVG 图标添加阴影”的直接链接
阴影 滤镜 阴影 SVG svg 滤镜

使用 CSS 和 SVG 滤镜为 SVG 图标添加阴影

为什么要为 SVG 应用阴影?

  1. 阴影是一种常见的界面设计特性,可以帮助元素(如图标)脱颖而出。它们可以是永久性的,或者在不同的状态下应用(例如 :hover、:focus 或 :active)
…
Avatar of Joel Olawanle
Joel Olawanle 发表于 2021 年 6 月 11 日
文章“使用 SVG 滤镜创建图案”的直接链接
SVG svg 滤镜 svg 图案

使用 SVG 滤镜创建图案

多年来,我一直无法在 CSS 中创建某种看起来自然的图案,这让我很头疼。我的意思是,有时我只需要一个木纹材质。我所知道的唯一可用于生产的解决方案是使用外部图像,…

Avatar of Bence Szabó
Bence Szabó 发表于 2021 年 3 月 15 日
文章“三种使用 CSS 和 SVG 创建 Blob 的方法”的直接链接
Blob 圆角 滤镜 SVG svg 滤镜

三种使用 CSS 和 SVG 创建 Blob 的方法

Blob 是那些光滑、随机、果冻状的形状,它们具有异想天开的感觉,而且本身就很有趣。它们可以用作 网页上的插图元素和背景效果。

那么,它们是如何制作的呢?只需打开一个插图…

Avatar of Akash Mittal
Akash Mittal 发表于 2021 年 2 月 19 日
文章“CSS 中的 SVG”的直接链接
滤镜 SVG svg 滤镜

CSS 中的 SVG

Stefan Judis 有一篇“今天我学到了”(TIL)文章解释了 如何在 CSS 中内联 SVG 滤镜。其思想是 CSS 具有 filter 属性,该属性支持一些内置函数,如 grayscale(100%) 等。

但是…

Avatar of Chris Coyier
Chris Coyier 发表于 2021 年 2 月 8 日
文章“在 SVG 中创建铅笔效果”的直接链接
SVG svg 滤镜

在 SVG 中创建铅笔效果

Scott Turner,他有一个名为“探索幻想地图的程序生成和显示”的 完整博客,深入探讨了为什么矢量图形在表面上看起来不适合铅笔笔触的外观

类似于这种铅笔

…
Avatar of Chris Coyier
Chris Coyier 发表于 2020 年 3 月 29 日
文章“使用 SVG 制作逼真的玻璃效果”的直接链接
SVG svg 滤镜

使用 SVG 制作逼真的玻璃效果

我爱 SVG。当然,代码一开始看起来可能很密集且难以理解,但当你了解它时,你会发现结果的美丽之处。好处是这些结果都在代码中,因此它…

Avatar of David Fitzgibbon
David Fitzgibbon 发表于 2019 年 8 月 1 日
文章“使用 SVG 和 CSS 绘制逼真的云彩”的直接链接
盒子阴影 svg 滤镜

使用 SVG 和 CSS 绘制逼真的云彩

希腊神话讲述了宙斯创造云仙女涅菲勒的故事。与其他希腊神话一样,这个故事也变得非常离奇和色情。这是一个非常简略、礼貌的版本。

据说,涅菲勒是由宙斯在…

Avatar of Beau Jackson
Beau Jackson 发表于 2019 年 6 月 26 日
文章“悬停时更改 SVG 的颜色”的直接链接
SVG svg 滤镜 svg 图标

悬停时更改 SVG 的颜色

有很多不同的方法可以 使用 SVG。根据使用方式,在不同状态或条件下(:hover、:active、:focus、类名更改等)重新着色 SVG 的策略是不同的。…

Avatar of Chris Coyier
Chris Coyier 发表于 2019 年 5 月 13 日
  • 1
  • 2
  • 较旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.