任鸟飞网站设计博客 - 关注网站网页设计、网站博客推广优化及赚钱 » CSS3

如何设置 WebKit 浏览器滚动条属性

任鸟飞 — Mon, 06 Feb 2012 11:32:00 +0000

为了增加页面的视觉效果，基于WebKit的浏览器可以通过定义伪类 ::-webkit-scrollbar 属性来设置滚动条的属性（大小，颜色，位置，背景等）。注：请使用Chrome浏览器来体验滚动条效果，不支持IE Opera Firefox。

设置 WebKit 浏览器滚动条属性的7条 CSS 伪类：

::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

11种滚动条类型

:horizontal（水平方向）和:vertical（垂直方向）使用的最频繁，其他很少使用。

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

滚动条设置示例：

CSS代码：

/* For the “inset” look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}

/* Let’s get this party started */
::-webkit-scrollbar {
width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}

HTML5 Reset HTML+CSS 模板及 WordPress 主题下载

任鸟飞 — Fri, 16 Dec 2011 04:37:48 +0000

国内采用 HTML5 编写网页的还比较少，但在国外 HTML5 已非常流行，与 HTML5 配套的一些代码工具及HMTL框架也很多，其中一款就是 HTML5 Reset， HTML5 Reset 已提前将常用 HTML5 标签及 CSS3 样式写好，我们只需要在这个框架上进行编写代码即可。

HTML5 Reset 官方网站：http://html5reset.org

官方下载链接

HTML5 HTML+CSS代码官方下载：https://github.com/murtaugh/HTML5-Reset
HTML5 WordPress 主题官方下载链接：https://github.com/murtaugh/HTML5-Reset-Wordpress-Theme

本地下载链接：

超酷破旧背景材质风格HTML5网站模板源文件下载

任鸟飞 — Thu, 08 Dec 2011 11:13:13 +0000

整个网站背景采用破旧效果的材质风格，并且源码采用最新的HTML5和CSS3编写，非常适合个人博主使用。

HTML5模板预览

下载HTML5网站模板PSD文件 (155MB)
下载HTML5网站模板文件 (1,94MB)

WordPress 主题增加 CSS3 Media Queries 代码

任鸟飞 — Thu, 27 Oct 2011 06:19:21 +0000

昨天抽时间在 style.css 中增加了 CSS3 Media Queries代码，并且修正了此主题在IE6中的bug（HTML5）问题，目前此主题在IE6中浏览效果良好。

当页面宽度小于640px时，页面样式如下：

默认页面宽度是980px，当页面宽度小于640px时，页面布局会自动切换到手机浏览模式（宽度320px），能够很好的适应手机屏幕。

CSS3 Media Queries 代码编写示例：

/* media queries mobile */
@media screen and (max-width: 640px) {
/* 在这里重新定义手机页面的布局样式 */
}

为让IE浏览器支持HTML5和CSS3，需增加下面的代码

新 WordPress 主题（HTML5+CSS3）

任鸟飞 — Tue, 25 Oct 2011 10:35:15 +0000

我发现我这人喜新厌旧太厉害了，每款主题用不了2个月必修的更换或调整一下，昨天心血来潮，重新做了一款新主题，使用 HTML5 和 CSS3 编写，只好对不起那些使用IE8版本以下的用户了。

目前利用手机上网的用户越来越多，由于分辨率不同，会影响网页的布局，而利用HTML5和CSS3，则可以编写自动适应屏幕大小的网页。

查看本主题的HTML源代码可以发现下面的代码：

而查看本主题对应的CSS代码则会发现下面的代码：

/* media queries ipad */
 @media (min-width: 481px) and (max-width: 768px) {}

/* media queries mobile */
@media (max-width: 480px){}

当屏幕宽度小于480px时，网页布局会自动调用480px对应的CSS代码，这就是特意为手机设置的CSS代码。

HTML5和CSS3相当强大啊，还得慢慢研究一下。

利用CSS3的transition属性制作可伸缩的输入框

任鸟飞 — Wed, 13 Jul 2011 10:31:19 +0000

今天在给家乡美 jiaxiangmei.org 安装 WordPress 时，看了一下其自带的主题 Twenty Eleven，感觉此主题相当炫啊，采用HTML5和CSS3制作，有很多代码值得我们自己研究一下，今天先看一下其搜索框代码，此搜索框在活得输入焦点时，能够自动伸长，效果很好。

利用CSS3的transition属性制作可伸缩的输入框预览

查看其HTML 和 CSS代码后发现，主要是利用 CSS3 的 transition 属性，其CSS代码摘录如下：

对 transition 有兴趣的朋友不妨也看看利用 CSS3 的 transition 属性制作过渡效果的导航栏

