现在的位置:首页>网站SEO>正文

使用css3自定义滚动条样式和CSS模糊背景效果代码

2014年08月28日 ⁄ 共 1419字 评论 6 条

css3自定义滚动条样式,在福利老幺看来,意义不是很大,毕竟很多时候,我们都习惯了鼠标来操作,但对于一些有特殊要求的站点,还是会保留滚动条的。至于CSS模糊背景,福利老幺也正在考虑添加这个效果。当然,具体位置的话目前正在思考中。

我们在互联网上都是使用web浏览器来浏览。你们中的大多数(更具体地说,根据我的分析65%)使用Chrome和Safari浏览网站。这两个浏览器有一些共同点:他们都是建立在WebKit平台,或者换句话说,他们是WebKit浏览器。尽管谷歌和苹果有了一些相当不错的UI元素,但有些人认为,还有更多开发的空间。

使用css3自定义滚动条样式

你知道吗,你可以DIY一个滚动条的样式。假设你已经建立了一个伟大的网站,但你想让它更美观。改变滚动条的方式是可以改善布局的步骤之一。
自定义滚动条是很容易的,是基于一个纯CSS解决方案,但是有一个问题:自定义滚动条只适用于WebKit浏览器。但是,覆盖超过60%的浏览器市场无疑是一个伟大的成就。
我建立了一个简单的例子,解释了你可以改变滚动条看起来他们方式但在代码之前,这里有我的常规浏览器滚动条之间的差异,我免费送给你:

css3自定义滚动条样式

CSS代码如下:

::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-button {
width: 8px;
height:5px;
}
::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}

我所做的只是一个基本示例,仅基于CSS背景颜色和其他一些CSS属性,但是您可以修改滚动条从底部的托盘或按钮的默认图片替换为一些新的,当然,应该使用CSS和可爱的背景属性。

CSS模糊背景效果代码

有一部分的网站文字没有背景颜色,加了背景图片又喧宾夺主了,那怎么办呢,我们可以用强大的css实现指定部分的背景是模糊的,那样就既不影响美观,也不影响浏览啦。
纯CSS特效,IE下无效,建议用firfox或者chrome浏览器!

* { margin: 0; padding: 0; }
body { font: 15px Cambria, Serif;
background: url(images/bg-solid.jpg) no-repeat; }

h1 { font: 36px Georgia, Serif; }

#page-wrap { width: 500px; margin: 40px auto;
background: url(images/bg-blurry.jpg) no-repeat fixed;
border: 10px solid white; padding: 30px;
min-height: 600px;
-moz-border-radius: 30px; -webkit-border-radius: 30px; }

调用代码:

<div id="page-wrap">模糊的内容</div>

以上内容来源自尼玛博客的投稿,由福利老幺整理发布。

评论 6 条 评论内容很精采,有内幕,而且绝对有干货

  1. 圆月博客 2014年08月28日 13:08  @回复  Δ-49楼 回复

    不错,学习了

  2. 福利屋 2014年08月28日 20:49  @回复  Δ-48楼 回复

    那个滚动条的确挺棒的

  3. 吴尼玛 2014年08月28日 22:34  @回复  Δ-47楼 回复

    投稿

  4. 猫客工作室 2014年08月29日 00:50  @回复  Δ-46楼 回复

    不错不错 这些有点意思 只是现在用不上

  5. 李明 2014年08月30日 21:13  @回复  Δ-45楼 回复

    滚动条真的不错,谢谢分享!

  6. 健康减肥博客 2014年08月30日 22:43  @回复  Δ-44楼 回复

    挺不错的,支持一下,以后会经常关注该博客,同时欢迎回访!

给我留言