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

Links

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

音乐和网页设计

🔗 https://bradfrost.com/blog/post/music-and-web-design/
阅读评论

Brad 在音乐方面有很长的历史,不只是网页设计师,而且 有一些有趣的平行关系。 一种是他为了成为一名更好的音乐家而寻求更复杂的音乐——开发人员也可以做同样的事情。 另一个是音乐的作曲可以从非常大的部分到非常小的部分看,就像 原子设计 一样。

我自己有两个关于音乐和网页设计的联系。

  1. 练习的期望。 学习弹奏乐器有一个健康的文化期望:要想精通,必须练习。 我希望这种期望能更清楚地融入世界上所有其他事物,从熨衣服到发明汤,再到编写代码。
  2. 从多个角度学习。 每个真正精通某件事的人都是从 100 个角度学习的。 你读书,你练习,你看 YouTube 视频,你上课,你上学,你出去体验,你找导师,你挤进社交圈。 这对音乐来说是正确的(没有人从单一来源学习),对网页设计来说也是一样的(精通来自广泛的经验)。

继续阅读 →

运动路径 - 过去、现在和未来

🔗 https://tympanus.net/codrops/2019/12/03/motion-paths-past-present-and-future/
阅读评论

Cassie Evans 对 运动路径有一个很好的介绍。 也就是说,能够沿着路径动画元素。 不仅仅是上下左右,而是任何你想要的弯曲/波浪形/奇怪的路径。

这是一个有趣的话题,因为随着时间的推移,有许多不同的技术帮助实现它。 SMIL、JavaScript 驱动的动画库、原生 JavaScript API,甚至通过 offset-path 和朋友的 CSS。 我认为 offset-path 有趣 - 它从 motion-path 更改为这个名称,因为从技术上讲,你并不一定 *需要* 对以这种方式放置在路径上的元素应用运动。

没有明确的赢家。 我(可能很明显)是 CSS 这种方式的粉丝,但那里的浏览器支持基本上只有 Chrome。 此外,在 CSS 中看到 SVG 路径值总让人感觉有点不舒服,因为使用了无单位的数字。 SMIL 感觉基本上已经死了,但至少你在 SVG 世界中,路径在这个上下文中很有意义。 如果浏览器支持至关重要,你必须使用库。

我认为运动路径中存在尚未开发的酷炫设计可能性。 它不仅仅用于着陆宇宙飞船,还可以用于模态进入页面的 实用内容 之类的东西。

案例研究:lynnandtonic.com 2019 年更新

🔗 https://lynnandtonic.com/thoughts/entries/case-study-2019-refresh/
阅读评论

Lynn Fisher 带领我们逐步了解她最新杰出个人网站的重新设计过程。 在这个设计中,增加浏览器窗口的宽度会导致页面上的插图裂开并展开,在其中显示更多内容。

这个案例研究让我想起 Lynn 还有 一个档案,记录了她多年来制作的每一个案例研究和项目,绝对值得一看。

现代 JavaScript 应用程序的 CSS 架构

🔗 https://www.madebymike.com.au/writing/css-architecture-for-modern-web-applications/
阅读评论

这里有很多来自 Mike Riethmuller 的内容值得喜欢

  • 标题。 当你从 JavaScript 驱动的组件构建网站时,这是一个讨论如何进行样式设置的时刻,因为它为 JavaScript 驱动的样式打开了一些门,而这些样式你可能不会选择。
  • 个人经验和实用主义。 基于五年的咨询经验,他发现组件重用和样式可理解性正在下降,而不是提高,部分原因是每个团队都有不同的方法。 他说“这是大家的错”,并看到了其他人喜欢 JavaScript 驱动的样式可以带来的部分内容的观点,例如减少对特性的依赖。
  • 新思路。 由于 JavaScript 驱动的网站都是由嵌套的组件构建的,为什么不使用这种架构来进行样式设置呢? 这篇文章的论点实际上是关于构建 UI 组件,这些组件 *故意* 不涉及应用程序逻辑,而是仅用于样式设置,并使用巧妙的 CSS 和 JavaScript 能力来实现你需要的样式。

自动布局登陆 Figma

🔗 https://www.figma.com/blog/announcing-auto-layout/
阅读评论

这是我最喜欢的设计工具的一个令人兴奋的新更新:自动布局! 这意味着我们可以制作根据其内容大小调整大小的框架。 这对于设计系统中的按钮特别有用,你希望将按钮放到页面上,然后保持其左右边距相等。

