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

Links

来自网络各处的我们正在阅读并有一些想法的内容。有我们应该知道的链接吗?告诉我们!

Framer X

🔗 https://framer.com/x
阅读评论

Framer X 是一款即将发布的全新应用程序,这个简短的演示片段带我们浏览了之前应用程序的一些更改——看起来都非常令人兴奋。

作为一名设计师,我对原型工具最感兴趣,能够快速探索一个状态到另一个状态之间的复杂场景转换。但作为一名开发者,我对它如何与 React 结合感兴趣。网站是这样描述的

在你的项目中使用真实的 React 从头开始创建交互式组件。想要更多控制?在组件的属性面板中创建自定义 UI。

我可以想象一个美好的近未来,在那里可以将 Framer X 链接到一个设计系统,以便团队中的成员可以使用所有真实的 React 组件,而无需担心它们是否是最新的。

你可以用 CSS 指针事件做的事情

🔗 https://codepen.io/MartijnCuppens/full/MBjqbM/
阅读评论

Martijn Cuppens(与那个非常奇怪的 div相同的人!)有一些更具吸引力的 CSS 技巧。其中三个示例是关于让子元素触发父元素上的事件(几乎就像:focus-within的魔力)。

这是我如何自己推理出来的

  1. 你知道如果你对一个元素使用display: hidden;,即使你对子元素使用display: block;,也没关系——因为它被隐藏了,因为它的父元素被隐藏了。
  2. visibility: hidden;的情况并非如此。子元素将被隐藏,因为visibility是继承的,但如果你对它们使用visibility: visible;,它们将再次可见。
  3. 这就是这里pointer-events发生的事情。如果你对父元素使用pointer-events: none;,然后对子元素使用pointer-events: auto;,你就在重新启用指针事件。然后,当悬停在子元素上时(例如),将触发父元素上的:hover,但在父元素内部的其他任何地方都不会触发。

并且不要错过pointer-events: visiblePainted; 😳

教你的客户如何使用你为他们构建的网站

🔗 http://mediatemple.net/blog/tips/teaching-clients-use-website-built/
阅读评论

我分享了我自己关于如何教育你刚刚为其构建网站的人的想法。但事实证明,我也非常乐意收集大量其他人的想法。 我在推特上发布了相关信息,并收到了大量的回复,因此本文是所有这些回复的集合。

视觉化。直观。与众不同。

🔗 https://synd.co/2uwQDOy
阅读评论

monday.com 是一款团队管理工具,已获得超过 34,000 个团队的青睐,包括 2 人到 2,000 多人的团队,为初创公司工作的团队,以及为 AOL、Adidas、三星和探索频道等财富 500 强公司工作的团队,仅举几例。

monday.com 非常易于使用,其仪表板显示非常出色地使用了颜色,因此它在非技术导向的团队中与在技术导向的团队中一样受欢迎。事实上,大约 70% 的此团队管理工具的用户可以归类为非技术用户。

你的正文太小了

🔗 https://blog.marvelapp.com/body-text-small/
阅读评论

几年前,设计师们曾大力推动增加网站的字体大小,我觉得我们正处于另一个时代,在这个时代,一批新的设计师正在推动更大的文本大小。例如,请看 Christian Miller 的这篇文章,他在文章中写道

大多数网站的字体大小仍在 15-18px 之间。我们开始看到一些网站在较小的桌面显示器上采用大约 20px 或更大的正文文本,但在我看来,数量还不够。

Christian 将此归因于各种不同的原因,但我特别喜欢这部分

不幸的是,有意设计一个网站以避免滚动是一个常见的错误。为了牺牲设计,正文文本大小被减小,以减少滚动或压缩布局,以便在副本周围容纳其他元素。

滚动是网络上一种自然且已建立的模式——人们期望需要滚动。即使在不可能的情况下,人们也会尝试滚动以查看页面是否在视口中最初显示的内容之外提供更多内容。可读性比所需的滚动量更重要——好的内容不会阻止用户滚动。

