'css3' 标签

非常实用的单页网站布局jQuery插件

现在越来越流行使用Html5和CSS3来建设单页网站,这是网页设计的New Wave!就连谷歌也刚推出了HTML5网页设计工具Google Web Designer,用于设计HTML5互动广告和其它Web内容。下面这些单页网站布局jQuery插件都是开源的,就是可以免费使用的。

SMINT

  1. jQuery Scroll Path
  2. Ascensor.js
  3. jQuery Waypoints
  4. Cool Kitten
  5. Curtain.js
  6. SMINT
  7. Skrollr
  8. Single Page Nav
  9. jQuery One Page Nav
  10. jQuery Parallax
  11. Single.js
  12. Scrollrama
  13. JustaPage
  14. jQuery.SnapScroll
  15. jQuery. ScrollTo
  16. How to Scroll to internal link with jQuery
  17. Building Single Page Applications
  18. Coding a CSS HTML5 One Page Website

Via:Open Source jQuery Plugins for Building Single-Page Website Layouts

9个常用特色的 CSS 属性

1. 圆角

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

想充分了解IE浏览器对CSS3属性支持情况,请看这篇文章 http://smashinghub.com/rounded-corners-with-css3.htm。

2. 阴影效果

通过CSS3的box-shadow属性可以非常方便地实现阴影效果。所有主流的浏览器都支持这个属性,其中Safari浏览器支持加前缀的-webkit-box-shadow属性。

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

也可以用JavaScript来实现阴影效果,如下:

object.style.boxShadow="20px 10px 7px #ccc"

3. @media属性

Media属性用于设置同一样式表在不同屏幕下的样式,可以在属性值中指定应用此样式的介质或媒体。

@media screen and (max-width: 480px){
/* 网页在宽度为480px屏幕上的显示样式 */
}

开发者也可以使用@media print属性指定打印预览的样式:

@media print
{
p.content { color: #ccc }
}

4. 渐变填充

CSS3的Gradient(渐变)属性给了开发者另一个惊人的体验。Gradient还未得到全部浏览器的支持,所以不能完全依赖Gradient来设置布局。

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));