SEE Conf 2021!  支付宝体验科技大会

CSS3

CSS Grid布局:显式和隐式网格线, 会员专栏

我想通过前面几篇有关于CSS Grid布局的介绍,大家对CSS Grid Layout也略有了解吧,如果你有动手写过的话,你应该可以借助网格线制作一些布局效果出来,比如说单元格布局合并单元格布局等。是否有一种感觉,CSS Grid Layout好强大,好灵活。是不是期待浏览器厂商早一天能支持。

CSS Grid布局:合并单元格布局

CSS Grid布局:网格单元格布局》一文中通过一些简单的实例介绍了如何给容器定义网格,并且怎么使用网格线或者网格区域来实现单元格这样的简单的布局。在文章结尾之处也提到过,这样的单元格如同表格一样,仅仅一个个独立的单元格是无法满足一些复杂的Web布局,我们需要将多个单元格合并在一起,拼装成一个稍为复杂一点的布局。简单点说,就是由单元格慢慢过渡到具有合并单元格的布局(在脑海中想想曾经爱过的table)。

CSS Grid布局:网格单元格布局

CSS Grid布局对于我等来说就是一个全新的布局,但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容(《CSS Grid布局:什么是网格布局》和《CSS Grid布局:浏览器开启CSS Grid Layout》)为这篇文章做足了铺垫。或许你想知道的是如何使用?各位看官不用太急,接下来通过各种实例向大家阐述CSS Grid布局,让我们一起领略其强大的魅力。

CSS Grid布局:浏览器开启CSS Grid Layout

上一篇《CSS Grid布局:什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语,为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不一致,致使无法全面使用,就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中,将向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能。

CSS Grid布局:什么是网格布局

CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格,也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module,我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS中的网格布局。

CSS Counters

CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ulol元素。如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术,允许开发人员使用伪类:after:before或者伪元素::after::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是,可以给这些计数器设置独特样式,让其在外观上更靓丽。

《图解CSS3:核心技术与案例实战》

本书是国内著名的Web前端专家历时2载的心血之作,根据最新的CSS3撰写,融入了作者在CSS领域多年的使用经验,旨在将本书打造成为CSS3领域最权威和实用的专业著作,供没有经验的读者系统学习,供有经验的读者参考备查。

本书理论知识系统全面,详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性,所有这些都巧妙地融入到案例中,而不是枯燥的理论讲解;讲解方式直观易懂,以图解的方式巧妙地展示了这些新特性;实战性强,既为每个知识点精心设计了小案例,也有综合性的大案例,所有案例都非常详尽,有功能需求分析、设计思路和完整代码,还有最终的效果展示。

Kindle电子书互动出版网京东网当当网亚马逊

实战CSS混合模式

去年年底看到Dudley Storey在他的一篇文章《2014年前端将会发生什么》一文中提到,如何在Web页面中实现类似于Photoshop制图软件中图层混合模式的效果,特别的激动。从而也知道CSS混合模式这样的一个概念,觉得特别有意思,加上这段时间看到相关的讨论,我也有点手痒痒,今天也将试试这一神技,给我们Web的效果带来什么样的变化。

使用CSS3制作倒影

在Web制作中,有些时候需要实现一些倒影的效果。比如说,你看到一个美女,你想从另一个角度来看这个MM的风姿。在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现,然后通过引入一张image。那么除了图片,我们有没有别的方法能实现呢?值得庆幸的是,到目前为之,CSS3有一个属性可以实现。那么今天我们要给大家介绍的就是这个属性的应用。

CSS3 Object-fit和Object-position

RWD设计中图片、视频、iframe元素的根据不同设备分辨的响应是令Web前端开发师最为头痛的问题,目前的种种解决方案都并不是一种完美的解决文案。另外很多时候在Web中,产品展示,发布的图片尺寸都不一定一致,致使我们需要通过一定的程序或者手工修改,以达到一种较为完美的展示方式。这些工作对于我们来说都是一种隐形的开发成本。不过,值得庆幸的是,CSS3提供了两个新的属性object-fit和object-position可以很好的帮我们实现图片的长宽比例,并且能快速响应。只不过到目前为止,支持的浏览器为数不多,但我们应该相信,技术是向前发展的,总有一天,这两个属性会广大的前端开发人员提供便利。如果您对他们感兴趣,不仿花点时间阅读一下。

页面

返回顶部