CSS3

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

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

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

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

实战CSS混合模式

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

使用CSS3制作倒影

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

利用jQuery和CSS实现环形进度条

进度条是Web页面中常见的一种组件,早前在《CSS3制作 Progress Bars》一文中介绍了使用CSS3制作水平进度条。但往往我们很多时候需要使用到圆形进度条。那么今天在这篇文章中由@我是霍小惑同学向大家介绍如何使用jQuery和CSS3实现圆形进度条效果。整个教程图文并茂,非常容易理解。在这里非常感谢@我是霍小惑加入w3cplus与大家一起分享。

CSS3 Object-fit和Object-position

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

CSS3 3D Transform

早前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识,最近重新整理了一个Transform系列的文章,希望对初学者有所帮助。前几天介绍了《CSS3 Transform——transform-origin》、《Transform-style和Perspective属性》和《CSS3 2D Transform》。今天是这个系列的最后一篇——CSS3 3D Transform。

CSS3 2D Transform

在一个二维或三维空间,元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴;而3D变形工作在X轴和Y轴之外,还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度,还有深度。我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论。CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

Transform-style和Perspective属性

在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的属性的使用,其实在属性中,属性仅是其中之一,要彻底理解属性,这是不够的,必须的理解其他属性的应用。今天将和大家一起探讨中和相关属性的使用。

CSS3 Transform——transform-origin

在CSS2.1中,我们的页面都是静态的,网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的,比如说,如何实际移动一些元素?如何更改元素的外观——旋转或缩放?多年来,Web设计师为了给修改页面的外观,都依赖于图片、Flash或JavaScript才能完成。不过,CSS3将要改变设计师这种思维,进入CSS3时代,借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。在2011年05月在站上发表了第一篇有关于CSS3 Transform教程,现已时隔近两年,有很多东西都有变化,而且理解也略有不同,接下来将会分几篇教程,向大家介绍CSS3 Transform相关的知识。

Alexwolfe的Button库使用

前几天在互联网上看到alexwolfe制作的Button库,觉得很有意思,特意花了些时间学习了一下这个库的源码与使用。今天花了点时间将期整理与大家分享。

Button库并不是简单的一个CSS制作的Button库,在这里alexwolfe大师采用了SASSCompass进行开发和维护的。或许有些同学看到这两个东东会觉得很蛋疼,不知道怎么使用,其实没有那么恐怖的,只要你略懂CSS,就完全可以使用这个按钮库,大不了直接git下来他的CSS到你的项目中,这样也能使用,只不过你要按你的设计风格来调整就略会麻烦些。

页面

返回顶部