CSS3 内阴影（inset）代码

任鸟飞 — Sat, 09 Apr 2011 16:55:44 +0000

缺省情况下，使用CSS3 的 Box Shadow 属性生成的阴影效果是外阴影，如果想要生成内阴影效果，只需在代码中添加 inset 属性即可。

CSS3 内阴影（inset）代码:

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

CSS3 box-shadow 代码说明

inset 0 0 10px #000000含义如下
1. inset：内投影
2. 水平方向偏移量
3. 垂直方向偏移量
4. 模糊半径值

CSS3 内阴影（inset）实例:

CSS3 阴影效果实例

CSS3 Multiple Columns 属性使用详解

任鸟飞 — Fri, 17 Sep 2010 15:36:37 +0000

CSS3新增 Multiple Columns 属性，翻译成中文就是多列的意思，利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局方法。

Multiple Columns 有两种设置方法：

CSS 3 Multiple Columns (Width)：采用列宽来控制
CSS 3 Multiple columns (Count)：采用列数来控制

CSS 3 Multiple Columns (Width) 使用示例及方法：

示例：

任鸟飞网页设计博客，是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客，作者任鸟飞。

为了能提供更多的高质量的原创技术类文章，任鸟飞网页设计博客于2010年7月份开通了任鸟飞网页设计博客联盟模块，此模块主要用于发表任鸟飞网页设计博客联盟成员的博客文章。

如果你不经意间走到这里，那是我们的荣幸，但我们更期待你能在这里驻足，希望你能在安营扎寨。我们真诚的希望你能成为任鸟飞网页设计博客联盟的成员。如果你也乐意加入任鸟飞网页设计博客联盟，请发邮件到 www.renniaofei.com@gmail.com 或直接在下面留言。

CSS代码：

#CSS3_Multiple_Columns_widht {
//Firefox 浏览器设置方法
-moz-column-width: 200px;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-width: 200px;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-width: 200px; //列宽设置
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

CSS 3 Multiple Columns (Count) 使用方法：

示例：

任鸟飞网页设计博客，是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客，作者任鸟飞。

CSS代码：

#CSS3_Multiple_Columns_count {
//Firefox 浏览器设置方法
-moz-column-count: 2;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-count: 2; // 分成的列数
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

怎么样？效果很酷吧，赶快试一下吧！

CSS3 transform 属性使用详解

任鸟飞 — Tue, 14 Sep 2010 15:48:54 +0000

transform 本意是变换、改变的意思，在CSS3中transform包括三种含义，分别是rotate（旋转）、skew（扭曲）、scale（缩放）。

1. CSS3 transform – rotate（旋转）

.transform–rotate {
  -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);}

2. CSS3 transform – skew（扭曲）

.transform–skew{
  -moz-transform: skew(-25deg);
  -webkit-transform: skew(-25deg);}

3. CSS3 transform – scale（缩放）

.transform–scale {
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);}

初始图片：

兼容性

兼容：Chrome、Firefox、Opera等。
不兼容：IE8以下版本

由于IE8以下版本不支持CSS3，要想实现上述的transform（转换）效果，须使用IE滤镜，代码如下：

rotation取值[0,1,2,3]，依次代表旋转 [0deg,90deg,180deg,270deg]，有关BasicImage滤镜的说明请参考 BasicImage filter。

边框和线条美工设计的5个技巧

任鸟飞 — Sat, 31 Jul 2010 12:55:04 +0000

网页设计越来越注重前端设计，特别是网页美工，我觉得像我这种美工功底比较差的站长和博主不再少数，所以特意搜集整理了一些边框和线条设计的技巧和示例。

1. 边框圆角

直角看时间长了容易产生审美疲劳，可以试试边框圆角，可以直接使用 CSS3 的 Border Radius 属性制作边框圆角。

2. 不规则多边形和折线

3. 边框阴影

增加阴影能产生层次感，可以使用 CSS3 的 Box Shadow 属性制作边框阴影效果。

4. Beveled

增加立体感

5. 分割线

这才是真的分割线，看起来就像是被刀片划了一道一样。

总结：美工设计是考验耐力的事情，像我种搞编程的人来说，实在是种折磨，但这从另一个方面也反映出自己的懒惰，就算是美工基础不是好，但是只要耐住性子也能设计出优秀的作品。

您可能也喜欢：
利用CSS设置透明效果-兼容所有浏览器	如何设置百度搜索结果显示更多条数	解决Chrome最小字体限制	HTML5 新增标签响应事件浏览器支持一览表	如何编写兼容多浏览器的CSS代码
来自无觅网络的相关文章：
CSS屏蔽Webkit浏览器input高亮和textarea缩放 (@tcreator)	艾瑞调查，手机QQ浏览器成最常使用手机浏览器，但用户更多用UC浏览器访问手机网页？ (@internet2share)	35个横向滚动的网站欣赏 (@sudasuta)	MobiUS：全球第一款HTML5移动浏览器？ (@internet2share)	百度推出Windows Phone 7手机浏览器 (@internet2share)
无觅

