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

Links

我们正在阅读的来自网络各处的文章,以及我们的一些想法。 有我们应该知道的链接吗?告诉我们!

Clarity 图标中的 SVG 和自定义元素之路

🔗 https://medium.com/claritydesignsystem/the-road-to-svg-and-custom-elements-in-clarity-icons-1d691c6cc91
阅读评论

又一天,另一个设计系统决定 SVG 图标系统是最好的选择。

每个人在做出这样的选择时都有自己的考虑因素。Scott Mathis 记录了 Clarity 的主要考虑因素:退出、大小、多色、交互性、规模和未来。 基于这些,他们最终使用了自定义元素 (<clr-icon>,它本质上是在行内 <svg>),就像 Etsy 一样.

非矩形标题

🔗 https://medium.com/ux-power-tools/tiny-trends-1-non-rectangular-headers-e8d2d4ee578f
阅读评论

Jon Moore 记录了一种趋势,即设计选择非矩形标题。 斜面、圆角、图像裁剪,甚至是奇怪的不规则多边形。 我是说,什么样的网站会把一个奇怪的不规则多边形作为标题呢?

Etsy 的演进中的图标系统

🔗 https://medium.com/etsy-design/etsys-evolving-icon-system-41c55a639be2
阅读评论

Etsy 从生产中的图标字体转向使用 SVG。 它将是一个内联 <svg> 系统,但抽象为 <etsy-icon> 自定义元素,方便使用。

两分钱

  • 如果我们有一个更方便的 <use> 语法可用,我可以理解这种抽象的必要性,例如:<svg use="icons.svg#cart" />
  • 我喜欢他们对图标一致性的专注。 我在这方面很努力。 SVG 图标流程很容易使用,新图标也很容易找到并插入,因此一致性可能会受到影响。 那个网格,以及示例,简直是金子。
  • 他们仍然在构建过程中构建图标字体,供设计师在设计软件中使用。

最后一个让我很惊讶,因为我认为当您需要使用的图标被分配到字体中的某个随机字符时,找到要设计使用的正确图标会很痛苦。 我认为 Sketch 或 Illustrator 中的“符号”概念将使设计师能够非常容易地找到和使用这些图标。 这让我想到字体实际上提供的功能是设计软件之间的**互操作性**。 我想知道像Lingo或Iconjar这样的软件在这里是否会有所帮助。

横向和纵向文字的网页奖项

🔗 http://tategaki.github.io/awards/index.html
阅读评论

“Tate-Yoko 网页奖”颁发给那些愿意通过设计和利用最新的 CSS 编码中的新排版标准来挑战下一代网页排版的人。

也许奖项网站应该赢得该奖项。

xvg

🔗 https://xvg.now.sh/
阅读评论

Varun Vachhar

一个 Chrome 扩展程序,用于通过将 SVG 路径转换为轮廓并显示锚点、控制点、手柄和圆弧椭圆来调试 SVG 路径。

对这个开源项目的绝妙贡献是使所有这些点都可拖动,然后能够输出新调整的代码。

另外,浏览器扩展不是即将实现互操作性吗? 看来社区小组已经完成了很多工作.

介绍支付请求 API

🔗 https://blogs.windows.com/msedgedev/2016/12/15/payment-request-api-edge/
阅读评论

据我所知

  • 这是基于标准的 Web 支付 JavaScript API 的早期阶段。 就像,var payment = new PaymentRequest(methodData, details, options);
  • 对于用户来说,这意味着潜在的更好的 UX。 支付方式由浏览器存储,并与这些浏览器现有的专有支付系统(例如 Microsoft Wallet)配合使用。 这意味着用户不必像以前那样频繁地填写支付表格,他们只需选择支付方式即可。
  • 对于开发人员来说,从长远来看,这意味着不必创建这些支付表格并验证数据以及所有这些工作。 您将免费获得支付流程的 UI 和 UX。 虽然目前,您所能做的最好的就是逐渐增强到这一点,因此现在需要更多工作。
  • Microsoft有文档,Google 也有.

春季的网页动画研讨会

🔗 https://webanimationworkshops.com/
阅读评论

网页动画研讨会 在春季重新开始,今年我们将前往旧金山、芝加哥和巴黎,一些日期尚未公布。 Val Head 和我联手为您带来两天满满的内容和练习,这样当您离开课堂时,您不仅会了解在不同技术栈/环境中如何进行动画的技术,还会了解为什么。 以下是我们涵盖的一些内容

继续阅读 →

从 Sass 到 PostCSS

🔗 https://tylergaw.com/articles/sass-to-postcss
阅读评论

Tyler Gaw 记录了他从 Sass 迁移到 PostCSS 的过程,但保留了**大部分**代码。 这意味着要确保他使用的是 PostCSS 插件,这些插件可以复制 Sass 的大部分功能,比如嵌套和混合等等。

Tyler 被说服了。 我发现这是一个有趣的实验,而且很高兴知道这是基本可能的,但我还没有被说服。

现在,您不再只将 Sass 作为依赖项,它是一个活跃的健康项目,而是将一大堆不同作者的插件作为依赖项。 为了什么? 假设您使用 libsass,您不会获得任何速度。 如果您喜欢某个特定的 PostCSS 插件,使用 Sass 并不会阻止您也使用它。 我绝对不建议预处理那些自定义属性,因为它们不是可以互换的东西.

设计系统中的动画

🔗 https://24ways.org/2016/animation-in-design-systems/
阅读评论

我们自己的 Sarah Drasner

与字体、颜色等不同,我们倾向于在最后一步添加动画,这会导致缺乏整体一致性的混乱实现。 如果您问设计师或开发人员他们是否会在不知道他们使用的字体的的情况下创建模型或构建 UI,他们会不喜欢这个想法。 不知道他们使用的构建块意味着设计可能会崩溃,或者开发可能会因为在开始时就省略了如此基本的东西而中断。 好的动画也是如此。

独立微博:拥有您自己的短篇写作

🔗 https://www.kickstarter.com/projects/manton/indie-microblogging-owning-your-short-form-writing
阅读评论

Manton Reece 为一种新型的社交网络和一本书筹集资金,这两者都旨在鼓励人们再次独立写作

在 Web 的早期,我们总是发布到我们自己的网站上。 如果你对你的网络主机不满意,或者他们倒闭了,你可以移动你的文件和你的域名,什么都不会断开。

如今,大多数写作都进入少数几个集中式社交网络网站,在那里你无法移动你的内容,广告和虚假新闻无处不在,如果其中一个网站失败,你的内容就会从互联网上消失。 太多的网站消失了,带走了我们的帖子和照片。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速点击 →
  • 更新
  • 1
  • ...
  • 113
  • 114
  • 115
  • ...
  • 219
  • 较旧的

CSS-Tricks 由DigitalOcean提供支持。

随时了解 Web 开发

使用我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获得免费积分!
CSS-Tricks
  • 为我们写作!
  • 与我们做广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.