炫意html5
最早CSS3和HTML5移动技术网站之一

CSS3教程

28种css3绘制多边形代码分享

本文分享了28种CSS3绘制多边形的代码。在做网页项目中需要使用多边形扇形图形来完成一些功能,第一印象就是使用CSS3来完成。经过查资料发现了transform 的skew()正好合适且且使用方便。 先看一个CSS3绘制多边形扇形的例子: ...

如何通过RAIL优化网页CSS性能

前段时间,我将精力专注在Web性能领域;在这个领域下有个重要的课题是如何让网页更丝滑(流畅)。 想让网页变得丝滑,首先,我们需要一个标准来判断什么样的网页是丝滑的;其次,我们要准确的测量出网页的性能数据;最后,使用有效的方法让网页变得丝滑。...

对css的line-height的属性、行距、x-height的深入理解

前言 行高,顾名思义是一行文字的高度,而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(line-box)上的,而行框盒子则是由内联盒子组成,因此,行高与内联元素可以说是非常紧密,行高直接决定了内联元素的高度(注意:这里...

实现CSS实现文字图片水平垂直居中的最全方法

关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法: 一、文本的水平垂直居中:  1、水平居中: 是不是很开心?超级简单的问题,一个t...

CSS3的Rem布局原理和布局方案(附源码)

Rem认识 rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em em em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单...

CSS/CSS3制做书籍目录(附源码)

本文是一个使用纯CSS制做书籍目录效果的实际案例,开发了源码下载。 目录效果演示 CSS3制做书籍目录 16 WebSocket的JavaScript例子 29 websocket与node.js的完美结合 59 CSS3中文手册 252 ...

纯CSS3动画按钮效果 5种漂亮样式

这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码随意改变自己喜欢的颜色样式。 在线演示 ...

CSS3 Columns:比table更好用的分列式布局方法

CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这...

浏览器引擎前缀(Vendor Prefix)教程

浏览器引擎前缀(Vendor Prefix)是什么? Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏览器使用的是WebKit...

[译] 一个健壮且可扩展的 CSS 架构所需的8个简单规则

CSS architecture 这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。 我已经尽力尝试用...

简洁的图标Cikonss:CSS3响应式图标字体

在这篇文章中,给大家介绍一个很简洁的图标 Cikonss,和一般的图标或图标字体不一样的地方在于,它使用CSS来创建的,而不是图片创建也不是字体图标。包含了40多个不同的图标类型,并且支持响应式的布局,并且兼容浏览器,因为不使用CSS3。 ...

Web开发者的福利:30段超实用CSS代码

上周发表了一篇“ Web开发者不容错过的20段CSS代码”,大家一致觉得很实用。该文是笔者对后30个的翻译,希望对大家有帮助。 1.花式连字符(&) 这个类应该在span元素里使用,并且里面包括&字符。它使用经典的serif...

CSS实例教程:创意CSS3头像展示教程

今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家。其中关于本示例的一些css样式呈现,个人认为还有很大的发挥空间,例如鼠标经过的时候...

HTML5+CSS3城市场景动画

最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果;除此之外,页面的视觉效果采用了插画的设计风格,希望大家...

CSS3制作迷你播放器面板

这是格子同学提供的一款由CSS3制作的迷你播放器面板的案例(时间效果是由jQuery完成)。这个案例仿Mac电脑的窗口风格设计,整个面板分成三部分,顶部由标题和最小化、最大化以及关闭按钮组成(这三个按钮功能未添加);中间部分类似于播放器一样...

css3学习-插花的杯子

感觉css3细节很多,群里的朋友布置的作业,插花的杯子;跟原图有一定的差距!不管怎么样,坚持了1周学习加测试,加练习终于搞定!只做了chrome的兼容!   点击查看DEMO:插花的杯子 感兴趣的可以看源码! 写css3的过程中有...

CSS3教程HTML5教程