天天看點

10 個實驗性的 JS/CSS3 程式設計技術

本文所介紹的程式設計技術,可以有效地改善使用者體驗和設計師的工作流程,替代原先在IE6上使用的舊的解決辦法。需要注意的是,下面列出的大部分技術還在實驗階段,而且有些不是純CSS技術(一些使用jQuery或其它JavaScript庫)。但本文還是非常值得一看。 

讓我告别overflow:hidden的決定性因素是CSS3,具體而言是box-shadow。因為使用overflow:hidden首先 會對box-shadow造成負面影響。當父元素使用overflow:hidden 屬性時,box-shadow會被裁剪。另外,text-shadow和transform也有可能被裁減掉。是以我更傾向于使用clearfix,感覺 這種一體化的東西更靠譜一些。 

10 個實驗性的 JS/CSS3 程式設計技術

随着CSS3越來越接近主流設計的标準,精心設計圓角背景圖檔已經成為過去,這意味着我們将節省在每個浏覽器上花費的時間和精力了。 

10 個實驗性的 JS/CSS3 程式設計技術

這是一個适用于IE的behavior htc檔案,目的是讓所有浏覽器都支援border-radius元素。因為目前除了IE,其他的主流浏覽器均可呈現圓角效果,隻需加入4行CSS代碼。 

10 個實驗性的 JS/CSS3 程式設計技術

可以使IE識别CSS3僞類選擇器,并渲染它們所定義的所有樣式規則。你隻需将這些腳本添加到你的頁面中,就可以在你的樣式表中使用這些選擇器了。 

10 個實驗性的 JS/CSS3 程式設計技術

在本教程中,我們來看看一些前期的和使用CSS3簡化後期的代碼,并通過實作的視覺效果來進行比較。 

10 個實驗性的 JS/CSS3 程式設計技術

漸進增強(Progressive Enhancement)和CSS3都是很好的技術,但CSS3更勝一籌。若将兩者合并使用,就能使設計者建立出簡潔的網站,且比以往更快、更容易。 

10 個實驗性的 JS/CSS3 程式設計技術

凸版效果在網頁設計中十分受歡迎,一些主流浏覽器也支援CSS3的Text-shadow屬性,用純CSS建立這個效果也很簡單。這絕對不是PS出來的! 

10 個實驗性的 JS/CSS3 程式設計技術

這個教程是關于如何用HSL & HSLA 和quick+/- 向導制作出目前浏覽器支援的效果。 

10 個實驗性的 JS/CSS3 程式設計技術

在Mac OS X釋出的時候,有無數的網上教程教授如何用Photoshop制作透明按鈕,現在,試試用CSS建立吧! 

10 個實驗性的 JS/CSS3 程式設計技術

教程中有各種各樣的3D CSS變換。

10 個實驗性的 JS/CSS3 程式設計技術

繼續閱讀