SVG画布,坐标系统,视窗
当你在屏幕上看SVG图像时,你是通过SVG视窗来看到画布的,所以其实你只看到了画布的一部分。画布和视窗是既相互独立又相互联系的概念,它们之间的关系很容易混淆,导致有时会有预料之外的结果。你只有弄明白了它们之间的关系,才知道如何去控制它们。
当你在屏幕上看SVG图像时,你是通过SVG视窗来看到画布的,所以其实你只看到了画布的一部分。画布和视窗是既相互独立又相互联系的概念,它们之间的关系很容易混淆,导致有时会有预料之外的结果。你只有弄明白了它们之间的关系,才知道如何去控制它们。
CSS的clip-path
属性是你改变传统单调的盒子布局,走向响应式设计的通行证。你将开始摆脱条条框框,自由地在您的网页上使用六边形、星形和八边形等等进行设计。一旦你真正开始使用clip-path
,你可以生成的形状是无限多的,只需要简单地调整几个值即可。虽然这篇文章的重点是使用CSSclip-path
完成多边形裁剪,但是所有的demo都提供了内联SVG的参考,这是为了能额外获得Firefox的支持。只要你使用过CSSclip-path
创建响应图形,生成响应式的SVG裁剪图形是很容易的。我们后面再详细说说。
使用Sass,其中最喜欢的就是Sass的mixin和function功能。他们能自动化的重复使用一段CSS代码或功能以及更好的维护CSS。这些功能让人实在是折服。但我常常发现许多开发人员为一个简单的任务创建一个复杂的系统,比如管理一个字体堆栈或颜色方案。这些设置和使用都让人感到非常的繁琐。在这篇文章中,我将解释这些自动化实现的功能。
在这篇教程中,我将为你介绍如何在页面滚动时触发CSS动画。这种效果使用JavaScript和CSS就能做到。Jeet Grid System website 就是使用这种小技巧的例子,当你向下滚动的时候,CSS的transform
、animation
就被触发了。想要达到这种目的,有很多Javascript/jQuery 插件可以用,比如WOW,在这篇教程中,我将为你展示如何不适用插件做到这种效果。
响应用户输入可以说是我们界面开发的核心。为了构建响应式Web产品,理解触摸,鼠标,指针,键盘如何和浏览器一起工作是关键。你很有可能已经在移动浏览器上经历了300毫秒的延迟或者在纠结于触摸滚动导致页面卡顿。在这篇文章中,我们将介绍事件级联并且利用这些知识来实现一个支持多种输入法的点击事件而不违反像Opera Mini这些代理浏览器事件规则。
在本系列文章的第一部分,我简单介绍了Sass,一种CSS的预处理器。我展示了如何在Codekit中创建一个工程来编写Sass文件,并且介绍了一些Sass的语言格式,关于partials,变量,注释和错误。在第二部分,我们将要深入的研究一下变量和进行变量运算以实现垂直节奏。我也将谈谈使CSS更加容易阅读和维护的Sass的嵌套规则。
有几种不同的方法可以在CSS中声明字体大小。总的来说,这些单位分为两类——相对和绝对。**绝对单位**(大多)是固定的,并且涉及到一些物理的测量。他们一旦被声明,将不能通过改变其他元素的字体大小来改变他的大小。**相对单位**没有一个客观的测量。相反,它们的实际大小是通过父元素的尺寸来确定的。这意味着他们的大小可以通过改变相关元素的大小来改变。
每年,苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它。
视窗(Viewport)单位已经有了好几年了,但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用,特别是那些涉及响应式的设计。
SVG的viewBox
属性是SVG最强大的特性之一。掌握好这个属性可以让你的SVG技能更上一层楼。特别是考虑到几个主要的SVG sprite技术也是依赖这个属性来工作的。因为viewBox
属性可以用来裁剪和扩展SVG画布,它可以用于art-directing的SVG——使用它来裁剪SVG中你想要展示的区域。在这篇文章中,我想要就我们如何使用它来提一些建议,帮助你节省一些时间来做它,然后展示viewBox
属性在CSS中的重要性,希望本文能够成为一个实际案例,能帮助推动这个旧的SVGWG提案的前进。