2011年09月23日 by 张 鑫旭 阅读 119301 次, 今日 8 次
现在现代浏览器都对CSS3的渐变支持良好,加上IE的渐变滤镜,可以在不使用图片的情况下实现各个浏览器的两色渐变效果。这里,再简单介绍下如何使用svg实现元素背景的垂直渐变,水平渐变,斜向渐变,或是径向渐变,以及更加复杂的多层渐变。
耳熟能详的唠叨:本文提供demo页面,丰富的截图以及必要的源代码展示。希望本文的内容可以对您的学习有所帮助。
阅读全文…
标签: css3, SVG, 图片, 效果, 渐变背景
发布在 SVG相关 | 9 条评论 »
2011年09月22日 by 张 鑫旭 阅读 338025 次, 今日 4 次
HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言,应用的HTML5相关特性有:data-
自定义属性、placeholder
、以及email
类型input文本框。上周新上线的会员中心,自己又应用了HTML5相关内容——HTML5 localStorage本地存储,这里简单分享下。
一如既往,本文提供demo页面,提供必要的截图和源代码展示,还有对比实例,希望能触动一下大家的小小神经。
阅读全文…
标签: cookie, HTML5, localStorage, MooTools, 本地存储, 浏览器
发布在 JS实例 | 34 条评论 »
2011年09月21日 by 张 鑫旭 阅读 132138 次, 今日 7 次
网站的首页经常或有广告位图片滚动展示的效果,主流网站上都是使用Javascript实现的。实际上,在CSS3的世界里,我们可以完全摒弃Javascript实现类似的效果。而本文的内容就是展示于简单介绍如果使用CSS3实现图片滚动动画展示效果。提供demo页面,必要截图和源代码展示,希望能对您的学习有所帮助。
阅读全文…
标签: animate, css3, 图片切换效果, 无缝滚动
发布在 CSS相关 | 8 条评论 »
2011年09月19日 by 张 鑫旭 阅读 127111 次, 今日 4 次
技术的发展往往导致新事物的产生。关于web页面布局,我们应该听过固定布局(fixed layout)、流体布局(fluid layout),那响应布局(responsive layout)是哪个鸟蛋呢?
本文就将深入浅出地介绍响应布局。提供目前现有网站的实例展示,提供自制demo实例展示。配备必要的截图,提供详尽的源代码,细致的分析阐述。相信本文的内容会对您的学习有所帮助的。
阅读全文…
标签: css3, javascript, media queries, 响应布局, 固定布局, 流体布局
发布在 CSS相关 | 18 条评论 »
2011年09月15日 by 张 鑫旭 阅读 691990 次, 今日 21 次
在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张。要一次上传多图,做法是借助于flash。或者使用隐藏的iframe框架页面模拟ajax上传,一次一张,连续多次。然而都有缺陷。HTML5是个好东东,其中之一就是支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,纯粹利用file控件实现,简单方便迅速,想不让人称赞都难啊!
本文就是详细地介绍基于HTML5的可预览多图片Ajax上传的一些内容。有丰富的截图示意和源代码展示,以及必要的API参数说明。希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: Ajax, chrome, FileReader, HTML5, readAsDataURL, 图片上传, 图片预览
发布在 JS实例 | 316 条评论 »
2011年09月9日 by 张 鑫旭 阅读 242654 次, 今日 8 次
就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块草案。CSSOM视图模块(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。
本文的内容就是将CSSOM视图模块相关的一些属性,方法等一个一个整理出来,包括兼容性,使用等等。每个API基本上都提供demo页面测试,使用的源代码展示等等。内容较多,请耐心阅读。相信本文的内容会对您的学习有所帮助的。
阅读全文…
标签: availHeight, availWidth, clientHeight, clientLeft, clientTop, clientWidth, clientX, clientY, CSSOM, elementFromPoint, getBoundingClientRect, height, offsetHeight, offsetParent, offsetWidth, screenX, screenY, scrollIntoView, scrollLeft, scrollTop, width, 兼容性, 鼠标事件
发布在 JS相关 | 28 条评论 »
2011年09月1日 by 张 鑫旭 阅读 85776 次, 今日 7 次
Minimum Page项目的终极产物形式就是个CSS文件。我们都知道CSS reset重置的终产物也是个CSS文件,只是里面的样式无论在各个浏览器中是否有差异都是置为0,或normal之类。
而这里Minimum Page项目:
1. base.css文件只针对各个浏览器下有差异的元素进行样式定义(例如……
阅读全文…
标签: css reset, Minimum Page, normalize.css, Skeleton, 列表, 控件, 继承
发布在 CSS相关 | 13 条评论 »
2011年08月23日 by 张 鑫旭 阅读 55948 次, 今日 7 次
本文是去年这个时候流产的草稿又起死回生的一篇文章。当初本来想详细讲述Media Queries的前前后后,祖宗八代,后发现被人捷足先得,不得已,流产了。今天在1周年之际,重拾此文,讲下CSS3 Media Queries的些野史外传。有demo,有源代码展示,总之,希望本文的起死回生之作能够对您的学习有所帮助。
阅读全文…
标签: css3, media queries, transition, 动画, 布局, 自适应
发布在 CSS相关 | 7 条评论 »
2011年08月17日 by 张 鑫旭 阅读 50329 次, 今日 6 次
近日闲适,就随便折腾点东西。本文的内容就比较蛋疼,使用CSS让字符分别上下半截高亮显示。模拟淘宝网排序处的双向排序箭头效果。提供demo页面,必要的截图和源代码展示。总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: 字符, 绝对定位, 高亮代码, 高度
发布在 CSS相关 | 11 条评论 »
2011年08月15日 by 张 鑫旭 阅读 58278 次, 今日 1 次
本文是个短篇,一点小技术的展示。如何妙用CSS3属性作为CSS hack来实现一些兼容性的页面效果,同时,又能兼顾一些现代浏览器。提供demo页面,必要截图以及源代码展示。总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: background, border-radius, box-shadow, css3, hack, ie9, rgba
发布在 CSS相关 | 3 条评论 »