11項CSS3支援的新功能

文章來源:

11 Classic CSS Techniques Made Simple with CSS3

Css3引入了11個新的功能,
包括以往用複雜作法才能做出來的圓角效果
文字陰影, box-shadow,  還有引入@font:face,
以後要有特殊的文字效果不需要再貼圖,
直接使用@fon't:face也能達到同等Fancy的效果喔


不過目前只有少數瀏覽器有支援Css3, 其中以mac的safari有最完善的支援
這篇文章提及了11種效果以往傳統的作法 以及css3新的寫法

以下僅引用css3的作法
詳細介紹可前往連結參考


-----Css3--------------------------
1. Rounded Corners(圓角)
 .box {   border-radius: 10px; 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px;  } 

2.Box Shadow 區塊陰影
 .box {   box-shadow: 5px 5px 2px black; 
 -moz-box-shadow: 5px 5px 2px black; 
 -webkit-box-shadow: 5px 5px 2px black;  } 

3.Text Shadow 字型陰影
.font {  font-size: 20px;  color: #2178d9;  } 
.font {  text-shadow: 0 1px 0 #000;  } 

4. Fancy Font  字型支援
先宣告字型 , 以及目標位置,  在進行引用
 @font-face {  font-family: 'Loyal';   src: url('loyal.ttf');  } 
 .font {   font-family: Loyal;  font-size: 20px;   } 

5. Opacity 透明度
傳統作法vs css3做法
 .box {  opacity: .6; // all modern browsers (this is CSS3) 
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8 
 filter: alpha(opacity=60); // IE 5-7  } 


6. RGBA  (rgb+透明屬性值)
rgb是色彩值, a是alpha的縮寫

 .box {  background: url(rgba.php?r=239&g=182&b=29&a=.25);   } 


 7. Background Size (背景圖片大小)
  .box { 
 background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat; 
 -webkit-background-size: 50%; /* Safari */ 
 -o-background-size: 50%; /* Opera */ 
 -khtml-background-size: 50%; /* Konqueror */ 
 } 

 8. Multiple Backgrounds(多層背景重疊)
 .box {   width: 200px;  height: 150px; 
 background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;   } 


 9.Columns(欄位)
.columns {  -moz-column-count: 2;   -webkit-column-count: 2;  } 

  
10. Border Image (邊界影像) 
 .box {   border-width: 20px; 
 -webkit-border-image: url(images/border.png) 27 round; 
 -moz-border-image: url(images/border.png) 27 round; 
 border-image: url(images/border.png) 27 round;  } 


 11. Animations(動畫效果)
  .box {  position: relative;  -webkit-transition: top 300ms linear;  } 
  .box:hover {   top: 20px;  }