我只会对建议稍微提出一点异议——可读性并不总是与文本块的字体大小相关联。很多时候,它与对比度有关——字体是否易于阅读以及它在背景下是否清晰可见。不过,总的来说,这篇文章中对新老设计师都提供了很多很好的建议。

字体游乐场

🔗 https://play.typedetail.com/
阅读评论

这是张文婷的一个奇妙的小项目,展示了一系列可变字体,并允许你操纵它们的设置以查看结果。有趣的是,在过去的几个月里,发布了如此多的类似工具,例如v-fonts、Axis-Praxis和Wakamai Fondue,仅举几例。

CSS:一种新型的 JavaScript

🔗 https://medium.com/@Heydon/css-a-new-kind-of-javascript-fcf730d33ce7
阅读评论

在这篇古怪且讽刺的帖子中,Heydon Pickering 描述了一种名为层叠样式表的新技术,它解决了你在使用 JavaScript 样式化事物时可能遇到的许多问题

一项技术不适合其用途的一个好迹象是我们必须多么依赖解决方法和最佳实践才能维持下去。另一个迹象是我们为了完成简单的事情必须编写多少代码。在样式方面,JavaScript 就是这项技术。

CSS 以优雅的方式解决了 JavaScript 的样式问题。问题是:你愿意接受改变,还是坚持使用一种较差的方法?

是的,这是一篇有趣的帖子,但 CSS-in-JS 的话题很热门且非常活跃。我们最近分享了Bruce Lawson 关于该主题的精彩演讲视频,并发布了关于它与 React 相关的讨论摘要。Chris 还将对话链接回我们如何处理未使用的 CSS这一古老问题。

团队的可访问性

🔗 https://accessibility.digital.gov/
阅读评论

Maya Benari:

可访问性是政府产品设计中至关重要的部分。首先,这是法律。联邦机构在不满足可访问性要求时将面临法律后果。其次,它影响着我们所有人。无论你是否有运动障碍,你是否在玩躲避球时扭伤了手腕,你是否需要一栋建筑为你的轮椅或婴儿车配备坡道,或者你只是手头有很多东西,我们都会发现自己在人生的不同阶段无法做某些事情。无障碍产品对每个人来说都是更好的产品。

但可访问性很难:它看起来像是一套难以遵循的复杂规则。并非每个人都自信地认为自己做对了。它很难与其他工作和项目需求一起优先考虑。如何确保你正在构建可访问且包容的产品?

因此,他们着手构建一个指南,并且做得非常出色。这是 18F 的工作,与美国网络设计系统相同的团队(请参阅视频演示)。

无头 CMS 市场现状

🔗 https://synd.co/2zA8tFo
阅读评论

2018 年 3 月和 4 月,Kentico 开展了关于无头 CMS 市场现状的首份全球报告。我们调查了来自 85 个国家的 986 位 CMS 从业人员,了解他们对使用无头 CMS 的意见、采用情况和计划。该调查包含对行业内有价值的见解,主题包括无头 CMS 认知度、首选的无头 CMS 模型、无头 CMS 方法的当前和未来采用率等,以及来自行业领先企业的更多信息。

立即下载完整报告的免费副本。

你会与刚进入你所在领域的人分享什么建议?

🔗 https://abookapart.com/blogs/press/authors-answer-advice-for-someone-new-to-your-field
阅读评论

所有常见问题中最常见的。

以下是 Laura Kalbag 的建议

找到你热爱的事物。不要担心需要学习每一种语言、技术或工具。从你感兴趣的事情开始,并开辟自己的利基市场。然后用你的力量行善!

还有我自己的建议

购买一个域名。弄清楚如何将 HTML 文件上传到那里。这难道不是一种强大的感觉吗?现在你有了入门门槛。构建一些东西。

当然,去阅读其他 A Book Apart 作者的答案,因为它们都非常棒。我最喜欢的另一个只有三个词。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 78
  • 79
  • 80
  • ...
  • 219
  • 较旧

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发最新动态

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

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们写作!
  • 与我们一起投放广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.