周刊5# 居中之美

居中的效果在Web应用中时常碰到,但就因为这样的效果常常让很多同学为难。比如说文本居中,水平居中,垂直居中,浮动元素居中等等。而且这也常常让面试官拿来当面试题,我也不例外,常常出这样的一道题:“元素A中包含B元素,而且B元素有可能是一行文本、多行文本,图片(未知大小),如何让B元素在A元素中实现水平垂直居中效果”。而这样的一道题也难倒了很多面试者,今天出这个周刊,主要搜集了有关于居中实现的解决方案。

创造夺目UI的7条规则(第二部分)

创造夺目UI的7条规则是一个系列文章,主要包括两个部分。总共包括七个设计规则:光来自天空、黑白优先、双倍空白、学习图片上放置文本的方法、使文本突出——或不突出、 只使用好看的字体和像艺术家一样偷师。这两篇文章在国外有关于UI设计引起很大的轰动性。特意将译文发出来与大家一起分享。最后非常感谢@李诺同学的分享。希望这两篇文章能给大家带来些许帮助。

理解SVG坐标系统和变换: 建立新视窗

在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中,我们将看一下我们如何这样做,以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活(或流动)。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容;更具体的是, SVG viewport, viewBoxpreserveAspectRatio属性。在第二篇文章里,你可以了解到任何你需要了解的关于SVG系统变换的内容。

理解SVG坐标系统和变换: transform属性

SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性,包括如何使用,以及你必须知道的关于SVG坐标系变换的知识。这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容;更具体的是, SVG viewport, viewBoxpreserveAspectRatio 属性。

理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio

SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性:viewportviewBox, 和 preserveAspectRatio。接下来通过三篇文章分别向大家阐述这方面相关的知识。

创造夺目UI的7条规则(第一部分)

首先,这篇文档不是给所有人看的。给谁呢?急需自己设计UI的开发者、想让自己的作品看上去比Pentagon PowerPoint、漂亮的UX设计师。或者想靠自己的UI挣钱的UX设计师。如果你曾就读过艺术学校,或者已自称为一名UI设计师,你可能会感到这篇文档a.)枯燥,b.)错误,c.)气人。没关系。你的批评都是正确的。关掉Tab页,离开即可。让我来告诉你你将从这篇文章中学到什么。

SVG系列教程:坐标系统

SVG其实相当于一块画板,然后在这块画板上绘图形,而每个画板都会有一个坐标系统。比如说画板的原始起点,绘制图形的起始点坐标,终点坐标等。这一切的一切都离开不坐标,而这些坐标就组成了一个坐标系统。在这篇文章的所要介绍就是SVG中一个关键知识点——SVG坐标。简单点理解SVG坐标就是屏幕坐标点(从技术上讲,最初的viewport坐标系统)与任何SVG元素相关联的坐标点系统(当前用户坐标系统)。例如,一个<svg>中使用<circle>绘制的一个圆,他就使用了一个标准的笛卡尔坐标系统(Cartesian Coordinate System)。

如何实现跨浏览器的SVG Sprites

CSS Sprites对于前端人员都比较熟悉,为了让Web网站减放Http的请求数,很多同学都常使用Sprites(国内称之为雪碧图或精灵)。但随着技术的更新,位图的Sprites已无法满足我们实际的需求了。这篇译文就用另外的一种方式,向大家阐述了Sprites——如何实现跨浏览器的SVG Sprites。

[转载]利用 HTML5 美化表单

对表单感兴趣的人并不多,但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松,甚至可能更富有趣味性。

[转载]理解SVG的viewport,viewBox,preserveAspectRatio

viewportviewBoxpreserveAspectRatio是SVG中基础而且必须了解的几个部分,如果这几个部分没有理解清楚,对大家今后学习SVG相关知识以及使用会带来很大障碍。这几日看到张大师(@张鑫旭)写了一篇与此相关的文章《理解SVG的viewport,viewBox,preserveAspectRatio》,特意将此文转载致此。

页面

返回顶部