在製作網頁時經常會設計圓角、協角與動畫…等,這些設計不透過程式通常難以達成,這時也可以使用CSS3。
再者,可以透過CSS的擴充語法 SCSS,並結合Compass框架,增加CSS的製作空間與方式。
這次,將只使用CSS的設計來呈現,並介紹如何活用SCSS與Compass提供的功能來製作幾何圖形。
為什麼要使用SCSS或Compass呢?
在運用程式描繪圖型的時候,可以使用基本的四則運算或三角函數之類的數學公式、重複的語句(for語法)、條件分支(if語法)…等,處理起來會較為便利。
但是,CSS只能使用calc()語法進行簡易的計算,而且無法進行重複的內容編譯與條件的判斷。SCSS與Compass則是已經具備處理這些方法的API,所以在圖形處理時會變容易的多。
SCSS與Compass的安裝與設定方式請參考以下網頁:
如何簡單的用Mac終端安裝SCSS+Compass
以下,將假設使用設定完整的SCSS與Compass環境來進行說明:https://ics.media/entry/1808
精選專案.網頁設計.RWD響應式網站 / 戶外旅遊類
網站技術:PHP . Javascript/MS-SQL
不論是個人、情侶、好友或是家庭想要安排一場獨一無二的旅遊!!趣吧有滿滿的夢幻行程可以滿足,機票、包車、住宿、票劵一次搞定;想要出國怕語言不通,也有專業達人協助。 讓你擁有一場難忘又滿足的旅遊。
網頁設計.RWD響應式網站.企業形象網站 / 美容保養類
網站技術:PHP . Javascript/MySql
提供健保門診及醫學美容的專業服務,並擅於治療常見皮膚疾病,如皮秒除斑、除刺青、黑眼圈、電音波、體雕與多汗症等症狀。
網頁設計.RWD響應式網站 / 教育人文類
網站技術:PHP . Javascript/MySql
科教中心提供招生考試、新生入學前服務與高中接洽服務。並提供本校與區域高中、職之間能有持續且穩定交流的平台。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策