webkit+css3

　　公司产品重新定义，转用webkit内核，收集了一些webkit+css3的东东，以备后用。

1、表单应用

　　WebKit同样提供一些可用于你的页面全新的控制。下面的例子演示一个水平滑动条、一些新样式的按钮以及一个很像Safari工具栏的搜索框，代码如下：

<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/>
<button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button>
<button style="-webkit-appearance:push-button;width:200px;">aqua button</button>
<input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input>

预览效果：

二、圆角

　　圆角可能会给页面的实现带来一些难度，比如，它可能需要为每个角使用一张图片，但是这可能会引起某些表现上的问题（比如不同的浏览器可能表现上会有细微的差别）。在WebKit中被支持的CSS3的”border-radius”属性让实现圆角变得非常简单，它只需要几行简单的CSS代码。如下所示：

#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
text-align:center; background:#eee; }
<div id="boxes">
    <div style="-webkit-border-radius:15px;">
        All sides
    </div>
    <div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
        Opposite corners
    </div>
    <div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
        Top
    </div>
    <div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
        Side
    </div>
</div>

　　这段样式代码定义所有的在boxes里面的DIV都要有一个比较大的border（边框）、边距、宽度、背景等。然后每个div标签的border-radius被设置为不同的方式。你可以在下面看到运行结果：

三、简单的阴影

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
　　<div style="height:100px; width:200px; background-color:#414247;-webkit-transform:rotate(5deg);-webkit-box-shadow:3px 3px 3px #888;" ></div>
</body>
</html>

预览效果：

四、翻转与弹出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    img { -webkit-transform: scale(0.5); }
    img:hover { -webkit-transform: scale(1); -webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 50px #888;}
</style>
</head>
<body>
<img src="http://images.cnblogs.com/cnblogs_com/aspirant1314/279062/r_94dd4.png" />
</body>
</html>

拷贝代码运行可观看效果

五、纯CSS的渐变效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
    img.img1, div.swapper:hover img.img2 { opacity: 1.0;}
    div.swapper:hover img.img1, img.img2 { opacity: 0;}
</style>
</head>
<body>
<div class="swapper">
    <img class="img1" style="position: absolute;" src="http://images.cnblogs.com/cnblogs_com/aspirant1314/279062/r_94dd4.png">
    <img src="http://images.cnblogs.com/cnblogs_com/aspirant1314/279062/t_944.png" width="574" class="img2">
</div>
</body>
</html>

拷贝代码运行可观看效果

使用说明：

transition:当一个元素的状态改变时，将一个元素的表现样式动态的进行过渡转换。
当一个元素的状态改变时，将一个元素的表现样式动态的进行过渡转换。个人认为是一个里程碑了。在未来，js就不必再去设定网页的表现，而专注于网页的行为了。
使用时，仍需带前缀：-webkit-transition,-moz-transition,-o-transition.目前，webkit内核浏览器支持的最全面，请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现
transition:transition-property transition-duration transition-timing-function transition-delay
transition-property:要实现动态转换的css属性名。可以设定为all,则动态转换所有改变的属性值，包括transform
transition-duration:设定转换的时间，单位s(秒)
transition-timing-function:过渡时的效果，可以想象下幻灯片切换时的效果。常用值：ease | linear | ease-in | ease-out | ease-in-out
transition-delay:动态转换产生的延迟时间。不常用

附可以转换的CSS属性列表：

CSS属性改变的对象
background-color 色彩
background-image 只是渐变
background-position 百分比，长度
border-bottom-color 色彩
border-bottom-width 长度
border-color 色彩
border-left-color 色彩
border-left-width 长度
border-right-color 色彩
border-right-width 长度
border-spacing 长度
border-top-color 色彩
border-top-width 长度
border-width 长度
bottom 百分比，长度
color 色彩
crop 百分比
font-size 百分比，长度
font-weight 数字
grid-* 数量
height 百分比，长度
left 百分比，长度
letter-spacing 长度
line-height 百分比，长度，数字
margin-bottom 长度
margin-left 长度
margin-right 长度
margin-top 长度
max-height 百分比，长度
max-width 百分比，长度
min-height 百分比，长度
min-width 百分比，长度
opacity 数字
outline-color 色彩
outline-offset 整数
outline-width 长度
padding-bottom 长度
padding-left 长度
padding-right 长度
padding-top 长度
right 百分比，长度
text-indent 百分比，长度
text-shadow 阴影
top 百分比，长度
vertical-align 百分比，长度，关键词
visibility 可见性
width 百分比，长度
word-spacing 百分比，长度
z-index 正整数
zoom 数字

六、CSS 多卷布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#columns {
text-align: justify;
    -moz-column-count: 3;
    -moz-column-gap: 1.5em;
    -moz-column-rule: 1px solid #dedede;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.5em;
    -webkit-column-rule: 1px solid #dedede;
}
</style>
</head>
<body>
使用纯CSS，而不用HTML的table来实现多卷是件相当棘手的事情。但是，由于CSS3用于多卷布局的属性在WebKit中已经被支持，你可以通过明确的定义卷数，正确实现你所想要的效果。先看一下下面的CSS和HTML代码：<br />
<br />
<div id="columns">
    <div>Column A</div>
    <div>Column B</div>
    <div>ColumnC</div>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column3</div>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column3</div>
