前端开发者学堂 - fedev.cn
    发布于

    《图解CSS3:核心技术与案例实战》一书勘误

    经过两年多的时间,值得庆幸的是《图解CSS3:核心技术与案例实战》一书终于于今年七月份上架与各位见面。既激动又害怕,激动的是自己也所谓写了本书;担心的是误人子弟。经过近半年时间,这本书也得到了一些同学的认可,也被人骂过。不过这些都已经不重要了,重要的是这本书给有需要的同学得到了一定的帮助。经过一段时间,同学们通过不同方式也给我反馈了很多书中不足之处,这次趁着出版社加印,将书中有误之处在此刊登。以免给同学们造成误解。在此非常感谢同学们对我的支持,也特别感谢那些细心的读者,将书中不对之处及时反馈给我。如果您正在阅读这本书,或者你将阅读这本书,如果发现书中有任何不对之处,还望能反馈给我。可以直接在评论中留言,也可以邮件致w3cplus(at)hotmail.com。

    发布于

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

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

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

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

    发布于

    使用CSS3制作倒影

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

    使用CSS3 Gradients创建图片占位符

    图片占位符,我们最常用的方案就是留空白区域,或者使用空的div标签来模拟,甚至使用一张背景图片来做。但这些方案都不是一个完美的方案,那么什么是完美的方案呢?今天我们通过CSS3的渐变来实现图像的占位符功能,这种方案既让你的代码更为干净,而且还可以帮你减少HTTP的请求数。最后还通过使用Sass让你实现自动化功能。感兴趣的同学请点击阅读正文。

    发布于

    图解CSS3——核心技术与案例实战

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

    本书理论知识系统全面,详细讲解了选择器、背景、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性,所有这些都巧妙地融入到案例中,而不是枯燥的理论讲解;讲解方式直观易懂,以图解的方式巧妙地展示了这些新特性...

    即将面世

    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变形中主要包含的一些基本功能如下。

    CSS3 Transform——transform-origin

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