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

Links

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

老约翰·亨利:网页设计能否战胜机器?

🔗 http://daverupert.com/2015/02/john-henry/
阅读评论

Dave Rupert 深入探讨了网页设计技术是否会使网页设计师本身过时的想法。

“自动扶梯”

🔗 http://next.theguardian.com/blog/responsive-takeover/
阅读评论

卫报的 Patrick Stirling 展示了他们正在使用的一些新的广告格式。前两个看起来只是使用了一些 @media 查询来重新排列和调整大小。不过,我无法找到一个可以查看其内部代码的实时示例。如果使用 SVG 来实现这些功能,那将非常棒,因为 1) 可以通过真实的文本使其易于访问 2) 缩放并保持比例的能力(甚至文本)看起来很有吸引力。3) SVG 作为 <img> 拥有自己的视口,因此包含的 @media 查询可以根据广告的宽度而不是屏幕的宽度来进行。

第三个,“自动扶梯”,是一个巧妙的设计,只有在滚动时才会显示整个广告。看起来可能使用了 background-attachment: fixed;。

我一直很喜欢公司撰写关于其新设计背后的思考的文章。本周还有另一个很好的例子。

网络上的“Of”与“On”

🔗 https://adactio.com/journal/8245
阅读评论

Jeremy Keith 试图做出这个区分,使用 Angular 和“企业”软件的概念作为催化剂。

“Of the web”:建立在网络的基本原则之上。普遍访问。

“On the web”:网络作为一种交付机制。所有者决定使用方式。

Jeremy 一直在敲打渐进增强的大鼓,从永远以前到现在,他可以预见地是一个“of the web”类型的人。他只是对其他一些人可能因为超出他们掌控的软件选择而被迫违背自己的原则感到不满。

我稍微不那么担心。实际上,用这些术语思考让我感觉更好。虽然我更认同基本原则的思维方式,但我从未因任何网站规定其使用方式而感到不满。这里也存在灰色地带。我曾经参与过的每个网站都必须对它可以实际支持的内容做出选择,因为业务原因。

WordPress 官方响应式图像插件

🔗 https://wordpresstheme.cn/plugins/ricg-responsive-images/
阅读评论

还记得 Tim Evko 关于 WordPress 中响应式图像的客座文章吗?这里有一些关于它的新闻。

  • 它现在是响应式图像社区小组 (RICG) 的官方 WordPress 插件。它位于GitHub 上以及插件目录中。
  • 它现在使用更合适的 srcset 属性而不是 <picture>,因为它只执行分辨率切换。
  • 它得到了 WordPress 核心团队的支持,有望在下一个版本中成为“特色插件”,并可能最终进入核心代码本身。

非常酷!

滥用 CSS3 的 nth-child 选择器来发明新的选择器

🔗 http://grack.com/blog/2015/01/09/abusing-css3-selectors/
阅读评论

Matt Mastracci 关于以有趣的方式组合现有的位置选择器以创建你可能从未想到过的逻辑。例如,仅当有五个元素时才选择所有元素,使用

span:first-child:nth-last-child(5),
span:first-child:nth-last-child(5) ~ span { 
  /* select the span if its BOTH first and 5th from the end, then all spans after it. */
}

其用途在于应用特殊的布局以适应未知的标记。

让我想起了我曾经看到 Estelle Weyl 做的一个旧的 CSS 花招,她可以在不知道有多少列的情况下完美地调整列的大小。

2014 年最受欢迎的 CodePen 作品

🔗 http://codepen.io/2014/popular/
阅读评论

有时通过社交指标发现趋势会很有趣。

伊索寓言的手选故事,搭配 Google Fonts 中的手选字体

🔗 http://femmebot.github.io/google-type/
阅读评论

我想说我可以根据字体的历史、结构、形式、特征以及诸如此类花哨的东西来选择字体。但通常更像是看到这样的例子,然后惊叹“哇,这看起来很酷”,并想象它在我的项目中会如何工作。

由@femmebot创建,并由许多人提交。作为这个项目的一部分,该项目充满了好的想法。

新 Lodge 课程完成:你需要了解的关于 SVG 的一切

🔗 https://css-tricks.cn/lodge/
阅读评论

四十个视频,由本人讲解,涵盖从为什么要以及何时使用 SVG,到你可以用它做的一些有趣的事情,以及你可能会遇到的陷阱。我们介绍了各种构建工具来帮助实现图标系统。我们介绍了获取 SVG 的地方。我们介绍了如何使用各种工具优化 SVG。我们讨论了 SVG 可访问性、动画技术以及可用的软件。有很多东西需要了解!

命名事物

🔗 http://24ways.org/2014/naming-things/
阅读评论

说到“像你命名事物一样命名事物”,Paul Lloyd

无论高级约定如何,都无法避免这样一个事实,即在某些时候,我们仍然需要为事物命名。

然后继续列出了命名时需要考虑的一系列因素,包括考虑行业标准、特定于业务的名称、保持事物的明显性、一致性和可扩展性,以及我最喜欢的,你编造的名称,因为它们对你来说是有意义的。

…在 Clearleft,我们为固定在视口底部的导航栏创造了gravigation这个术语。

“…我们的意思是设计稿在浏览器中。”

🔗 http://www.the-haystack.com/2014/12/23/some-thoughts-on-designing-in-the-browser/
阅读评论

Stephen Hay 阐述了为什么“在浏览器中设计”与使用其他设计工具并不相互排斥。

创造力与工具无关。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 146
  • 147
  • 148
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发动态

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

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

© 2024 . All rights reserved.