10个实用的CSS3技巧

发布于 大漠

CSS3的运用是越来越成熟了,在QQ群时常能看到朋友讨论这方面的技术,我也学习CSS3的相关技术也有一年之久了,收获也不少。在我的blog中也收集了不少这方面的教程。为了更方便的与大家分享,我今天特意将本站的有关于CSS3的运用罗列一下,并列出10个常用的相关属性,最后在以一个实例来与大家再次学习相关的CSS3的应用,希望大家能喜欢。

CSS3相关属性:

  1. CSS3基本选择器
  2. CSS3属性选择器
  3. CSS3伪类选择器
  4. CSS3渐变——Gradient
  5. CSS3颜色——RGBA
  6. CSS3透明——Opacity
  7. CSS3圆角——border-radius
  8. CSS3文字阴影——text-shadow
  9. CSS3盒子阴影——box-shadow
  10. CSS3变形——transform
  11. CSS3动画——transition
  12. CSS3动画——animation
  13. CSS3边框色——border-color
  14. CSS3图像边框——border-image
  15. CSS3截取文本——text-overflow
  16. CSS3 word-wrap和CSS3 white-space
  17. CSS3盒模型——box-sizing
  18. CSS3本地字体——@font-face
  19. CSS3背景尺寸——background-size
  20. CSS3背景裁剪——background-clip
  21. CSS3多背景——Multiple backgrounds
  22. CSS3媒体——Media Queries
  23. CSS3多列——multi-columns

上面列出的主要是我学习了的CSS3相关属性(这些是根据老版本的css3手册学习下来的清单),当然还有很多相关方面的属性介绍,大家可以看看这里(要翻哟^-^)。那么今天我主要是想给大家从上面的列表中推荐大家10个有必要撑握的CSS3属性技巧,以帮助大家在平时的制作是搞高自己的技能,下面我们就开始吧。

1、border-radius

圆角效果可以说现在到处可见,应用也是相当的广,但不知道您还是停留在使用图片制作圆角上呢?也开始使用了CSS3来制作圆角。如果你还没有使用过CSS3制作圆角的话,也不用紧,因为我第一个要向大家推荐的就是使用CSS3 border-radius制作圆角。

上图显示的是border-radius的语法写法,但值得庆幸的是在safari,chrome,ff新版本浏览器中不需要加他们的专有属性中,不过你要兼容老版本的浏览器还是加上为好。大家或许只认为border-radius能帮我们实现圆角效果,其实他还能帮我们制作出一些别的图形效果,比如说半圆,圆之类的,如下面的代码:

		.circles {
			-moz-border-radius: 50px;  
			-webkit-border-radius: 50px;  
			border-radius: 50px; /* hiehgt/2 or width/2 */
			width: 100px;
			height: 100px;
		}
	

正如上图所示,为了让文本在圆的正中间,此时我们可以借助CSS3中的CSS 3 Flexible Box来实现:

		.cricles {
			-moz-border-radius: 50px;  
			-webkit-border-radius: 50px;  
			border-radius: 50px; /* hiehgt/2 or width/2 */
			width: 100px;
			height: 100px;
			display: -moz-box;  
			display: -webkit-box;  
			display: box;        
			-moz-box-orient: horizontal; /* the default, so not really necessary here */  
			-webkit-box-orient: horizontal;  
			box-orient: horizontal;        
			-moz-box-pack: center;  
			-moz-box-align: center;        
			-webkit-box-pack: center;  
			-webkit-box-align: center;        
			box-pack: center;  
			box-align: center;  
		}
	

兼容IE6-8的处理:

  1. CSS3 PIE
  2. IE-css3
  3. jQuery corner

不过我个人认为,如果你要兼容IE6-8,可以考虑在IE下使用圆角图片处理。

2、box-shadow

第二个要推荐的是CSS3的box-shadow。这个属性只要是用来制作盒子的阴影。

box-shadow具有六个参数:阴影类型、水平阴影偏移量、垂直阴影偏移量、阴影模糊半径、阴影扩展半径,阴影颜色。不过值得一提的是大部分人使用box-shadow属性时,都会将其认为只有五个参数,因为把他的另一个参数“阴影扩展半径”给忘了。前面我在《Box-shadow常被遗忘的一个参数——“spread”》着重介绍过这个参数,希望大家在以后运用中不要犯这样的错误。

使用box-shadow我们只能制作一些简单的阴影效果,有时往往达不到我们需要的设计要求。那怎么办呢?大家不用急,我们使用box-shadow,然后配合“:after”和“:before”可以制作出一些特殊的阴影效果:

有关于详细的介绍可以点击这里

兼容IE6-8处理

  1. 滤镜处理
  2. CSS3 PIE
  3. IE-css3

3、text-shadow

接下来要给大家推荐的是文字阴影的属性text-shadow。这个属性主要是用来给文字制作阴影效果:

