logo

关于-webkit-animation

2013/5/11 2:06:54 | Tag: -webkit-animation, CSS, 动画 | Hits: 417 | Comments: 0

-webkit-animation:仍旧是一个复合属性,

语法:-webkit-animation: name duration timing-function delay iteration_count direction;

包括以下几个属性:

(1)-webkit-animation-name 
这个属性的使用必须结合@-webkit-keyframes一起使用
eg:
@-webkit-keyframes fontchange{
0%{font-size:10px;}
30%{font-size:15px;}
100%{font-siez:12px;}
}
百分比的意思就是dura

10个网页设计师必备的CSS技巧

2012/8/7 18:59:59 | Tag: css, web | Hits: 996 | Comments: 0


CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好。当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧,如果你想设计出独一无二脱颖而出的网页你必须得好好注意了。

1. @font-face
一种用其他服务器上的字体的好方法。很明显,如果你不能在托管服务器上找到你需要的字体,你可以在样式中使用这个方法来引入你需要的字体。

@font-face { 
font-family: Blackout; 
src: ur

理解css中的长度单位

2012/4/9 18:34:02 | Tag: CSS | Hits: 931 | Comments: 0

很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~

css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。

%——百分比
in——寸
cm——厘米
mm——毫米
pt——point,大约1/72寸;
pc——pica,大约6pt,1/6寸;
px——屏幕的一个像素点;
em——元素的font-size;
ex——font-size的x-height值,为小写字母x的高度,通常相当于font-size的一半。
我们常用的有px、%、em,px就不多说了,em和%多说点儿:

1
2
3
.box{
line-height:1.3em;
}
元素的行高是当

css3实现图片旋转

2012/3/8 17:46:32 | Tag: CSS, HTML, 旋转 | Hits: 979 | Comments: 0

transform属性有很多用法,其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素,它可以实现很酷的效果。

img{
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransfo

19个基于 HTML5 和 CSS3 开发的优秀应用程序

2012/1/20 23:27:03 | Tag: HTML, CSS, WEB | Hits: 1079 | Comments: 0

今天,本文向大家展示19个基于 [url=http://www.html5cn.org/]HTML5[/url] 和 [url=http://www.html5cn.org/portal.php?mod=list&catid=16]CSS3[/url] 开发的优秀[url=http://www.html5cn.org/portal.php?mod=list&catid=20]应用[/url]程序。[url=http://www.cnblogs.com/lhb25/category/146076.html]HTML5[/url]可以说是近十年来 Web 标准最巨大的飞跃,它的使命是将 Web 带入一个成熟的应用平台,而 CSS3 同样给 WEB 开发带来了革命性的影响,以前很多需要[url=h

附常见中文字体的英文名

2012/1/15 10:46:45 | Tag: CSS, HTML, FONT, font-family | Hits: 1180 | Comments: 0

做项目时偶遇的一诡异问题,同样的代码,在ff和IE7以上页面显示正常,但IE6无论怎么改都不起作用,本来以为是IE6的某些浮动bug所致,结果弄了很长时间也不行,后来不经意间把原来设定的font-family: "黑体"属性去掉了,一切恢复正常。。。
到网上搜了下,还真有不少人遇到同样的问题,下面摘录一段:

css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了。
只要把font-family: "黑体";
改成
font-family:黑体;
就行了,去掉空格和双引号。
这个问题只存在于IE6中。

一处容器的font-family属性里写了"宋体",而IE6一下不解析"" 号,于是就导致整个页面的居中失效
css中指定fo

12个漂亮的CSS3按钮实现方案

2011/12/5 10:06:26 | Tag: CSS, HTML | Hits: 1106 | Comments: 0

在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍。
今天,本文收集了12个很不错的CSS3按钮方案并有相关的使用

[url]http://lab.simurai.com/css/buttons/[/url]
[img]http://www.webresourcesdepot.com/wp-content/uploads/css3-bonbon-buttons%281%29.jpg[/img]

[url]http://horaciobella.com/zardi/[/url]
[img]http://www.webresourcesdepot.com/wp-content/uploads/zardi-css3-buttons.jp

CSS3弹性盒模型

2011/11/20 20:43:07 | Tag: CSS3, HTML, WEB | Hits: 1065 | Comments: 0

Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML  、GladeXML。

使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:


1.<body>

2.  <div id="box1">1</div>

3.  <div id="box2">2</div>

4.  <div id="box3">3</div>

HTML5 中的一些新特性

2010/12/30 19:10:39 | Tag: html5, css | Hits: 1310 | Comments: 0

简洁的DOCTYPE: 
HTML5 只有一个简单的文档类型:<!DOCTYPE html>。它不使用版本,因此该文档类型适用所有版本的HTML。

简单易记的语言标签: 
你并不需要在<html> 中使用xmlns 或xml:lang标记。<html lang=”en”> 将对HTML5 有效。

简单易记的编码类型: 
你现在可以在meta 标签中使用”charset”:<meta charset=”utf-8″ />
不需要闭合标签: 
在HTML5 中,空标签(如:br、img 和input )并不

关于CSS的一些

2010/11/23 16:42:13 | Tag: css, html, 前端, web | Hits: 1421 | Comments: 0

[url=http://www.qianduan.net/]http://www.qianduan.net/[/url]  前端观察

[url=http://leaverou.me/scripts/css3learn.html]http://leaverou.me/scripts/css3learn.html[/url]

[url=http://caniuse.com/#cats=CSS3]http://caniuse.com/#cats=CSS3[/url]

[url=http://www.codenique.com/html/image_maps/]http://www.codenique.com/html/image_maps/[/url]
   

Copyright 2013 © SkyIMG.cn. All Rights Reserved. | 京ICP备05063919号