文章專區

網頁設計相關文章

CSS的 transform 屬性可以讓網頁元素變形,呈現多種的特殊效果,其中之一便是旋轉效果,可以自由設定元素順時針或逆時針旋轉幾度。 寫法為rotate(θ) 指定元素以參考點為中心軸旋轉θ度。 θ 參數須有標示單位,例如: deg (角度)、rad (弧度) 、grad (梯度)  正數為順時針旋轉,負數反之為逆時針。   範例: transform:rotate(5deg)為指定元素以參考點為中心軸順時針旋轉5度。 See the Pen roNymy by Ya (@bok770) on CodePen. See the Pen yGLMza by Ya (@bok770) on CodePen.

ARTICLE

2

HTML iframe框架

 Html iframe為內嵌框架,用來在網頁內內置另一個網頁,像是常見的在部落格內嵌facebook專頁,可以直接在內嵌頁面上按讚或分享,是很常見的應用範例。 Iframe可以設定寬度、高度、外框參數、卷軸參數。 範例:   src便是輸入要嵌入的網頁,width 與 height 分別用來設定 iframe的寬度與高度,單位預設為px,所以若是px單位的話只寫數字即可,但如果是百分比%的話要明寫出來   frameborder用來設定 iframe 的邊框是否要顯示 frameborder="0" ──不顯示邊框 frameborder="1" ──要顯示邊框   scrolling 用來控制 iframe 的卷軸是否要顯示,有三種屬性可以設定:scrolling="yes" ──代表要顯示捲軸 scrolling="no" ──代表不顯示 scrolling="auto" ──則代表根據網頁大小自動顯示。 範例 :   See the Pen dQarxX by Ya (@bok770) on CodePen.
預設的div區塊為方形,CSS的border-radius屬性可以幫div添加圓角的效果, 設定值為圓角的半徑值,例如:border-radius:5px 意思為圓角半徑為5px 我們可以依據自身需求為div的四個邊分別設定不同數值, 四個數值對應的方向為 border-radius:  左上 右上 右下 左下 範例: See the Pen xQJbqB by Ya (@bok770) on CodePen.   以上範例僅設了兩個圓角10px,分別為右下角和左下角,其他兩邊設成0,所以會是直角。   若只設一個數值,則全部的角皆會設成該值 範例: See the Pen ZmjYpo by Ya (@bok770) on CodePen.     若要設計圓形可以設border-radius: 99em 範例: See the Pen KrBwNy by Ya (@bok770) on CodePen.    
在網頁設計上,icon設計與應用是相當常見的, 而使用上除了將icon存成圖片以外,還可以將之作成ICON Font。   那麼到底什麼是ICON Font呢? ICON Font是指將繪製好的向量圖檔轉存為文字檔, 並以css設定成字型來取代原有的圖片物件,在使用上只需輸入該icon對應的代碼或class, 就能夠輕鬆地產生一個小icon。     ICON Font的優缺點如下: 優點: 1.將小圖示(icon)轉為字體後,可減少原本輸出成圖片的檔案大小,降低圖片的使用率。 2.可透過css設定文字大小和文字顏色、陰影來達成效果。 3.修改時只需透過css修改樣式即可,不需再重複做修改圖片的工作。 4.因為是向量文字,相對在放大縮小時,解析度不受影響。   缺點: 1.由於文字形式只能設成單色,因此icon只能為單色或為css3的漸變色。 2.需借助專業的工具生成文字檔,製作方法可參考IcoMoon-將icon轉成Font的平台   綜合以上優缺點,使用ICON Font,不論是在檔案大小或修改的方便性來說,還是略佔優勢, 除了可自行設計以外,也可利用網路搜尋到不少免費的ICON Font資源,讓icon應用上更省力。   那麼該從哪裡下載免費的ICON Font呢? 除了上述的IcoMoon以外,這裡提供幾個主要的平台 Font Awesome:可參考Font-Awesome-簡單又好用的icon素材網 ,只要一行字即可直接使用! Fontello WE LOVE ICON FONTS 其實這些網站的ICON Font使用方式都差不多,首先都需先載入他們網站所提供的css, 然後輸入你要使用的icon所對應的代碼即可。   隨著扁平化設計逐漸普及,ICON Font在網頁設計上越來越常見, 而豐富的網路資源也能夠提高網站開發的速度,提升工作效率,不妨多加使用。  
 HTML button按鈕的應用相當廣泛, 設定值有以下: Type:按鈕的類型,有 button(單純按鈕)、reset(清空表單)、submit(送出表單) value:就是按鈕的値 name:按鈕的名稱 <input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式"> 範例: See the Pen gQbbWR by Ya (@bok770) on CodePen.   樣式可以透過CSS做調整,按鈕如下   若要消除預設樣式,CSS可以設定border:0 (去除邊框) 和background-color:none (去除背景),或是將這兩個屬性另外設CSS。 範例: See the Pen vQEEjm by Ya (@bok770) on CodePen.    接下來便可以自由套用CSS設計按鈕,也可以活用:hover讓鼠標接觸按鈕時會有不同的樣式變化。 範例: See the Pen wQBBEX by Ya (@bok770) on CodePen.  

