
0人評分過此書
想做好網站一定要會的CSS3
透過實作範例學習最新的CSS
CSS3為網路的視覺樣式語言注入了強大的新功能,製作美麗又引人入勝的設計工作變得前所未有的簡單。透過CSS3,即使不使用圖片你也能做出醒目的視覺效果,例如半透明背景、漸層和陰影;你可以運用美麗、特殊的非web-safe字型來顯示文字;可以不用Flash就做出動畫特效;更可以不需要透過JavaScript便能針對訪客的裝置或螢幕尺寸客製化頁面設計。
透過一系列創新且實用的實作範例,你將學到如何完成上述功能及更多的特效。每個章節都會引導你完成練習,讓你將新技巧整合到自己的工作中,或是激發你更多的靈感。
你將學到最熱門、最實用而且支援度最高的CSS3技巧,以及:
如何使用CSS3改善你的網頁效能,不僅是外觀,還有便利性、無障礙以及效能表現。
在什麼情況下要為較舊的非支援瀏覽器提供解決方法和替代方案,以及如何操作。
如何製作出含有特殊字體設計和包含優美圖像細節的出色設計。
進階的新選取器,讓你的原始碼更簡潔流暢,更不易出現人為錯誤。
製作多欄版面的新方法。
如何不透過程式也能快速且輕鬆地製作出行動裝置優化的網頁設計
本書的練習檔、更新清單和其他資源網址:www.stunningcss3.com
CSS3為網路的視覺樣式語言注入了強大的新功能,製作美麗又引人入勝的設計工作變得前所未有的簡單。透過CSS3,即使不使用圖片你也能做出醒目的視覺效果,例如半透明背景、漸層和陰影;你可以運用美麗、特殊的非web-safe字型來顯示文字;可以不用Flash就做出動畫特效;更可以不需要透過JavaScript便能針對訪客的裝置或螢幕尺寸客製化頁面設計。
透過一系列創新且實用的實作範例,你將學到如何完成上述功能及更多的特效。每個章節都會引導你完成練習,讓你將新技巧整合到自己的工作中,或是激發你更多的靈感。
你將學到最熱門、最實用而且支援度最高的CSS3技巧,以及:
如何使用CSS3改善你的網頁效能,不僅是外觀,還有便利性、無障礙以及效能表現。
在什麼情況下要為較舊的非支援瀏覽器提供解決方法和替代方案,以及如何操作。
如何製作出含有特殊字體設計和包含優美圖像細節的出色設計。
進階的新選取器,讓你的原始碼更簡潔流暢,更不易出現人為錯誤。
製作多欄版面的新方法。
如何不透過程式也能快速且輕鬆地製作出行動裝置優化的網頁設計
本書的練習檔、更新清單和其他資源網址:www.stunningcss3.com
- 導讀
-
CHAPTER 1 CSS3完整解析
-
什麼是CSS3?
-
新功能概觀
-
CSS3的研發進度
-
現在使用CSS3
-
-
瀏覽器支援現況
-
瀏覽器市場佔有率
-
主要瀏覽器的支援現狀
-
-
漸進式增強
-
優點
-
讓我這麼說吧
-
-
CSS3的好處
-
縮短製作與維護的時間
-
提升頁面效能
-
更佳搜尋引擎排名
-
提升優使性和無障礙設計
-
讓你保持領先狀態
-
-
個案研究:Highway Safety Research Center
-
在CSS3之前
-
CSS3之後
-
-
善用CSS3
-
瀏覽器前綴
-
處理不支援的瀏覽器
-
使用條件式註解來篩選出IE
-
-
處理不支持的客戶或老闆
-
別坦白一切
-
一開始就教育他們漸進式增強的好處
-
管理對於設計稿的期待
-
-
-
CHAPTER 2 對話泡泡
-
基本頁面
-
圈住長篇文字
-
不需圖片的圖片效果
-
圓角
-
加入泡泡尾巴
-
用RGBA或HSLA來製作半透明背景
-
無圖片漸層
-
非圖片的投射式陰影
-
非圖片文字陰影
-
-
變形大頭貼
-
什麼是變形(Transforms)?
-
旋轉大頭貼
-
-
完成頁面
-
-
CHAPTER 3 筆記本內頁
-
原始頁面
-
基本背景之外
-
縮放背景影像
-
單一元素上的多重背景影像
-
加入圖像邊界
-
加入投射式陰影
-
-
嵌入特殊字型
-
@font-face是什麼?
-
使用可接受的字型
-
瀏覽器支援
-
轉換字型
-
使用@font-face
-
-
完成的頁面
-
-
CHAPTER 4 利用文字來美化影像和連結
-
原始頁面
-
什麼是屬性選取器?
-
用動態加入的圖示來標明檔案類型
-
替代圖示
-
修正IE 6的問題
-
-
給予縮圖和全尺寸相片不同的樣式
-
Class的問題
-
使用屬性選取器來找出類型
-
-
完成的頁面
-
-
CHAPTER 5 使用擬類別來提升效率
-
不透過ID或class也能找出特定元素
-
新的結構性擬類別
-
回到對話泡泡:相間的顏色
-
回到相片上:隨機旋轉
-
-
以動態方式標示出頁面區域
-
:target擬類別
-
新增目次
-
改變目標區域的背景顏色
-
用純CSS來加入動畫
-
-
-
CHAPTER 6 不同螢幕,不同設計
-
基本頁面
-
什麼是媒體查詢?
-
為大螢幕更改版面
-
從水平導覽列到垂直選單
-
多欄文字
-
-
改變小螢幕的版面
-
為行動裝置修改版面
-
什麼是裝置寬度?
-
第三條媒體查詢
-
改善在高解析度顯示器上的外觀
-
檢視區域meta標籤
-
-
不支援瀏覽器的替代方案
-
完成的頁面
-
-
CHAPTER 7 動動你的設計細胞
-
顛覆的世界
-
不用浮動或定位也能製作多欄版面
-
讓區塊保持彈性
-
加入欄框
-
調整欄框順序
-
等高欄框
-
垂直與水平置中
-
-
實際現況:目前可用的功能
-
彈性表格版面
-
置尾
-
-
彈性方框模型的替代方案
-
box-sizing屬性
-
未來的版面系統
-
-
-
APPENDIX A 瀏覽器支援
-
結論
-
索引
-
資源出處
-
- 出版地 : 臺灣
- 語言 : 繁體中文
評分與評論
請登入後再留言與評分