您可能也喜欢：
利用Html5和CSS3制作网站模板	Html5 模板	任鸟飞首款免费WordPress主题 — HTML和CSS源文件	使用HTML5和CSS3制作的网站模板下载	HTML 5 和标签
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	15个免费的HTML5和CSS模板 (@shejidaren)	HTML5和CSS3进阶教程 (@shejidaren)	一个页面的HTML5网站模板+PSD (@shejidaren)	20多个新HTML5网站设计欣赏 (@shejidaren)
无觅

您可能也喜欢：
Html5 模板	利用Html5和CSS3制作网站模板	使用HTML5和CSS3制作的网站模板下载	HTML5新增元素标记	HTML 5 和标签
来自无觅网络的相关文章：
一个页面的HTML5网站模板+PSD (@shejidaren)	15个免费的HTML5和CSS模板 (@shejidaren)	70多个HTML5网站设计欣赏 (@shejidaren)	30个带给你灵感的网站设计 (@shejidaren)	20个新CSS3设计效果欣赏 (@shejidaren)
无觅

您可能也喜欢：
超强 CSS3 代码生成器	CSS3 内阴影（inset）代码	任鸟飞首款免费WordPress主题 — HTML和CSS源文件	新 WordPress 主题（HTML5+CSS3）	利用CSS3制作淡入淡出动画效果
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	[WordPress主题]Proyecto-适合商业及图片类 (@citydog)	21个值得一看的CSS3教程 (@shejidaren)	10个详细的CSS3表单制作教程 (@shejidaren)	分享11个提供精品wordpress主题下载的网站 (@shejidaren)
无觅

您可能也喜欢：
利用Html5和CSS3制作网站模板	任鸟飞首款免费WordPress主题 — HTML和CSS源文件	使用HTML5和CSS3制作的网站模板下载	CSS3 内阴影（inset）代码	HTML5 Reset HTML+CSS 模板及 WordPress 主题下载
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	HTML5和CSS3进阶教程 (@shejidaren)	[WordPress主题]Proyecto-适合商业及图片类 (@citydog)	20多个新HTML5网站设计欣赏 (@shejidaren)	15个免费的HTML5和CSS模板 (@shejidaren)
无觅

您可能也喜欢：
超强 CSS3 代码生成器	8款 CSS3 代码生成器工具	CSS3 到底有多强大？	CSS3 背景颜色渐变属性 gradient 使用详解及代码生成工具	利用 CSS3 的 transition 属性制作过渡效果的导航栏
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	21个值得一看的CSS3教程 (@shejidaren)	实用CSS3属性之 :target伪类实现Tab切换效果 (@shejidaren)	HTML5和CSS3进阶教程 (@shejidaren)	10个详细的CSS3表单制作教程 (@shejidaren)
无觅

您可能也喜欢：
CSS3 transform 属性使用详解	常用的CSS3新增属性	CSS3 到底有多强大？	CSS3 Multiple Columns 属性使用详解	8款 CSS3 代码生成器工具
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	21个值得一看的CSS3教程 (@shejidaren)	10个详细的CSS3表单制作教程 (@shejidaren)	实用CSS3属性之 :target伪类实现Tab切换效果 (@shejidaren)	HTML5和CSS3进阶教程 (@shejidaren)
无觅

您可能也喜欢：
CSS3新增特性Multiple backgrounds（多层背景）使用方法	如何利用CSS来自动调整布局元素的宽度	常用的CSS3新增属性	利用CSS3制作发光渐变动画按钮	CSS Float页面布局属性详解
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	21个值得一看的CSS3教程 (@shejidaren)	实用CSS3属性之 :target伪类实现Tab切换效果 (@shejidaren)	10个详细的CSS3表单制作教程 (@shejidaren)	CSS网页布局的常用规范 (@admpub)
无觅

您可能也喜欢：
在CSS3与Photoshop对比中学习（Text Shadow）字符阴影	利用CSS3制作无背景图片特效按钮	利用CSS3制作发光渐变动画按钮	利用CSS设置透明效果-兼容所有浏览器	利用CSS来制作图像半透明特效
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	CSS使用技巧收集，包含CSS2/CSS3 (@shejidaren)	36个免费的CSS网页模版下载 (@sudasuta)	网页设计灵感 6个社区网站欣赏 (@sudasuta)	35个css布局的非常漂亮的网页设计 (@sudasuta)
无觅