稍微旋轉一下標志，使之不再與條幅的直邊平行。 Download css3banner/style.css#badge{ -moz-transform: rotate(-7.5deg); -o-transform: rotate(-7.5deg); -webkit-transform: rotate(-7.5deg) -ms-transform: rotate(-7. 5deg) ; transform: rotate(-7.5deg);}8.2實例18:使用陰影、漸變和變換●117 使用CSS3進行旋轉非常簡單。我們只需要提供旋轉的角度，頁面就會自動渲染了。被旋轉元素中的所有元素都會跟著一塊旋轉。 實現旋轉與實現圓角一樣簡單，但是不要濫用它。界面設計的目標是使用戶界面更加便于使用。如果旋轉了包含很多內容的元素，一定要確保用戶閱讀內容的時候不用朝一個方向太過扭頭。8.2.5調節背景的透明度 在文本后面加入半透明層來調節透明度的方法比較典型，很早前平面設計師就開始使用了。這種方法通常需要在Photoshop中創建一幅完整的圖片或者使用CSS在另一個元素的上面放置一個透明的PNG層。CSS3通過一種新的語法提供了對背景色透陰度的支持。 初次接觸Web開發時，大家都學習過使用十六進制顏色碼定義顏色，用兩個數字對來表示紅色、綠色和藍色。00就是都關閉，即沒有，FF就是都開啟。因此紅色就是FFOOOO，也可以理解為紅色開啟、藍色和綠色關閉。 CSS3引入了rgb和rgba函數。rgb函數與十六進制表示法類似，但使用0～255的數字來表示每種顏色。可以定義紅色為rgb (255，0，0)。 rgba函數與rgb -樣，只不過多了一個參數來定義不透明度(0～1)。如果取值為0，就什么顏色也看不到，因為是完全透明的。如果想得到半透明的白色區域，可以加入如下樣式： Download css3banner/sfyle.css #info{ background-color: rgba(255,255 ,255 ,0.95); ) 有時用戶顯示器的對比度設置會影響上述透明度的效果，因此必須在多種顯示設置情況下試驗，才能保證得到一致的顯示效果。 讓我們將橫幅廣告的info區域圓角化：118◆第8章柔化視覺體驗Download css3banner/style.css#info{ moz-border-radius: 12px; webkit-border-radius: 12px o-border-radius: 12px; border-radius: 12px; 應用上述樣式后，條幅在Safari. Firefox和Chrome下都能顯示得非常漂亮了。接下來讓我們完成在Internet Explorer中的樣式設置。8.2.6 回退 本節中濟南網頁設計公司使用的技術，在IE9中是有效的，但是在IE6. IE7和IE8中都有一些問題！需要使用微軟的DirectX過濾器來解決。這意味著我們需要依賴于條件聲明加載一個只針對IE瀏覽器的樣式表。我們還需要使用JavaScript創建一個section元素，然后使用CSS來渲染它，因為這些版本的IE不能原生識別該元素。Download css3banner/index.htm<!--[if lte IE 8]><script>document.createElement( "sect/on") ;</script><link rel="stylesheet" href="ie.css" type="text/css" media="screen"> < ! [endif] --></head><body> <div id="conference"> <section id="badge"> <h3>H1, My Name Is<]h3><h2>Barney</h2></section> <section id="info"></section></div></body></html> DirectX迂濾器在IE6. IE7.和IE8中都能工作，但是在IE8中的觸發方式不同。因此，需要對每個觸發器定義兩遍。下面我們來看下如何旋轉元素。8.2.7旋轉8.2實例18:使用陰影、漸變和變換●119 我們可以使用這些過濾器來旋轉元素，但是沒有僅僅定義旋轉角度那么簡單。為了達到我們想要的效果，需要使用Matrix過濾器，并指定我們需要角度的正弦余弦。具體來講，要給函數傳遞參數余弦、正弦的相反數、正弦和余弦（與第一個參數相同），如下所示：。Download css3banner/filters.cssfilter: progid:DXImageTransform.Microsoft.Mat rix( sizingMethod='auto expandl,M11=0.9914448613738104,M12=0.13052619222005157,M21=-0.13052619222005157,M22=0.9914448613738104 ); -ms-filter:¨progid:DXImageTransform.Microsoft.Mat rix( sizingMethod=’auto expand’， M11=0.9914448613738104, M12=0.13052619222005157, M21=-0.13052619222005157, M22=0.9914448613738104 )”； 太復雜了？是的，尤其是與前面的例子相比時。別忘了，我們前面希望的轉動角度是-7.5度。因此，本例中負角的正弦為負數，而我們需要一個正數。 數學是挺難懂的，讓我們接著實現漸變吧。81218漸變 IE瀏覽器的漸變過濾器與其他瀏覽器中的類似，只是我們需要加入較多的代碼。提供起點顏色和終點顏色，就可以實現漸變了： Download css3banner/filters,css filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=#FFFFFF, endColorStr=#EFEFEF )； -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#FFFFFF, endColorStr=#EFEFEF )¨； 與其他瀏覽器不同，這里我們把漸變直接應用在元素上，而不是應用在background-image屬性上。①使用2×2矩陣進行線性變換。 夢之網科技 http://www.aecov.cn