</div>
</body>
</html>

预览效果：

七、一个简单的Pop-Out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box1 {
    z-index: 100;
    position:absolute;
    top:5px; left:5px;
    width:100px;
    height:250px;
    padding:5px;
    -webkit-border-radius:10px;
    border: 2px solid black;
    background: #dddddd;
    z-index: 200;
}
#slider {
    z-index: 100;
    position:absolute;
    top:30px; left:5px;
    height:200px;
    width:90px;
    padding-top:10px;
    padding-left:15px;
    -webkit-border-radius:10px;
    border: 1px solid black;
    background: #eeeeee;
    -webkit-transition: -webkit-transform 0.5s ease-in;
}
</style>
<script>
function popout() {
    document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>
</head>
<body>
<div id="slider">Slider<br/>Content</div>
<div id="box1"><a href="javascript:popout();">Popout</a></div>
</body>
</html>

预览效果：

八、CSS3线性渐变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)实际用法... */
.back{background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); width:300px; height:200px;}
.back1{
    background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
    background: -moz-linear-gradient(top, #dedede, white 8%);
    background: -webkit-gradient(linear, 0 0, 0 20%, from(#dedede), to(white));
    border: 1px solid #dedede;
    width:300px;
    height:200px;}
.back2{
    background: white; /* 备用属性 */
    background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff6e02), color-stop(30%, #ffff00), color-stop(60%, #ce5100),color-stop(100%, #fff));
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:18px;
    border:1px solid #ff6e02;
    width:300px;
    height:200px
}
.bord{    
    width:107px;
    height:33px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border:1px inset #8f2e09;
    border-bottom:none;
    }
.back3{
    background: white; /* 备用属性 */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#35353b), color-stop(65%, #45454a), color-stop(100%, #050505));
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border:1px inset #d87d39;
    width:105px;
    height:32px;
    border-bottom:none;
    color:#f09341;
    line-height:32px;
    text-align:center;
}
</style>
</head>
<body>


双色渐变
<div class="back"></div><br />


双色控制高度渐变
<div class="back1"></div><br />

圆角多色渐变
<div class="back2"></div><br />

<div>
    ff下面渐变设置语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 
/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);
background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;
</div>
</body>
</html>

预览效果：

九、再谈清楚浮动

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。
这个方法来源于positioniseverything ，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */

刚刚看到一篇日志说这个问题，受到了点启发：

.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}

这个是优化版的清除浮动的样式，很值得推荐。

另外，我见到了一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。

html body div.clear,
html body span.clear
{
     background: none;
     border: 0;
     clear: both;
     display: block;
     float: none;
     font-size: 0;
     margin: 0;
     padding: 0;
     overflow: hidden;
     visibility: hidden;
     width: 0;
     height: 0;
}

这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。

十、960网格技术

http://960.gs/

十一、文字阴影

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    h1,h2,h3,h4,h5,h6{
    text-shadow: 1px 1px 3px rgba(20, 20, 20, 0.5);
    font-family:"微软雅黑",Arial,verdana;
    font-weight:normal;
    }
</style>
</head>
<body>
    <h1>文字阴影</h1>
    <h2>文字阴影</h2>
    <h3>文字阴影</h3>
    <h4>文字阴影</h4>
    <h5>文字阴影</h5>
    <h6>文字阴影</h6>
</body>
</html>

预览效果：

十二、滚动条

IE下的滚动条样式
IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。

这些样式规则很简单：

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。

webkit的自定义滚动条样式
yes，这里才是今天要重点介绍的。

从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。

不过，webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素：

::-webkit-scrollbar /*滚动条整体部分*/
::-webkit-scrollbar-button /*滚动条两端的按钮*/
::-webkit-scrollbar-track /*外层轨道*/
::-webkit-scrollbar-track-piece /*内层轨道，滚动条中间部分（除去）*/
::-webkit-scrollbar-thumb /*（拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）*/
::-webkit-scrollbar-corner /*边角*/
::-webkit-resizer/* 定义右下角拖动块的样式*/

通过这些伪元素，可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

:horizontal – horizontal伪类应用于水平方向的滚动条

:vertical – vertical伪类应用于竖直方向的滚动条

:decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)

:increment – increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)

:start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end – 类似于start伪类，标识对象是否放到滑块的后面。

:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button – 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button – 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present – 用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive – 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

值得一提的是，webkit的这个伪类和伪元素的实现很强大，虽然类目有些多，但是我们可以把滚动条当成一个页面元素来定义，也差不多可以用上一些高级的CSS3属性，比如渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发挥了。

posted @ 2011-01-13 17:17 人在旅途 Views(4375) Comments(0) 收藏举报

刷新页面返回顶部

人在旅途

生活,就是这一年接着下一年,在辞旧迎新的时刻,让我们回首过去，曾经感动过的那些人，那些事…

webkit+css3

公告