分类 » 前端开发

一些惊艳的 CSS3 之二

分类： 标签：‚ ‚  评论：13 13 评论

接上一篇文章《一些惊艳的 CSS3 之一》 三. 多重背景 多重背景并没有使用新增的 CSS3 属性，而是在我们都很熟悉的 background-image 作出调整，支持同时使用多个图片，例如：传统来说，为元素设置背景图会像如下设置： #demo {background: url(bg1.png) no-repeat; } 但是在 CSS3 中，设计师可以同时为一个元素指定多个背景，例如： #demo...

Read More –>

一些惊艳的 CSS3 之一

分类： 标签：‚ ‚ ‚  评论：9 9 评论

最近对一些 CSS3 的新特性作出了不少的介绍说明，这些内容大多都是 CSS3 中相对比较普及的内容，其实 CSS3 还有很多很酷的特性，只是这些特性在浏览器支持和网站的具体使用上比较逊色，但是仍具有不少的魅力，今天这篇文章要介绍的就是几个比较酷而相对介绍较少的 CSS3 特性。 一. 边框新特性 在 CSS3 中，border 增加了两个新的特性，一是边框图片，而是在边框颜色中使用渐变色。 边框图片利用 borde...

Read More –>

CSS3 自定义动画（animation）

分类： 标签：‚ ‚  评论：11 11 评论

除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有一种自由度更大的自定义动画，开发者甚至可以使用变形（transformation）和转换（transition）制作自定义动画，利用纯 CSS 制作出像 Flash 一样的效果。在实际使用中不难发现，变形和转换更适合做元素的交互，而自定义动画除了做交互外还能使到网页具有活力，有了自定义动...

Read More –>

更多的 CSS3 变形 (transformation)

分类： 标签：‚ ‚  评论：9 9 评论

在 Kayo 之前所写的一篇文章《CSS3的变形与过渡样式》中，曾经对 CSS3 的变形 (transformation) 和转换 (transition) 作出详细介绍，但关于变形的部分内容仍可以扩展说明一下，因此写了本文补充一下变形的相关内容。 在前文中，已经说明了 transform 属性的两个用法 rotate 和 scale ，分别用于对象的旋转和缩放，具体的内容可以阅读前文。而现在要补充说明的，是 tra...

Read More –>

IE6 下 img 底部多出空白

分类： 标签：‚  评论：25 25 评论

是芥末日木有出现，Kayo 又可以继续写博客了。昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ，用块级容器包裹 img 标签时，在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白，例如网页中有如下的结构： <ul> <li><img src="img-bug.png" alt="img bug" /&...

Read More –>

CSS3 之阴影效果

分类： 标签：‚ ‚ ‚  评论：9 9 评论

对于设计师来说，阴影可以说是一个很常用的效果，它可以直观地突显一个元素，用在网页设计上也非常适合。在 CSS3 阴影效果出现之前，开发者只能通过图片在网页表现阴影，尤其对于阴影文字，使用图片表示是很常见的方式，而在 CSS3 阴影出现后，设置元素的阴影将会变得轻松，下面详细介绍 CSS3 阴影。 一. CSS3 阴影基础 在 CSS3 中，阴影相关的具体属性有 text-shadow 和 box-shadow ，分别...

Read More –>

CSS3 之 RGBa 可透明颜色

分类： 标签：‚ ‚  评论：20 20 评论

在 CSS3 中，增加了一个 opacity 属性，允许开发者设置元素的透明度，现在 opacity 已被主流的现代浏览器支持，但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度，这样的透明规则相当不灵活，在实际开发中往往也是会遇到很多麻烦。其实，在 CSS3 中还有另外一套颜色透明解决方案 —— RGBa 。相对于 opacity ，RGBa 可以在单个元素上设置透明度，而不影响其子元素，只是 R...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 对 Web App 的影响

分类： 标签：‚ ‚ ‚  评论：24 24 评论

在本系列文章的开头，Kayo 曾经介绍过 Web App 的优缺点，并且说明了 HTML5 在其中起的作用，当然，Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后台技术的共同配合，但 HTML5 无疑为 Web Apps 发展中一些重要的方面带来主要贡献。本文要阐述的，正是 HTML5 为 Web Apps 带来的各种影响，或者说，HTML5 究竟为 Web Apps 开发带来了...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 Web Workers

分类： 标签：‚ ‚  评论：9 9 评论

本文要介绍的是 HTML5 的 Web Workers 特性，它解决了 JavaScript 开发中一个重大的问题 —— 在后台运行 JavaScript 。与本系列前两篇文章介绍的特性相似，Web Wordkers 似乎也是为了 Web Apps 而设计的，可以想象，Web Apps 乃至原生 Apps 受移动设备性能的限制比在桌面环境中要大很多，尽管现在的移动设备性能已经不断的提高，这对于发展 Web Apps ...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

分类： 标签：‚ ‚ ‚  评论：18 18 评论

本文要介绍的，是 HTML5 离线网络应用程序的特性，离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ，也称离线缓存。当用户打开浏览器时，浏览器会将一个列表中指定的资源都下载并储存在本地。下次当用户再访问这个网络程序时，浏览器会自动引用本地缓存中相应的文件，而不会再从网络下载这些资源。不管离线网络应用程序是否专为 Web Apps 而设，但这对于 Web Apps 来...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 Web Storage

分类： 标签：‚ ‚  评论：14 14 评论

绝大多数的软件都需要使用某种具有持久性的方式来存储数据，Web Apps 也不例外，涉及到完整后台的 Web Apps ，可以直接在后台使用 mysql 等数据库来存储数据，但过多的 sql 查询会影响服务器性能，甚至是整个 App 的性能。因此，一些简单有效的存储方式对与 Web Apps 显得很重要，Web Storage 似乎正是为此而设计。下面开始正式介绍 Web Storage 。 一. Web Stora...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 与响应式

分类： , 标签：‚ ‚  评论：3 3 评论

jQuery Mobile 在刚推出的时候，曾经宣传了几个重要的特点，除了 Kayo 在本系列文章中多次介绍的“触摸屏优化”外，另外一个最直接的特点就是“响应式设计”，关于响应式设计，Kayo 已经写了不少相关的文章进行说明，而本文要介绍的，是 jQuery Mobile 中为响应式设计作出的优化和工具。 在 jQuery Mobile 测试版本的文档中，有一个栏目名为“Responsive Layout Helpe...

Read More –>