现代 CSS

译文

用CSS变形创建圆形导航

在这个教程中,我会教你使用CSS变形制作圆形导航。 我会带你一步步地创建样式,讲解背后的数学知识和简单的逻辑,让你对这技术有清晰的认识。正如我提到的,使用CSS变形创建样式,会用到相关的基础数学知识。但是不必担心, 用到的数学非常简单,我会带你一步步地客克服它。我要指出原技术属于Ana Tudor。我把它修改成我想要效果,这也是我希望你的在教程结束时去做的:对这技术有深入而且清晰的认识,开始查阅资料并且构建自己的样式。

Sass两个先进特性与局限性

Sass是一门优秀的CSS预处理器语言,他有很多自己独特的特性,但具有这些独特的特性基础上,他有很多功能又有所限制。今天根据的《Two handy and advanced SASS features and their limitations》一篇文章进行翻译,给大家介绍了Sass中插值和列表两个特性,以及这两个特性的极限性。在文中分享了他在使用Sass的插值和列表的一些发现,同时也想知道你是否碰到在文章所介绍的Sass限制性,以及您又是如何绕过他们的。

Hold住CSS布局新属性

新css属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志。按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作。然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了。

主流的浏览器,在W3C的推动下,已经开始实现多种新型的布局方式,而且我们现在已经可以开始使用了。举个例子,W3C开始把CSS3 Multicolumn Layout Module考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。

CSS布局的未来

大家都知道,css有着奇妙的特性,然而让人失望的是,css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变,更多的动态页面正是由css所支持的,正如peter gasston所说的。这是一篇关于css布局且具有前瞻性的 文章。在这里,我能够保证在数年之后,css3必定能够引领潮流。在这篇文章当中,我将为大家从优秀实用到纯粹理论阶段中介绍有关css布局的工具,也许在这些阶段中你不一定用得到他们,(至少不是现在),但仍然还很有必要去了解,通过这样可以透过迷雾,看清未来。

一个完整的Flexbox指南

Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。最重要的是,Flexbox布局方向不可预知,他不像常规的布局(块就是从上到下,内联就从左到右)。而那些常规的适合页面布局,但对于支持大型或者杂的应用程序(特别是当他涉及到取向改变、缩放、拉伸和收缩等)就缺乏灵活性。根据Chris Coyier的《A Complete Guide to Flexbox》所译,再次向大家系统介绍了Flexbox模块中的各个术语,以及属性、属性参数所起的作用,并附上几个简单的实例与大家理论与实战相结合,实打实的了解清楚Flexbo模块。

如何把你的图标转换成web字体

使用@font-face运用本地字体,制作一些特殊的字体效果非常方便,特别是使用@font-face制作图标,更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体,这样一来就有很多同学在问,如何制作自己需要的字体呢?或者说如何将自己需要的图标转换成自己需要字体,在运用到web页面中?这个问题问得很好,其实实现思路并不复杂,我们需要通过一些适量图的软件,绘制出矢量图标,然后通过一定的工具将这些图标转换成需要的字体。或许你会说,这不是废话,还是没有谈到怎么做出来。大家不用着急,根据Martin Gittins的《How to turn your icons into a web font》文章介绍,你只需要一款制作矢量图的应用软件,和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信,不仿往下看,我想你看后,以后再也不会使用位图了。(^_^)

页面

返回顶部