ARTICLE

6

CSS註解的寫法

無論是在HTML、JavaScript等程式語言都有註解可以使用,當然在CSS也不例外, 使用註解可以清楚標示該行CSS所代表的意義, 或是將暫時不需要,但之後可能會用到的CSS先註解掉, 視設計師需求作使用,在專案管理上會更方便。 分成單行與多行寫法:   單行CSS註解的寫法 使用的是兩條斜線//,在//之後的文字皆為註解,不可換行    // 單行註解  // 單行註解   多行CSS註解的寫法 多行註解是用/* 和 */ 將註解的文字包起來,可以一次將多行的CSS註解掉。  /*  多行註解  多行註解  */  
 CSS的text-transform屬性可用來控制文字字母的大小寫,僅適用於英文字母, 不管你原本寫的文字是大寫還是小寫,皆可透過text-transform做設定, 可設定為全部大寫、全部小寫或只有第一個字母大寫。   設定值如下: text-transform:uppercase 所有字母皆為大寫 text-transform:lowercase 所有字母皆為小寫 text-transform:capitalize 第一個字母大寫,其他字母小寫   範例: See the Pen YJrVgb by Ya (@bok770) on CodePen.
CSS的word-spacing屬性可以用來控制網頁上英文單字之間的間距,由於英文字是以半形空白做為區隔,而此屬性便是控制此空白的間距, 全形空白則不受其影響,word-spacing可以為負值,如word-spacing: -5px   乍看之下跟letter-spacing屬性有些相似,但是word-spacing控制的是單字之間的距離,而letter-spacing則是控制單一字母間的距離。 範例:  See the Pen NORQrg by Ya (@bok770) on CodePen. 以上範例的句子:「e-work design」,如使用letter-spacing屬性,控制到的會是「e、-、w、o」……等等的單一文字之間的距離。 而若是使用word-spacing屬性的話,控制到的是「e-work」、「design」這兩個單字間的距離。   而word-spacing的另一項特性,句子若是中文字的話,如果中間有空格,也會將空格視為單字之間的分隔, 例如「一化網頁設計」會被視為一個單字,而「一化 網頁設計」則會被視為兩個。 範例: See the Pen Zqpgrm by Ya (@bok770) on CodePen.
 CSS的first-letter 屬性,可以用來控制文字段落的第一個字母,透過此屬性,我們可以對首字母的樣式做一些美化,而要注意的是,由於first-letter是偽元素,所以在寫CSS時必須用:first-letter。   範例:     利用此屬性,可以一次設定多個區塊文字的開頭 範例:
之前我們介紹了CSS的word-wrap,此屬性可以讓過長文字直接換至下一行,使得文字不會超出div區塊的範圍。 而CSS還有另一個相似的屬性為word-break,功能也是讓文字換行,那麼此兩項屬性有什麼差別呢?就讓我們來看以下範例吧。 延續上次的範例介紹的word-wrap,可以讓過長文字換行如下: 原本過長會直接超出範圍    使用word-wrap:break-word,可以使過長的design單字直接換行 但是可以發現的是,由於整行design文字換行的關係,使得「e-work」這段文字右邊留下很大一片空白,除了顯得有些浪費空間以外,看起來也較不整齊,視覺上就沒那麼美觀了。 因此,為了解決此一問題,我們可以使用CSS的word-break屬性。 設定值有: normal:瀏覽器的預設規則 break-all:可以在單字的字母之間換行,不一定要完整單字才能換行。 keep-all:不可以在單字的字母之間換行,必須保留完整單字,比如說遇到半形的空格才可換行。 範例: 可以發現,e-work右邊的空間被填滿了!但缺點是,若是一個完整的單字被強制斷行,可能會失去該單字的易讀性,使得閱覽者不清楚此單字或是誤以為是兩個分開的單字,所以在使用上須斟酌一下。