但是! 此更新的另一个令人兴奋的部分是,内容现在也可以根据其上方的内容向下调整——就像在网页上一样。 如果你有兴趣尝试此功能,那么我建议你启动 Figma,你可以在那里立即跳到一个游乐场,它通过一个方便的分步教程解释了这个改变游戏规则的新功能是如何工作的。

继续阅读 →

Firefox 71:第一个使用 Subgrid

🔗 https://hacks.mozilla.ac.cn/2019/12/firefox-71-a-year-end-arrival/
阅读评论

Firefox 本周发布了一个很棒的版本! 查看 Chris Mills 的完整汇总帖子。 我个人很高兴看到 clip-path: path(); 上线,我们一直在跟踪 它,因为它显然非常有用。 我们还获得了 column-span: all;,如果你是在少数几个利用 CSS 列 的人中,这将很不错。

继续阅读 →

WhoCanUse

🔗 https://whocanuse.com/?b=da3&c=302929&f=22&s=b
阅读评论

有大量的微型网站和开发人员工具用于查看颜色可访问性,包括内置在浏览器 DevTools 中的工具。 他们通常会告诉你一种颜色是否通过了 AA 或 AAA WCAG 指南。 但颜色对比度比这更复杂,因为存在各种各样的视力障碍。

Corey Ginnivan 的这个网站 会选取两种颜色,然后向你展示不同视觉类型(例如,三色异常,难以区分蓝色)的模拟,以及颜色是否仍然通过了 OK。 此外,还有情景事件,例如屏幕是否处于直射阳光下。

继续阅读 →

新的 Klim Type 网站非常棒

🔗 https://klim.co.nz/
阅读评论

我花了最后的一个小时弓着身子,伸开双臂,仿佛在非常黑暗的洞穴里着火一样,盯着新的 Klim Type 字型铸造网站。 Klim Type 制作和销售奇妙的字体 - 比如 Tiempos,以及 National 2 或 Pitch - 这次全新的重新设计现在以其全部荣耀展示了它们。 继续阅读 →

2019 年 JavaScript 现状调查

🔗 https://survey.stateofjs.com/?source=csstricks
阅读评论

好吧,看看,今年的 JavaScript 现状调查又来了!

你去年参加过这个调查 去年。 或者在 2017 年。 或者在 2016 年。 它已经持续了一段时间了,并且始终对开发人员正在使用的功能、特定框架的流行程度以及一般趋势提供有趣的见解。 而且,由于调查已经进入第四年,我们可能开始从随着时间的推移而演变的 JavaScript 中获得一些真正的见解。

所以,现在就 参加调查。 参加的人越多,我们获得的结果就越好。

继续阅读 →

在有限的时间内,大幅节省 An Event Apart 的费用!

🔗 https://aneventapart.com/news/post/join-us-in-2020-and-save-big ?utm_source=CodePen&utm_medium=web&utm_campaign=codepen
阅读评论

如果这个假期你的老板可以送你一份礼物,你会想要什么? 你知道的,除了通常的鼠标垫、相框,或者我最喜欢的,老式的马克杯和星巴克卡组合。

如果你要收到一些更实质性的东西会怎么样? 比如一些能持续三天而不是一天的东西。 或者一些能够提高你的前端技能的东西。 或者一些让你与同行建立联系,并通过向业内最聪明的人学习来获得宝贵经验的东西?

是的,所有这些都太棒了——不,太史诗了! 而且,是的,你可以通过一张 An Event Apart 的门票获得所有这些。

对于前端开发人员来说,没有比这更好的礼物了。 这是一个从办公桌到为期三天的避风港的休息机会,让你从行业领导者那里学习网页开发和设计中最重要的事情。 说真的,只需 查看华盛顿特区的阵容。

通常,我们会在这里分享一个特殊的优惠券代码,让你享受 100 美元的折扣,并让我们在把你送到那里方面得到认可。 你可以通过在结账时输入 AEACP 来完全做到这一点。 我们依靠这里的赞助,支持我们的赞助商可以使这艘船继续前进。

但是! An Event Apart 这个假期感觉 *特别* 大方,并为任何 2020 年活动 的任何两日或三日通行证提供 **200 美元的折扣**。 这包括在华盛顿特区、西雅图、波士顿、明尼阿波利斯、奥兰多和旧金山的停留!

好的,那么代码是什么? 你只需要在 12 月 13 日星期五关注 Twitter、Facebook 或 他们的邮件列表 即可获得它。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 52
  • 53
  • 54
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注网页开发最新动态

使用我们手工制作的时事通讯

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

© 2024 . All rights reserved.