轩枫阁

首页 / 搜索标签: CSS3 (第5页)

让IE支持HTML5标签及对CSS3 Media Query的兼容

前言

HTML5新增了很多语义化的标签,赋予网页更好的意义和结构。一个网站要做到一套代码多种终端设备都美观的展现,就需要使用CSS3多媒体查询Media Query做成响应式的。

HTML5标签兼容方案

使用HTML5标记的优势

HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时,也有利于SEO。

关于HTML5结构

文章一:http://imsole.net/html5/ele.html

文章二:http://www.xuanfengge.com/html5-structure.html

兼容解决

HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢?在高级浏览器能使用上这些标签,增强语义化;而在低级浏览器(包括IE6)上表现不会出错。那就需要引入html5.js这个文件。 查看全文

2014/03 18  周二

基于CSS3实现的纸飞机折叠飞翔动画过程

前言

也许你有注意到本站的logo,点击之后,会产生一个纸飞机飞翔的过程,是一个3D动画效果,目前仅支持webkit内核浏览器预览效果。

demo地址

http://xuanfengge.com/demo/201402/plane

实现原理

整个动画过程包括

消息面板翻转、飞机两翼折叠、飞机平放预备飞行、飞机后退助跑、飞机向前飞翔、整个过程的背景颜色过渡。

简单解析

主要的动画效果(步骤分解状态)使用CSS3的变形(transform)、转换(transition)、动画(animation)、视图距离(perspective)等等新属性实现,并结合js的setTimeout控制动画时间,通过增减css的class来实现整个过程动画。 查看全文

2014/02 22  周六

CSS3渐变gradient的应用

前言

在CSS3盛行的年代,我们要学会极致的运用它的属性来装点我们的网站,学会CSS3的渐变就可以做出一些非常炫的效果。

应用点

在没有CSS3之前,为了显示一个渐变而专门制作一个图片,这种不法不但不灵活还增加请求数。那我们能用gradient做些什么呢?做渐变背景、做渐变导航、做按钮、按钮的四态(default、hover、active、focus)、绘制图形、配合CSS3动画做特效等。

Gradient语法

1、线性渐变的语法

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

2、径向渐变的语法

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);} 查看全文

2014/02 17  周一

CSS3属性border-radius绘制的图形

border-radius,css3的圆角属性。但是除此会是圆角,它还可以做点别的事情。radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第7),把这些角按照不同的顺序和大小来展现,能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。

 

展示

1143010

把这些基本的图形进行组合,还可以描绘成不同的图案。以下只是简单的几个举例,更多的图形,自己动手画吧。仅border-radius就能实现这么丰富的图案,如果再加上边框大小、渐变颜色和阴影等,将会添加更多的质感。更多图形请参见:CSS3绘制各种图形效果

1143011
查看全文

2013/12 01  周日

CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?

前言

webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。

演示

来看看这2个滚动条demo: demo1(图片版)demo2(纯CSS3版) 查看全文

2013/11 03  周日

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子