CSS3

容器长宽比

容器长宽比,这个话题在站上也有相关的文章介绍,最早出现于Responsive Web Design中,主要用来处理imgiframevideoobject这些元素的自适应问题。简单点讲,就是根据容器的宽度,按照宽高比例自动计算出容器的大小。并且让图片,视频之类能自适应容器。另外记得在知乎上有一个问题“移动端布局,div按比例布局,宽度为百分比,但又想让高度和宽度一样,即让div为正方形,怎么做布局呢?”,其实解决方案在前面的教程已提到过。既然有相应的解决方案,继续花时间来说,是不是有点多余。那么这个问题又回到了CSS的根源上:在Web中,使用CSS解决问题,往往不只有一种方案,只有更适合的方案。这两天看到@Chris Coyier特意也整理了一篇《Aspect Ratio Boxes》文章,里面有新的方案值得我们思考,特别是CSS自定义属性的部分。那我们再次花时间将相关方案整理在一起,仅供学习与参考。

渐进式动画解决方案

今天聊的内容是淘宝虚拟互动实验室的@渚薰大神 在2017年06月在北京GMTC大会上分享的一个主题。未能亲临听到相关的精彩分享,但还算是有幸的,在内部听到@渚薰大神 的分享。个人对Web动画这方面的课程非常的感兴趣,而且现在和团队一直在致力于手淘互动动效相关的研究。经历了从Gif、视频到CSS Animation的零至一的过程,并且致力于JavaScript驱动的动效开发,以及现在致力于研究的数据化驱动的动效。这样的一个过程是幸福的,而且也是具有挑战力的。我想很多喜欢动画的同学也对这样的一个课程会感兴趣,所以接下来,我们根据@渚薰大神分享的PPT的思路来聊聊渐进式动画解决方案

探讨CSS Grid Layout在原生客户端中运用

CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了CSS Grid Layout之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化,那么他在原生客户端(也就是APP)开发中,其运用是否也能像Web一样呢?接下来我们就一起来探讨。

CSS即将具备的6种处理器特性

今天看到@Dennis Gaebel分享的一篇博文。觉得很有意思。同时感觉老外分享出来的东西就是不一样,尽管自己也专门整整CSS,但从新特性的发掘和敏锐性就差十万八千里。不吐槽了,还是回到正题来吧。

如何使用CSS Grid布局实现限宽容器全屏效果

在Web的布局设计中时常会碰到全屏的效果,而且很多时候会碰到在限制宽度的容器中实现全屏效果。到写这篇文章的这个时候,前端有关于布局方面的技术又得到了新的突破,比如CSS Grid布局方案,到现在已经得到了主流的浏览器支持。在这里提到CSS Grid布局方案,其实就是想说一点,通过现在的CSS Grid布局效果,也可以实现在限宽容器中实现全屏布局效果。这也是接下来要介绍的内容。

Web中如何实现纵横比

Web发展到现在,已经有很大的变化,特别在当前这样的时代,我们面对的设备种类繁多。言外之意,这样的环境之下,Web的页面布局时常会碰到一些缩放比例的控制,特别是针对imgiframeobjectvideoembed等元素的比例缩放。当然,就img元素而言,要实现纵横比例的布局已有多种方案,而且实战性也特别的强,并且在Responsive设计中已使用广泛。

实现精准的流体排版原理

流体排版这一词似乎看上去有点陌生,在英文中常把他称之为Fluid Typography,当然也有很多朋友称之为流体字号(Fluid Size)。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。

如何美化下划线

2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果@Mary Lou更疯狂的制作出了一个Demo,这个Demo展示了多种突出链接的效果,有些是使用的背景色,有些是使用不同的下划线方式。那么,接下来我们一起看看在Web中,如何更好的美化下划线的效果。

管理CSS层叠

了解CSS的同学都应该知道,CSS是由Cascading Style Sheets三个单词首字母组成,简单的讲就是层叠样式表。事实上,在CSS中,层叠(也有同学称之为级联)也是一个非常基础,但也是一个非常重要的概念。只有理解了层叠这个概念才能更好的理解和使用CSS中的每一个属性。话又说回来,既然是一个基础概念,懂CSS的同学都知道,那还有必要来说这个吗?那我就得问一下了,你真的懂CSS中的层叠,能使用好CSS的层叠吗?如果你没有这方面的自信,那不仿花点时间来阅读这篇文章。

CSS Grid布局这样玩

自从去年下半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

页面

返回顶部