这个属性和box-shadow极其相似,不过text-shadow只具有四个参数:“x-offset”、“y-offset”、“blur”和“阴影颜色”。配合不同的参数,我们可以制作出不同的效果,我们一起来看一个描边效果:

		h1 {  
			text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;  
			color: white;  
}  }
	

上例使用的是text-shadow模仿的描边效果,不过在"webkit"内核下,具有一个“text-stroke”属性,能直接写出描边效果:

		h1 {  
			-webkit-text-stroke: 3px black;  
      color: white;  
    }  
	

至于其他的文字阴影效果,如果您感兴趣的话可以点击这里,了解更多的不同效果制作方法。

4、Multiple Backgrounds

多背景的应用,记得以前使用多个背景的话需要增加div。但是有了CSS3的Multiple Backgrounds后,就不需要增加那些没有意义的标签了。

如果你想向后兼容浏览器,你不仿在你的代码中这样去使用:

		.box {  
    /* fallback */  
    background: url(image/path.jpg) no-repeat;  
    /* modern browsers */  
    background: url(image/path.jpg) 0 0 no-repeat,  
     url(image2/path.jpg) 100% 0 no-repeat;  
    }  
	

5、background-size

背景尺寸不用说,从字面上大家都知道是用来控制背景图片尺寸的大小。随着显屏的越来越大,有时候为了让背景图片适合各种显屏大小,给我们带来了些许挑战性。大家不仿尝试使用background-size来解决:

		body {  
		 background: url(path/to/image.jpg) no-repeat;  
		 -moz-background-size: 100% 100%;  
		 -o-background-size: 100% 100%;  
		 -webkit-background-size: 100% 100%;  
		 background-size: 100% 100%;  
		} 
	

前几天刚好在《纯CSS3制作满屏图像幻灯片》案例中使用了这个属性,大家也可以尝试使用一下这个属性。当然为了让背景图片适合更种显屏显示,除了这个background-size以外,我们还有别的办法可以处理——《完美的页面背景图片制作》,只不过是没有这个属性来得方便。

6、text-overflow

text-overflow主要功能是用来截取文本长度,用(...)来代替截掉的文本,原本这个效果以前主要靠js和程序来完成,那么现在我们可以直接使用CSS3来实现:

7、Gradient

CSS3的渐变用来制作渐变色的背景是相当的强大了,而且也方便:

这个属性使用起来有一定的难度性,不过借助相关的图形软件工具,那还是不错的。当然大家要用好这个属性,除了需要了解他的使用方法外,还要具有一定的美工工底,不然制作出来的效果就会相当的生硬。大家可以试试自己是否具有这方面的功力。

8、Flexible Box Model

Flexible box model的出现给我们布局带来了很大的弹性,我们可以摆脱“float”属性,达到我们需要的布局效果。这个属性我也没有实践过,那么今天来动手一试:

HTML Markup

    <div id="container">
     <div id="main"> Main content here </div>
     <aside> Aside content here </aside>
    </div>
	

下面我们来看看其样式的应用

		    #container {  
       width: 960px;  
       height: 500px; /* just for demo */  
      
       background: #e3e3e3;  
       margin: auto;  
      
       display: -moz-box;  
       display: -webkit-box;  
       display: box;  
			 }
	

我们在“div#container”元素定一个box尺寸,但最关键的是我们需要让他以“box”模式来显式,为了更能的看到他的变化,接下来在#main和aside上定义一个不同的颜色:

		#main {  
       background: yellow;  
    }     
      
    aside {  
       background: red;  
    }  
	

一起来看一下初步效果:

初步看上去没多大的区别一样,如果你仔细对比后你就不难发现,在“#container”容器上设置“display:box”后,其子元素的高度会和父元素高度相同,那是因为此时其“box-align:stretch”起到的效果。

接下来,改变一下#main的宽度

		#main {  
      background: yellow;  
      width: 800px;  
    }  
	

看看效果变化:

从上图上我们可以看出,效果还不是很完美,还留有一定的空间,接下来使用“box-flex”来让aside元素占有所有空余的空间:

		    aside {  
       display: block; /* cause is HTML5 element */  
       background: red;  
      
      /* take up all available space */  
       -moz-box-flex: 1;  
       -webkit-box-flex: 1;  
       box-flex: 1;  
    }  
	

现在看来效果就完美了,大家一定会觉得这个很强大吧。同时也不清楚是为什么吧?说实在的我不也懂是为什么?那要是你想知道为什么?不仿仔细阅读一下下面的内容,或者关注本站后面的相关更新。

