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

Links

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

BoxBox

🔗 https://keminglabs.com/boxbox/
阅读评论

BoxBox 是一款目前正在开发的设计应用程序,设计师 Kevin Lynagh 和 Ryan Lucas 撰写了一系列文章,描述了他们创建它的想法。首先,他们概述了当前应用程序存在的问题

我们仍然主要使用传统的印刷设计应用程序来创建现代的响应式软件界面。这产生了一系列困扰 UI 设计工作流程的独特挑战。

随后,他们深入探讨了 Photoshop 等应用程序中严重缺乏响应式设计功能的问题,以及这些限制如何影响我们正在做出的设计决策。

也许最大的危险在于,这些工具通过省略来欺骗:它们以单个尺寸显示您的设计,并使用固定的标尺和精确的像素值,即使最终应用程序需要在许多屏幕尺寸上运行。这类似于设计帆船而不考虑木材和水的密度,直到“实施阶段”。

然而,这系列文章远不止于定义我们设计工具的问题;它们也提出了很多有用的建议。他们解决了设计可重用组件的困难以及为这些对象命名、编辑和修改的需要。有趣的是,他们还讨论了在设计生命周期中使用代码检测更改而不是静态模型的益处。

RAIL

🔗 http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
阅读评论

Paul Irish 和 Paul Lewis 描述了一种思考网页性能的方法:RAIL(响应、动画、空闲和加载)。它旨在将用户体验的每个时刻分解成可以针对性优化的操作。

我们中很少有人有无限的时间投入到优化工作中,事实并非如此,我们需要标准来帮助我们决定哪些内容需要优化(哪些不需要!)。归根结底,我们希望并需要明确的指导,了解“高性能”对我们的用户意味着什么,因为我们正是为他们而构建的。

网页性能工作是显而易见的最佳实践(优化资源)、非常棘手的决策(我可以延迟加载哪些内容,哪些不能?)和细致入微的选择(哪种动画技术最合适?)的结合。

CSS 堆叠上下文

🔗 http://tiffanybbrown.com/2015/09/css-stacking-contexts-wtf/
阅读评论

Tiffany B. Brown 以一种非常快速且易于理解的方式分解了堆叠上下文是什么。首先,是什么构成了一个新的上下文,然后

堆叠上下文的子元素按照以下顺序从下到上绘制。

  1. 具有负堆叠级别的元素,通常是具有 z-index: -1 的元素。
  2. 具有 position 值为 static 的元素。
  3. 具有堆叠级别为 0 的元素,通常是具有 z-index 值为 auto 的定位元素。
  4. 具有正堆叠级别的元素,例如具有 z-index 值为 1 或更高的定位元素。

CSS 中的图像差异

🔗 http://franklinta.com/2014/11/30/image-diffing-using-css/
阅读评论

Franklin Ta 的一项真正的 CSS 技巧。将图像以 50% 的不透明度和反色叠加在一起。或者,正如 Bennett Feely 指出的那样,如果它们是背景图像,请使用 background-blend-mode: difference;。

可以使用 CSS 操作的 SVG 属性列表

🔗 http://www.w3.org/TR/SVG/propidx.html
阅读评论

使用 CSS 样式化SVG 元素 的奇怪之处在于,只能使用某些属性,具体取决于元素。例如,您可以设置 <polygon> 上的 fill,但不能设置 points。

W3C 有一个属性列表,概述了哪些 SVG 属性可以通过 CSS 操作。

如何使用 Git 撤销(几乎)任何操作

🔗 https://github.com/blog/2019-how-to-undo-almost-anything-with-git
阅读评论

Joshua Wehner 提供的关于修复 Git 常用错误的实用指南。

任何版本控制系统最有用的功能之一就是能够“撤销”您的错误。在 Git 中,“撤销”可以表示许多略有不同的含义。

当您进行新的提交时,Git 会在该特定时间点存储您的存储库的快照;稍后,您可以使用 Git 返回到项目早期版本。

强制布局或重排的原因

🔗 https://gist.github.com/paulirish/5d52fb081b3570c81e3a
阅读评论

Paul Irish 创建了一个完整的列表,其中包含所有可能导致重排的 JavaScript 属性和方法。主要思想:尽可能减少执行这些操作的频率并使其更智能。

CSS 等效项:CSS 触发器。

回归本源

🔗 http://simurai.com/blog/2015/09/09/back-to-the-roots/
阅读评论

simurai

我将尝试展示一些方法,说明如何让级联成为您的朋友,并可能减少覆盖的需要,从而减少与特异性的冲突。

以智能的方式设置文件输入的样式和自定义

🔗 http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
阅读评论

Osvaldas Valutis 是对的,使用 <label> 触发本机浏览器功能是最佳方法。然后根据需要设置标签的样式,如果需要,还可以使用一些 JavaScript 进行增强。与复选框技巧的概念相同。

设计师今天正在使用的工具

🔗 http://tools.subtraction.com/
阅读评论

本着收集有关工具数据的精神,这些数据一直在流传,这是 Khoi Vinh 关于设计工具的数据。这次没有惊喜:Sketch、HTML/CSS、Slack、Dropbox。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 135
  • 136
  • 137
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发

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

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

© 2024 . All rights reserved.