找到『 516篇 』带有"译文"标签的文章列表.
CSS秘密花园:灵活的椭圆形
border-radius
可以给一个元素制作圆角。险些之外,还可以使用它制作随圆形。而这篇文章中主要阐述了如何使用border-radius
制作除圆之外的图形——椭圆形。
CSS秘密花园:平行四边形
平行四边形是矩形的一个超集:它的边是平行的,但是角不一定是直角。在视觉设计,它们往往可以使设计显得更具活力,传达运动感。我们常常使用CSS3 transform
中的skew()
来实现,但这种方法常常会使 扭曲元素的内容也会变形,直接影响阅读体验感。那么有什么方案可以解决呢?
响应式图片101(七):Type
到目前为止我们专注于如何提高响应式图片性能。这是必要的,但是今天,我们依然在页面上使用一样的旧图片。现在,是时候看点有意思的东西了!
CSS秘密花园:菱形图片
菱形裁剪图片在视觉设计中非常常见,但是这种效果没办法直接用CSS完成。实际上,直到最近,这基本上还是不可能做到的。因为,当网页设计师想要使用这种样式,他们通常会先用图像编辑器预裁剪图像。当然,不用想都知道,这对于应用任何效果都不是一种可维护的方式,如果后面有人想要改变图像样式,最后的结果都会变得非常混乱。当然,现在有一个更好的方法,对吧?实际上,有两个耶!
CSS秘密花园:斜切角
斜切角在Web设计和印刷中是相当受欢迎的样式。它通常是在一个或多个元素的角落切一个45°
的角(也就是所谓的斜切角)。特别是最近,扁平化设计的势头压过了拟真设计,也使这种效果更加流行。当斜切角只存在元素的一侧,并且每个都占据元素的50%
高度的时候,一个箭头的形状产生了,这在按钮和面包屑导航中非常受欢迎。
CSS秘密花园:梯形标签
梯形应用得比平行四边形更普遍:只有两条边是平行的。另外两条可以是任何角度。以前,它们都是CSS中很难创建的形状,尽管它们特别常用,特别是对于标签。作者要么是通过精心设计的背景图像来模拟它们,要么是一个矩形旁边带两个三角形来创建,或者是通过边框来伪造一下。
响应式图片101(八):CSS图片
大多数时候谈到响应式图片,人们指的是内联图片,而不是CSS图片。这是因为在<picture>
和srcset
之前内联响应式图片还没有好的解决方案。但遇到CSS图片时,我们可以使用媒体查询,那还有什么可担心呢?现在是时候回顾响应式CSS图片并基于我们已经学过的内联图片寻找解决方案。
响应式图片101(九):图片断点
我其实很害怕写响应式图片101系列里图片断点这个部分。选择图片断点每个人都会遇到,坦白说,我也没有一个好的解决方案。但我们迟早会遇到图片断点的问题。所以不妨现在就开始研究。
响应式图片101(十):总结
我们做到了!我们到了响应式图片101系列的结尾。在与这个系列就此分别之前,我想给出一些提示,资源和一些关于响应式图片发展的最终思考。