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

Links

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

好吧,Typetura 看起来很有趣

🔗 https://medium.com/@scottkellum/fluid-typography-and-the-creation-of-typetura-b7292b1ddf1e
阅读评论

今天早上,我在我的 Medium 信息流中偶然发现了 Scott Kellum 和 Sal Hernandez 的项目 Typetura 的 此更新,并且真是太棒了?!

继续阅读 →

你怎么认为?

🔗 https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html
阅读评论

Scott O’Hara 深入探讨了<figure></figure> 和 <figcaption></figcaption> 元素。一定要喜欢一个好的 HTML 深度挖掘。

我在 CSS-Tricks 上的几乎每篇博文中都使用了这些,正如我所怀疑的那样,我一直基本上都在错误地使用它。我最初的想法是 figcaption 和 alt 属性一样好。我通常用它来描述图像。

继续阅读 →

多重背景剪辑

🔗 https://www.stefanjudis.com/today-i-learned/background-clip-is-configurable-for-every-background-gradient-separately/
阅读评论

您知道如何拥有 多个背景 吗?

body {
  background-image: 
    url(image-one.jpg),
    url(image-two.jpg);
}

那只是 background-image。您可以像预期的那样设置它们的位置。我们将对其进行简写

body {
  background: 
    url(image-one.jpg) no-repeat top right,
    url(image-two.jpg) no-repeat bottom left;
}

我只是为了好玩而偷偷地加上了 background-repeat。另一个您可能不会想到为多个不同背景设置的属性是 background-clip。在这篇 链接文章 中,Stefan Judis 指出,这解锁了一些非常棒的 CSS 技巧!

为网络设计应该意味着制作 HTML 和 CSS

🔗 https://m.signalvnoise.com/designing-for-the-web-ought-to-mean-making-html-and-css/
阅读评论

David Heinemeier Hansson 撰写了一篇关于网络设计现状以及设计师应该如何能够继续处理代码方面的文章

我们使用服务器端渲染、Turbolinks 和 Stimulus 进行构建。所有这些工具都易于使用且对设计师来说是现实的,因为主要重点只是 HTML 和 CSS,以及一些用于交互的 JavaScript。

而且它并不是什么秘密!事实上,我们在 Basecamp 创建的每个允许设计师以这种方式工作的框架都是开源的。当前行业对 JavaScript 的发展方向给设计师带来的复杂性灾难是人为选择和设计的。可以选择不同的选择并得出不同的设计。

我非常喜欢这种观点——并非每个公司都需要以相同的方式构建其网站。但是,我认为 Basecamp 采用的方法无法扩展到规模更大的组织。David 继续说道

也不感兴趣退回到需要一个由狭隘的专家组成的团队才能让任何事情都能正常运作的想法。“全栈”在某种程度上是自嘲而不是自力更生。设计师的创造力承受着过多的概念性要求,因此不应该鼓励或鼓励他们学习如何用网络的原生材料来表达这些要求。不。不,谢谢!

以一种用出色、快速的設計取悦用戶的方式設計現代網頁,無需如此複雜難懂。我們正在這樣做!可以不這樣做。

再说一次,我完全同意 David 的观点,因为我认为该领域中没有人真正想使我们用来构建网站的工具过于复杂;但在这种情况下,我倾向于同意 Nicolas 最近对此事的看法

https://twitter.com/necolas/status/1089219810955800578

这里需要注意的是,前端开发的行为会根据组织的规模和规模而改变。与前端开发中的所有论点一样,没有“正确”的方法!我们的工作必须适应我们试图解决的问题。大型复杂的 React 前端对 Basecamp 有用吗?也许没有。但是对于某些组织,比如我在 Gusto 的组织,我们必须专门从事某些领域,因为我们正在开发的产品非常复杂。

我想我可能还在胡言乱语,我不认为是工程师使前端开发变得复杂——也许是我们用户的期望。

网络上的表格设计模式

🔗 https://www.smashingmagazine.com/2019/01/table-design-patterns-web/
阅读评论

陈慧静解决了大量表格设计模式,在创建易于阅读和响应式网络的表格时,这些模式可能派上用场

那里有无数的表格设计模式,您选择哪种方法很大程度上取决于您拥有的数据类型以及该数据的目标受众。归根结底,表格是组织和展示数据的一种方法。弄清楚哪些信息对您的用户最重要并确定最能满足其需求的方法非常重要。