Flexible Box Model的扩展阅读:

  1. Quick hits with the Flexible Box Model
  2. The CSS 3 Flexible Box Model
  3. CSS3 flexible box layout explained
  4. CSS 3 Flexible Box Model and Enyo Flex Layout
  5. CSS3 Flexbox
  6. Introducing the Flexible Box Layout module
  7. CSS3 Flexible Box Model
  8. CSS3: Flexible Box Model
  9. The CSS3 Flexible Box model explained
  10. CSS3 Flexible Box Layout Module (aka Flex Box) introduction and demos/test cases

9、resize

resize主要是运用在textarea元素上的,而且只有Firefox、safari和Chrome上。用来控制textarea元素的缩放效果

		<textarea name="elem" id="elem" rows="5" cols="50"></textarea>  
	

使用的CSS样式:

		textarea {  
      -moz-resize: vertical;  
      -webkit-resize: vertical;  
      resize: vertical;  
    }  
	

resize可取的值有:

  1. both:水平和垂直两个方向可以缩放
  2. horizontal:只有水平方向可以缩放
  3. vertical:只有垂直方向可以缩放
  4. none:禁止缩放

10、transition

最后要给大家推荐的是有关于CSS制作动画效果的属性“transition”,借助这个属性中,我们无需使用任何js代码,都可以实现一些简单的动画效果,说得常见的一点,可以让你的部分元素变化效果更生动化,比如说鼠标悬停效果等等:

		ul a {  
       -webkit-transition: padding .4s;  
       -moz-transition: padding .4s;  
       -o-transition: padding .4s;  
       transition: padding .4s;  
    }  
      
    a:hover {  
       padding-left: 6px;  
    }  
	

有关于更详细的介绍可以点击这里

上面十个属性是我今天要给大家推荐的,希望对大家学习CSS3的相关属性有所帮助。下面复制了一个Jeffrey Way用CSS3制作的一个DEMO案例:

1、HTML Markup

		<body>
       <div class="box">
          <div>Hello</div>  
          <div> World </div> 
       </div>  
    </body>
	

上面是这个DEMO的html结构,下面我们来看看如何使用CSS3属性制作上面demo效果。

2、让文本垂直水平居中

接下来是实现文本垂直水平居中,虽然实现这样的效果,在css2中有多种方法(《CSS制作水平垂直居中对齐》),但此例没有使用这些,而是采用了前面的“Flexible Box Model ”属性来实现:

		body, html { height: 100%; width: 100%; }   
    body {  
        display: -moz-box;  
        display: -webkit-box;  
        display: box;  
        -moz-box-orient: horizontal;  
        -webkit-box-orient: horizontal;  
        box-orient: horizontal;  
        -moz-box-pack: center;  
        -moz-box-align: center;  
        -webkit-box-pack: center;  
        -webkit-box-align: center;  
        box-pack: center;  
        box-align: center;  
    }  
	

3、美化box效果

		.box {  
       background: #e3e3e3;  
       border: 1px dashed #666;  
       margin: auto;  
       width: 400px;  
       height: 200px;  
       cursor: pointer;  
       position: relative;  
       -webkit-transition: all 1s;  
       -moz-transition: all 1s;  
       transition: all 1s;  
    }  
	

4、设置阴影效果

这一步采用了box-shadow和:after给box添加了一个阴影效果:

	  .box::after {  
       content: '';  
       position: absolute;  
       width: 70%;  
       height: 10px;  
       bottombottom: 0;  
       left: 15%;  
       z-index: -1;  
       -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);  
       -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);  
       box-shadow: 0 9px 20px rgba(0,0,0,.4);  
		}	 
	

5、美化box下的div

		 .box > div {  
       background: #e3e3e3;  
       position: absolute;  
       width: 100%; height: 100%;  
       top: 0; left: 0;  
       font: 45px/200px bold helvetica, arial, sans-serif;  
       text-align: center;  
       -webkit-transition: all .5s ease-in-out;  
       -moz-transition: all .5s ease-in-out;  
       transition: all .5s ease-in-out;  
    }  
	

6、设置文本的层次关系

		/* Make sure we see the front side first */  
    .box > div:first-child {  
      position: relative;  
      z-index: 2;  
    }  
	

7、旋转文本

		.box:hover {  
			-webkit-transform: rotateY(180deg);  
			-moz-transform: rotateY(180deg);  
			transform: rotateY(180deg);  
		} 
	

8、镜像文本

		 /* Hide the front-side when hovered */  
     .box:hover > div:first-child {  
        opacity: 0;  
     }  
     .box:hover div:last-child {  
        -webkit-transform: rotateY(180deg);  
        -moz-transform: rotateY(180deg);  
        transform: rotateY(180deg);  
     }  
	

到这一步就完成了这个案例的所有过程。

在此篇文章我要说的就是这些了,您喜欢吗?如果你有更好的分享,欢迎随时在下面的评论中给我留言。

如需转载烦请注明:W3CPLUS

UA Air Jordan 1 Pinnacle Pinnacle White, Metallic Gold