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

Links

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

WebAIM 百万网站数据 - 更新

🔗 http://www.webaxe.org/the-webaim-million-updated/
阅读评论

这份报告去年引起了轰动。这是一大块研究成果,显示了网络在无障碍方面做得有多糟糕。今年进行了更新,(隆隆鼓声……)我们情况变得更糟了一点。我将使用他们的引述

从 2019 年 2 月到 2020 年 2 月,错误数量增加了 2.1%。

继续阅读 →

从零开始学习 Eleventy

🔗 https://piccalil.li/course/learn-eleventy-from-scratch/
阅读评论

今天早上,Andy Bell 的《Piccalilli》最新版本出现在我的收件箱中,并附带了一个诱人的优惠:以三分之一的价格预订 Andy 关于从零开始学习 Eleventy的课程。

为什么要推荐?不是赞助或类似的事情。我只是最近经常听到关于 Eleventy 的消息。比如我们可以将其与 Google Sheets 一起使用作为伪 CMS。或者它可以成为紧急网站工具包的关键组件。我的意思是,天哪,Chris 甚至将其用于我们这里举办的会议网站。正如Andy 所说,“未来是光明的,因为未来是静态的。”至少,看起来确实如此。

继续阅读 →

来自新版 Facebook 设计的 CSS 发现

🔗 https://ishadeed.com/article/new-facebook-css/
阅读评论

Ahmad Shadeed深入研究了新版 Facebook 的前端代码。

其中一个让我眼前一亮的

.element {
  inset: 4px 0;
  /* Which is equivalent to: top: 4px, bottom: 4px, left: 0, right: 0 */
}

哇!这是我第一次听说inset属性。Ahmad 说他在 Chrome 80 中看到它起作用,但它绝对不适合我(也不适合 Safari)。不过在 Firefox 中可以。

继续阅读 →

纯 CSS 跑马灯效果

🔗 https://tympanus.net/codrops/2020/03/31/css-only-marquee-effect/
阅读评论

您确保文本宽度是屏幕宽度的两倍以上,然后使用负translate动画来实现跑马灯移动。

如果您需要复制文本,则可能需要将除一个之外的所有文本都设置为aria-hidden。或者,您可以使用一个非常巧妙的 CSS 技巧使用text-shadow“复制”文本。

很高兴看到prefers-reduced-motion在其中,在应该停止效果时停止效果。

Google 的技术写作指南

🔗 https://developers.google.com/tech-writing/overview
阅读评论

它很棒!

我写下了我的建议(并融入了其他人的宝贵建议),但这本指南更侧重于技术写作的具体方法和步骤。它像一个真正的课程一样构建,沿途还提供了练习。

继续阅读 →

typespecimens.io

🔗 https://typespecimens.io/
阅读评论

如果您正在为您的某个副项目寻找新的字体,那么这里有一个由 John D. Jameson 创建的绝佳网站,它收集了许多最新的字体样本网站。这里展示了各种字体,从大胆前卫到更专业和内敛的字体。

继续阅读 →

用于前端 Web 开发的带注释的 Docker 配置

🔗 https://nystudio107.com/blog/an-annotated-docker-config-for-frontend-web-development
阅读评论

Andrew Welch盛赞在本地开发环境中使用 Docker 容器。

对我来说,Docker 的优势在于

• 每个应用程序都拥有其运行所需的精确环境,包括使其正常运行所需的任何管道服务的特定版本(PHP、MySQL、Postgre 等)
• 入职其他人员变得微不足道,他们只需安装 Docker 并键入 docker-compose up 即可开始工作
• 您的开发环境完全可丢弃;如果出现问题,您只需将其删除并启动一个新的
• 您的本地计算机与您的开发环境分离,因此切换计算机变得微不足道,并且您不会遇到破坏计算机或遇到 DevOps 服务版本冲突的问题
• 尝试不同版本的各种服务的成本很低;只需更改.yaml文件中的一个数字,docker-compose up,即可开始工作

这是一个,嗯,截然不同的观点,我匿名发布了它,是从一个群组的 Slack 中获得的

继续阅读 →

让网站成为一块抚慰石

🔗 https://ethanmarcotte.com/wrote/let-a-website-be-a-worry-stone/
阅读评论

Ethan Marcotte 刚刚重新设计了他的网站,并写下了这个过程如何分散了他对当前正在发生的一些困难事情的注意力。向您的博客或作品集添加新功能、整理性能问题以及一点一点地改进事物,当然可以缓解很多压力。此外?这很有趣!

继续阅读 →

使用 Display-P3 在 CSS 中实现广色域颜色

🔗 https://webkit.ac.cn/blog/10042/wide-gamut-color-in-css-with-display-p3/
阅读评论

这是我以前从未听说过的事情:CSS 颜色模块级别 4 规范中支持Display-P3。这是一种由某些显示器支持的新颜色配置文件,它引入了我们可以从中选择的更广泛的颜色范围。

继续阅读 →

在 SVG 中创建铅笔效果

🔗 https://heredragonsabound.blogspot.com/2020/02/creating-pencil-effect-in-svg.html
阅读评论

Scott Turner,他有一个完整的博客“探索奇幻地图的程序生成和显示”,深入探讨了为什么矢量图形在表面上看起来似乎不适合铅笔笔触的外观

像这样的铅笔笔触将需要数万个不同的元素。基本上,该图像中的每个灰色小斑点都将被单独定义。

但是,SVG 滤镜来救援了。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 39
  • 40
  • 41
  • ...
  • 219
  • 较旧

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.