译文

使用CSS Grid和Flexbox制作Card

“Card”这样的UI组件在现在的Web中经常可见,但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在,通过CSS GridFlexbox的组合,可以使卡整齐对齐,响应性更好,并适应其中的内容。接下来看看我们是如何制作的。

组织你的Sass文件

组织文件是每个项目的重要一步,特别是如果你半年重新打开这个项目的时候,你会发现,文件组织得好,对于你理解项目会有很大的帮助。如果你从未接触过Sass,你可以先阅读一下Sass指南或者点击这里阅读Sass相关的教程

如何成为一位函数式编程爱好者(Part 1)

踏出理解函数式编程概念的第一步是最重要的一步,有时也是最难的一步。不过也不一定,取决于你们的思考方式。

如何编写自定义Sass 函数

如果您构建过不少网站,可能已注意到可以在一个项目中轻易的复制代码然后跨项目应用。反复复制相同的代码会浪费时间和增加错误出现的可能性。在Sass之前的系列中,我曾说mixins是样式重用和编写 DRYer代码的一个选择。Functions是实现相同功能的另一个方法。

弄懂Sass 3.5的匿名函数

对博客上最新发布的Sass版本感到困惑?我也是。Sass 3.5.0-RC.1标记了一种新的数据类型:匿名函数。在候选发布公告中,用了四个段落篇幅描述了匿名函数大量的细节,而不显示任何代码。由于并未真正理解它的含义,所以决定深入了解它。

使用CSS Mod Queries控制选择器范围

最近有一个项目需求,希望一个简单的列表在一个网格中完美显示,比如只有一个单元格的时候,列表占据整个容器宽度,但总是不太好控制。因此,有时当你忙着一件事情时,问你有没有办法可以实现,我试图使用可以想到的办法,总是会有空白出现,我就会心烦意乱的说,实现不了。

有趣的CSS像素

如今很多艺术被超清,高像素图片掩盖了光芒,像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了,它们又一次告诉了我像素艺术多么的了不起。

CSS Grid布局:响应式布局

在本系列的教程当中,你已经熟悉了CSS Grdi的语法,了解了页面布局的一些有效方法,也可以跟以前一些不良的习惯说再见了。在今天这篇文章中,我们将了解有关于CSS Grid布局中有关于响应式网页设计知识。

响应图片断点生成器

四年前,Jason Grigsby问了我一个出人意料的难题: 你是如何获取响应式图片断点的?一年之后,他得到了答案: 理想情况下,我们会设置响应式图片性能预算实现“在不同大小文件间的跳转。”Cloudinary创建了一种工具实现了这一想法,并且在社区获得了一致性的好评:“太棒了!现在,它还可以实现什么呢?

CSS 3D应该注意的事项

我一直喜欢3D。我也开始使用CSS 3D Transform,而且浏览器对它的支持度越来越好。但给我的感觉,使用Transform就是用来创建2D图形,并且使用旋转和位移可以创建一些3D图形。但在实际使用的时候,还是越到了不少的麻烦,而且这些麻烦出乎我的意料。我想或许大家也同样遇到过这样的问题,为了大家在使用CSS 3D Transform能避免这些麻烦,我把我碰到的与在大家分享一下。

页面

返回顶部