CSS秘密花园: 环形文本
尽管这不是一个常见的文本效果,有时候有一些比较短的文本需要遵循环形路径显示。这种时候,CSS就弃我们而去了。没有任何CSS属性或功能可以完成这个效果,我们唯一想到的CSS解决方案都非常麻烦,所以我们也就只是想想而已。真的没有什么办法可以实现这样的样式吗?除了使用图像,除了不影响我们文本的整体美观?
尽管这不是一个常见的文本效果,有时候有一些比较短的文本需要遵循环形路径显示。这种时候,CSS就弃我们而去了。没有任何CSS属性或功能可以完成这个效果,我们唯一想到的CSS解决方案都非常麻烦,所以我们也就只是想想而已。真的没有什么办法可以实现这样的样式吗?除了使用图像,除了不影响我们文本的整体美观?
你是否思考过对于媒体查询你应该使用px
, em
还是rem
?我也产生过同样的问题,并且目前为止,我还是没有明确的答案。一年之前,我第一次创建 mappy-breakpoint 仓库时,我一直使用rem
单位。之后一次和Sam Richard谈话之后,我开始转向使用em
,因为我并没有发现两者之间的区别。关于媒体查询,除了em
和rem
,常用单位还有像素。自从现在所有浏览器存在像素缩放问题,我想知道像素是否还可以用于媒体查询。这周,我打算弄明白两者之间的区别。
你是否曾经试过想使用某个CSS特性但是却因为他没有被所有浏览器支持而不能用?又或者更糟糕的,他被全部浏览器支持,但是这种支持充满了bug、表现不一致甚至是不完全兼容的?如果这些事情曾经在你身上发生过——并且我打赌他们绝对发生过——那么你就需要关注一下Houdini。Houdini是一个新的W3C工作组,他们致力于让这些问题永远消失。他们计划通过引入一整套API来让开发者首次拥有扩展CSS的权利,并且会提供出一套工具来与浏览器的渲染引擎的样式与布局进行挂钩。但是这意味着什么呢?这是一个好的提议吗?这会如何帮助我们开发者在现今与未来构建网页呢?
鼠标指针的意义并不仅仅是为了显示目前屏幕上的光标在何处,还是为了告诉用户可以进行哪些交互动作。这是在桌面应用程序中很常见的用户体验,但是在Web App中则经常被遗忘。
如果你对用户体验感兴趣的话,你可能听说过费茨法则。最早在1954年由美国物理学家Paul Fitts提出,费茨法则是迅速移动到目标区域所需要的时间,是到目标的距离和目标的宽度之间的比率的对数函数。
设计师总是希望能够对Web页面上的每个元素都能有更多的控制。当一个CSS经验有限的图形设计师需要创建一个网站案例时,他们很喜欢自定义表单元素,然后让开发人员来把它转变成CSS。
你也可以让元素响应于指针事件(auto
),或者阻止响应(none
)。如果你阻止元素响应于指针事件,那么该元素的子节点的元素将会成为这些事件的目标。如果你单击元素,其子节点元素将会接收该单击事件。这种情况同样适用于hover和一些其他游标操作。例如,利用pointer-events:none
你可以获取一个元素的子元素中的文本(可以参考下面的实例)。
随着 Web 应用程序变得越来越复杂,我们需要更自然的方式,在不使用hacky解决方案的情况下,如:使用浮动和其它繁琐的技术,就可以轻松做出高级的布局。令人兴奋的是产生了一种适用于布局的新解决方案---CSS Grid布局模块。在这个介绍性的教程中,我会向大家介绍这个相对较新的 CSS 功能,我将先讨论一下当前浏览器的支持情况,之后我会用一些例子告诉大家CSS Grid布局模块是如何工作的。
CSS 网格布局模块,虽然现在仍处于编译者的草案之中但是即将定稿。我们现在可以在一些浏览器中进行测试并可以检测其潜在的bug。CSS 网格布局是真的很复杂,相较于 Flexbox 更是如此。它具有17个新属性并且在如何使用CSS书写方面介绍了很多新概念。为了尝试如何使用萦绕在我脑海中的这些新规范,我决定创建一个圣杯布局尝试新规范工作原理。