文章專區

網頁設計相關文章

若在網頁製作時,預期頁面在載入時必須花較長時間時,通常會在等待網頁載入的期間加入一個loading的動畫圖示來表示,避免用戶誤以為網頁無回應而離開,若是圖示美觀有趣的話,甚至會吸引瀏覽者的注意力。   我們來介紹一個方便製作圖示的網站是loading.io( https://loading.io/),是線上loading動畫圖示產生器,支援gif、SVG、CSS、APNG,尤其是SVG相較於gif檔案更小,圖案也較不失真,是很好的選擇,而APNG跟gif差在支援的色彩較多在表現上更豐富(24bit),gif則只有8bit。   loading.io目前提供了許多圖示可以使用,快速又便利,有免費的跟付費的。   在設定上可以依自身需求調整右方的選項,依圖示的不同,可以調整的部分也有些許差異,除了最基本的色彩、尺寸、背景色和動畫速度之外,若一個圖示內含有好幾個物件,有的還可以調整各自的顏色,甚至是輪廓的設定也可以很自由,比如例子中的圖示,不僅可以調整方塊長寬的數量(Block Count),還有方塊間的間隔(margin)、方塊的寬度(block width),非常有彈性。   下載步驟如下:   首先選擇一個想要的圖示,依調整顏色、尺寸、動畫速度等等。 設定好之後按「download」即可下載,如前面所說有四種格式可挑選,之後就可以拿來自由使用了唷!   分別選擇四種格式下載後的檔案,十分快速方便!
通常我們在設計網頁切版時,很少會切不規則的形狀,但現在可以透過CSS設定來給圖片作多種形狀的繪製了唷!但是在數值的設定上太過複雜而難以上手怎麼辦呢?別擔心,有個線上繪製器可以直接使用喔!只要利用CSS clip-path maker設定clip-path屬性,就可輕鬆產出自己想要的形狀了唷!   首先我們到CSS clip-path maker網站:http://bennettfeely.com/clippy/   右邊有許多現成的幾何形狀可以選擇。   下方有尺寸的設定並提供了一些背景圖片做參考。   可以先在右邊填上尺寸,再選好想要的形狀後,依自己需求調整錨點以改變輪廓。   調整好了之後複製最下方的原始碼,加上尺寸(width和 height)的數值,就可以使用了。   範例: See the Pen <a href='https://codepen.io/bok770/pen/pdeoxb/' _fcksavedurl='https://codepen.io/bok770/pen/pdeoxb/'>pdeoxb</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.   利用此項線上工具可以對背景圖片快速地進行裁切,增添網頁設計上排版的趣味度和豐富性,不妨嘗試使用看看喔!  
在網頁設計時,有時會需要製作圖片互換的效果,只要用CSS就可以實現,還可以加入淺入淺出的動畫效果唷。 首先將兩張圖片透過定位(position)疊在一起,然後將原本顯示的圖片透明度數值設定成0,這樣滑入時就能看見疊在底下的圖片,如此一來,只需要少少程式碼,也無須寫JS,就可以達成簡單的圖片切換了。是不是很簡單呢? HTML   CSS   成果如下 原本顯示如圖   滑入後切換第二張圖    例子: See the Pen <a href='https://codepen.io/bok770/pen/yPejPN/' _fcksavedurl='https://codepen.io/bok770/pen/yPejPN/'>yPejPN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
在設計網頁時,有時需要調整圖片的透明度,如我們所知用CSS調整透明度的作法就是設定opacity屬性,然而設置此屬性的元素都會受到其影響,也就是說,若只是單純想調整圖片的透明度,設定opacity屬性之後,卻會連帶地使得置於其上的文字也一起具有透明性,然而又不希望文字也跟著透明化,這樣的情況該如何解決呢? 一般在設定opacity時可能會如以下情況,以設60%不透明度為例,我們可能會設opacity:0.6,但是如此一來,文字的透明度也跟圖片一起變化了(如最下方範例的第一塊div),此時我們可以將顏色的設定改以CSS3的rgba(red, green, blue, alpha)來表示,rgba最後的a代表alpha,是指透明度,設定的數值從0到1,例如60%不透明度要設成0.6,rgba(red, green, blue, 0.5),如最下方範例的第二塊div。 但是這屬性IE6、7、8不支持,IE9及以上版本和其他瀏覽器都支持。   因此若是要只針對IE6、7、8的兼容性的話,還有一個方法便是使用filter:Alpha(opacity=x),x 的取值從 0 到 100,例如60%不透明度便是filter:Alpha(opacity=60) ,範例如最下方的第三塊div。 因為此範例僅是針對IE6、7、8、9,所以對IE10及以上版本和其他瀏覽器不會起作用。 範例: See the Pen <a href='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/'>vWBrOm</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.  
fancybox是乾淨美觀的jQuery燈箱套件,在相片的展示上呈現簡潔漂亮的視覺效果,在網頁設計上泛用性高。  fancybox官網(http://fancyapps.com/fancybox/)有幾項描寫詳盡的範例,可以依據自己需求選擇適合的demo來做。 首先到官網下載有全部檔案的壓縮檔,以自己所設的連結放進裡面 href裡放的圖片連結是點擊後放大的圖,img src裡的則是小圖,class部分為自己命名。   範例:https://codepen.io/bok770/pen/yoEVvm  See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/yoEVvm/' _fcksavedurl='https://codepen.io/bok770/pen/yoEVvm/'&amp;gt;yoEVvm&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.
網站的運行速度對於瀏覽量占有舉足輕重的影響,而影響速度的原因之一就是圖片! 圖片若尺寸太大或數量太多勢必會跑得比較久,就算只是幾秒的差異,但這就會使得用戶等得不耐煩而離開網站,導致跳出率提升,對網站排名也會有不好的影響。 那麼該怎麼處理圖片才能減低對網站速度的影響呢?首先就是將圖片的容量壓到最低,但該如何既不影響到圖檔本身的畫質,又可有效降低容量大小呢?   這篇就來介紹線上的圖片壓縮工具-TinyPNG,還有另一個網站是TinyJPG,可以針對這兩種圖檔,在不破壞原有圖片品質的情況下,進行最佳化的壓縮。   TinyJPG:https://tinyjpg.com/ TinyPNG:https://tinypng.com/   1. 進入TinyJPG網站後,可以直接將欲壓縮的圖片拖進虛線框中,不過一次的壓縮張數是有限制的唷!最多可以壓縮20張圖片,如果數量很多的話必須分批壓縮。而單張照片的容量則不能超過5MB。   2. 在上傳完之後,TinyJPG就會開始進行壓縮,並顯示壓縮後的大小以及節省了多少容量。  
我們在使用網路上的字型時,在粗細上並不是只有正常和粗體兩種而已,Font-weight屬性可以設定字體的粗細變化,除了normal是預設值、bold是粗體、inherit是繼承父元素之外,數字設定是從100、200~900,一共有九種,此外bold粗體是700,normal是400,設定值是純數字時,不需要在後面加上任何單位唷。 下面以網頁常使用的繁中字型-微軟正黑體做示範: See the Pen MErNBE by Ya (@bok770) on CodePen. font-weight屬性相當容易使用,不妨善用這個屬性讓網頁上的字體更有變化性唷!
 之前曾介紹一個大家較熟悉的icon素材網-Font-Awesome,這次介紹的雖然也是提供icon下載使用,但是比較特別的是,Devicon提供的圖示是較偏向於技術性相關的,我們有時需要在網站放一些這種icon,以告訴客戶支援了哪些技術、瀏覽器(Google Chrome、Firefox、Safari)、使用何種設計軟體(photoshop、illustrator)製作等等,這種常見的技術相關標誌,在這個網站都找得到。 Devicon:https://konpa.github.io/devicon/ 圖示提供了SVG和字型版本(Font version)。最上方可以輸入關鍵字搜尋你要的icon名稱。   首先選擇一個圖示,這邊選擇Google Chrome的icon作示範,點了之後右列會顯示字型版本與SVG版本,各版本又有好幾種不同的外型,如示範中的Chrome,字型版本和SVG版本各有四種,不同點是加入英文字或是改了顏色之類的,可以依據自己的需求來使用。下有原始碼可直接複製到自己的檔案中使用。要注意的是字型版本需要多加一行在裡。   若要下載原檔的話可以滑到下方下載。 Devicon提供各種技術開發者會用到的icon和logo,只要複製貼上即可快速使用!
網頁設計師在寫CSS時,是不是有時會發生明明已寫好屬性設定,但卻無法套用進頁面的情形呢?遇到這情況,不妨檢查看看CSS優先權的設定唷!CSS提供許多選擇器類型,當使用不同的選擇器時,套用樣式的優先權也會不同。 這邊整理優先順序的幾個原則,讓你在寫CSS時可以更容易掌握唷!   越左邊權限越高 元素內的樣式>頁面內的樣式>外部載入 元素內的樣式 例子:   頁面內的樣式 例子:   外部載入 例子: 以@import方式載入 在頁面內以 link 方式載入   後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子:   最後會套用的屬性是 width:250px; height:50px; background:#fff;   Id>class 由於 id 具有不可重複性,而class則是可重複的,所以 id 在層級上大於 class, 如果一個元素同時有 id 跟 class 兩種屬性,且互有所衝突時,id 優先權大於 class。   !important 為最高優先 !important 的作用為強制提高優先權,照理說越後面設定的越優先,但若使用了 !important,會使得最前面的設定成了最優先,使用!important的 CSS 樣式幾乎等於無敵。 當出現二個!important時,優先權就是依先後順序,與其它的選擇器的原理相同,因此非必要的話,最好盡量少用!important。  
展開收合效果是常見的網頁技巧,不僅提高版面布局的美觀性,也能有效縮短文章的長度, 讓我們來看看如何使用jQuery達到這效果吧! HTML CSS JS   範例:https://codepen.io/bok770/pen/qXZyPN See the Pen <a href='https://codepen.io/bok770/pen/qXZyPN/' _fcksavedurl='https://codepen.io/bok770/pen/qXZyPN/'>qXZyPN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a></div>