这让我想起了很久以前 Chris 撰写关于 响应式数据表格 以及它们有多难正确使用。此外,Richard Rutter 还有一篇类似的文章,他在文章中写道 表格的可读性 和精美的排版

许多表格,例如财务报表或时间表,主要由数字组成。一般来说,它们的目的是向读者提供以列或行呈现的数字数据,有时以这两者的矩阵形式呈现。您的读者可以通过扫描列来使用表格,或者搜索数据点,或者比较数字。您的读者还可以通过简单地浏览列或行来理解数据。如果个位数、十位数和百位数都垂直对齐,则比较数字要容易得多;也就是说,所有数字都应占用完全相同的宽度。

我现在始终如一地使用我最喜欢的表格模式之一,它带有一个粘性标题。就像这里的演示一样

查看 Robin Rendle 的 Pen
表格粘性标题
(@robinrendle)
在 CodePen 上。

作为用户,我发现当我在包含复杂信息的较大的数据表中滚动时,我往往会忘记一列是关于什么的,然后我必须一直滚动到顶部才能阅读列标题。

无论如何,所有这些都让我觉得我会阅读一本关于 <table> 元素以及如何准确和响应式地设计数据的整本书。

使用 monday.com 提升项目组织和团队协作

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

前端开发依赖于组织和良好的沟通。无论您是大型网站构建团队的一员,还是与少数优质客户单打独斗,从项目开始到结束都有很多部分和步骤。而且这不仅限于项目的开发阶段。考虑销售提案、估算、签字和批准以及许多其他事项。即使在我们可能认为是常规网络项目的项目中,也有很多内容。

这就是 monday.com 的用武之地。

继续阅读 →

成功的 WordPress 自由职业

🔗 https://andyadams.org/successful-wordpress-freelancing/
阅读评论

Andy Adams 为有抱负的 WordPress 自由职业者发布了一本书。它旨在消除许多人在决定单飞并依靠 WordPress 开发来获得稳定的工作来源和收入时经常遇到的猜测和障碍。

除了包含在其中(以及 Andy 本身就是一个很棒的人)之外,我还想与大家分享这本书,因为 WordPress 和自由职业是我非常关心的两个话题,特别是因为 WordPress 平台和社区帮助我在做出那个决定 五年前 时涉足自由职业。

继续阅读 →

Netlify 使部署变得轻而易举

🔗 https://www.netlify.com/?utm_source=css-tricks&utm_medium=post&utm_campaign=css-0119
阅读评论

假设您要设计一种您可以想象的最简单的静态网站部署方式。如果我承担这项任务,我会说,好吧,它会在每次我推送到我的主分支时进行部署,并且我会告诉它运行什么命令来构建我的网站。或者也许它有自己的 CLI,我可以根据需要从中启动内容。或者,您知道,也许它非常通融,我可以将文件夹拖放到它上面,它就会自动部署。

好消息:Netlify 走在了我的前面。Netlify 可以执行所有这些操作,以及更多操作。您的网站将托管在 CDN 上,因此速度非常快。您可以回滚到任何其他部署,因为每个构建都是不可变的并且可以轻松地指向。您可以上传一个 Node JavaScript 函数文件夹,并且可以运行这些函数,以便您可以执行后端操作,例如安全地与 API 交谈。哎呀,即使您的表单也可以在没有任何代码的情况下自动处理!

Netlify 的实用性几乎令人震惊。我建议您尝试一下,它可能是您构建下一个项目所需的赋能工具。🤔

@horse_js 是谁?

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

我们很多人在 Twitter 上关注 @horse_js。确切地说,我们有 21000 人。那匹马喜欢通过断章取义来制造麻烦。它发生在我身上几次,差点让我陷入困境。

继续阅读 →

新的 CodePen 功能:预填充嵌入

🔗 https://blog.codepen.io/2019/01/17/introducing-prefill-embeds/
阅读评论

我非常高兴此功能已准备好供大家使用。您可以获取任何 <pre></pre> 块的 HTML、CSS 和 JavaScript(或它们的任意组合),并将其增强为嵌入,这意味着您可以查看渲染的输出。非常适合渐进增强!它还允许您传递外部资源之类的东西,使其成为文档站点等的好选择。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →

  • 更新
  • 1
  • ...
  • 67
  • 68
  • 69
  • ...
  • 219
  • 旧文章

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.