周刊5# 居中之美

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

如何实现跨浏览器的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》,特意将此文转载致此。

SVG系列教程:SVG文件结构

在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG?以及SVG图形与其它格式图像相比,优势在哪。另外介绍怎么将SVG图像应用到HTML页面,让浏览器能显示。从文中了解到,SVG图形其实就是一段XML代码,在HTML页面引用是通过引用.svg文件格式,或者直接在.html文件中放置<svg>元素。而两者最大的区别就是,独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。

SVG系列教程:SVG简介与嵌入HTML页面的方式

随着技术向前的推进,SVG相关的讨论也越渐频繁。为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中。从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程、译文或案例等。感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧。

用CSS创建跨浏览器的range input

这篇文章是Daniel Stern的客座文章。Daniel和我分享了一个他做的工具叫做range.css,它用来给<input type="range">创建样式。这是一件比较复杂的事情,因为它需要组合一系列的标准选择和属性以及非标准的前缀选择器和属性。我邀请Daniel对所有这些内容做一个解释。随着IE10的发布,我们给range input创建样式的能力已经得到了引人注目提高。用纯CSS实现跨浏览器兼容的range input(sliders)已经成为可能。在这篇教程中,我们用基本的range input作为例子。

inline SVG 入门指南

SVG全称为“可缩放矢量图形”,它的名字暗示着它本身的特点。SVG让我们可以将一个图形从100%放大到1000%并且完全不失真。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径,等等的来组成。如果你曾经使用过任何的矢量图软件 (像 Adobe Illustrator 或 Corel Draw),你能将你创建的矢量图轻松地输出为SVG文件。

Sass带来的变革

接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上。同时也让自己喜欢上了Sass,目前在自己的私人项目中,我一直都在使用Sass做为前端开发,用来处理CSS。同时今年自己创建了下Sass中国网站来做Sass相关的技术分享。其实,在W3cplus站点上,已经发布了近一百篇有关于Sass方面的教程(教程有自己的学习心得、有译文,也有其他同学的使用经验分享)。也自认自己是Sass在中国的推广者,其实我也更想做为Sass在中国的布道者,让更多的人了解他,学习他,使用他。

iSlider:一个优秀的滑动组件

iSlider:一个优秀的滑动组件

iSlider是一个表现出众,无任何依赖的mobile设备滑动组件。取名叫 iSlider 是为了像iScroll致敬,iSlider是移动的滑动组件的最佳解决方案。在WEB 轮播图已经变得小儿科的现在,很多人会质疑重新写个移动端的价值?其实移动端与web的环境有很多不同,用户习惯,行为也有很大的差异,而且移动端的浏览器,应用场景和web 端也差别很大。

页面

返回顶部