Category: Div / Css / XML / HTML5 / SVG

示例 背景 验证码主要是防止机器暴力破解。之前的验证码都是以静态为主，现在一些产品开始使用动态方式，增加破解的难度。动态方式以 gif 最为简单可靠。gif 兼容性好，尺寸小。这里分享的就是一种：用 JS 实现 gif 动态验证码的思路。感谢关注。 任务分解 绘制旋转的文字 计算每个字符出现位置和角度 生成 gif 图片 逐步求精 如何绘制旋转的文字？   了解能用的 API context.rotate(angle) 使当前坐标系旋转 angle，单位弧度 context.translate(x, y) 使当前坐标系偏移 x, y，单位像素 context.font 设置字体 context.strokeText(text, x, y [, maxW… Read More

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价 值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。 与其他一些display属性类似… Read More

本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法， 用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额 外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简 单，上手容易，兼容性强，… Read More

在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。 当开发完成后，我发现了这个很酷的jQuery plugin(由@jackrugile开发)。 于是我就开始思考，我应该做出这个小的CSS project。   CSS发抖 DEMO   转自：http://www.webhek.com/… Read More

如今各大浏览器都纷纷宣布已经或是计划支持HTML5技术，虽然支持的程度究竟怎么样现在还不好说，但是最给力的无疑就是Google的Chrome浏览器了。 （欢欣鼓舞的说，IE9也支持HTML5了，似乎还不错哟~ ） 似乎Google现在花了很多心思在HTML5上，估计是为了给力他的Chrome OS，为未来的“云”世界做好部署。 HTML5的Logo们 先说个最近的~吉他logo（去看看） 2011年6月9日，谷歌换了个很有趣的logo，纪念美国电吉他大师莱斯·保罗诞辰96周年： 继它的涂鸦Logo，游戏Logo，视频Logo之后，这个Logo升级为乐器Logo，除了可以用鼠标滑动演奏外，点击Logo下的小键盘… Read More

本来这篇文章想叫《挺起你的HTML5》或者《让HTML5飞》或者神马其他的，但是为了更好的体现主题，我就用这个直白点的题目吧  ~ 随着各种智能手机(iPhone、Android)大行其道，App模式的应用开发变得热火朝天，反观Web领域则黯然失色。然而即将（或者说已 经）到来的HTML5，又为Web注入了新鲜的鸡血，让我等Web码农再次激动不已——我们可以用HTML、CSS、JavaScript开发手机应用 了！可以实现绝大部分Native App的功能，跨平台，自动更新，即需即取……亲，只需要有浏览器哟！而且没有恶心的IE6 ~ 做任何一个应用都离不开两种东西：文件和数据。下面我就以一个简单的小应用来介… Read More

原文标题：Responsive CSS Keyframe Animations 原文作者：Joni Trythall 原文地址：http://designmodo.com/responsive-animation/ 译文作者：@静逸秋水（蒲欢）   ==============================   我知道对于CSS动画的的喜好并非自己一人。同时我也认为还有诸多人同我一样热衷移动开发。然而，使用带有动画网站的愉悦体验往往却在移动端戛然止步。如果我们的目标是创造最好的用户体验，我们承认，动画无疑会丰富这方面的体验，我们需要确保我们交付不管正在使用的设备。 由于移动端受到屏幕尺寸限制，再… Read More

Cache Manifest是HTML 5的一种缓存机制，文章作者直接用博客当测试环境，虽然应用起来非常简单，但效果却出奇的好。缓存后的速度，简直是惊人的快。像Yslow显示，打开一个缓存过的页面，只要0.729秒，比不缓存的差不多快了10倍。 一、Cache Manifest基础知识 作为一个Web开发相关的人员，都不会少听到、看到Cache这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest文件，这里进行了简单的整理： ◆MIME TYPE：text/cache-manifest ◆需要由你创建… Read More

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。) 方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div class="wrapper"> <div class="cell"> <div class="content"> Content goes here&… Read More

1、引子与强迫症 先看图： 如 上图，放大了数倍之后的输入框在无文字和有文字时的光标高度以及对齐方式。以上举例的四个输入框只有百度做的最完美，无无文字时和输入文字时一致对齐，非 常的美观。反观其他3个输入框，做的都不是特别好，只在意在无文字输入时，蓄意放大光标长度，导致输入文字时光标高度不一致。这种输入框在强迫症患者下看 来是无法接受的。 2、光标的高度决定关系 以淘宝输入框为例： 如图中用绿色框中的样式，如文字大小、高度、行高、内边距，这些是影响输入框内部的主要样式（样式参考以chrome浏览器为例）。 chrome浏览器的输入框光标、输入文字、占位符有以下规则： 无文字输入时，以行高为准； 有文字输入时，以文字… Read More

1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求，当网络比较慢的时候查看照片等待的时间是比较长的，用户体验会很差。   2.现状 现在加载照片的方法主要有一下两种： （1）最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程，并且不能开始给用户看到照片大概的情况，用户体验比较不好 （2）在html页面先用img标签加载显示照片的缩略图，同时用javascript隐藏的加载照片的原图，等照片大图加载完成后再将原图显示到页面中。以下是流程图： 该方法用户可以先看到的是模糊的小图，等照片的原图加载完后才能看到真实的照片… Read More

1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求，当网络比较慢的时候查看照片等待的时间是比较长的，用户体验会很差。   2.现状 现在加载照片的方法主要有一下两种： （1）最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程，并且不能开始给用户看到照片大概的情况，用户体验比较不好 （2）在html页面先用img标签加载显示照片的缩略图，同时用javascript隐藏的加载照片的原图，等照片大图加载完成后再将原图显示到页面中。以下是流程图： 该方法用户可以先看到的是模糊的小图，等照片的原图加载完后才能看到真实的照片… Read More

做前端开发，经常各种Code （html css js），特别是css3的一些属性，经常需要添加-moz-、-webkit-、 -o-、 -ms-，表示无比的淡疼；本来很简介的代码，这样下来，乱乱的感觉。 还好，有些牛逼的前端开发的人在，有个叫Lea Verou的家伙就搞了一个Prefix free的东东来完善减轻一些负担。类似插件还有jQuery CSS3 Finalize。 Prefix free简介 特点： 处理 <link> 或<style>元素，在需要的地方自动添加前缀； 处理新的<link>或<style>元素，即网页加载完后再添加的新标签，需要Dynamic DOM p… Read More

链接的虚线框影响整体风格，我们在工作经常会将它去掉，而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待，这种技巧经常用到，作个记录，以备不时之需。 当一个链接得到焦点时，默认会有个虚线框。如图： 在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写： a:focus { outline:none; -moz-outline:none; }   顺便提一下，如果你用过 Safari 和 Chrome 可能会发现，当输入框得到焦点时边框会出现阴影效果。   如果想去掉阴影效果也可以用 outline 属性。 input,t… Read More