職場君

網頁設計小眉角:一些少見卻好用的 HTML & CSS

input 的欄位預設會記錄輸入的值,以方便使用者在重複輸入的時候可以透過下拉直接點選,如帳號、電子信箱等等。但有時我們十分確定使用者不會在該欄位輸入兩次一模一樣的數值,或是不希望其他使用者發現我們輸入什麼內容時,會希望關掉 input 的紀錄功能,這時,你可以在 input 加入 autocomplete="off" 的屬性,這個屬性預設是 on 開啟,也就是會紀錄 input 的輸入內容。但,當你改成 off 後,下次你在該欄位輸入資訊時,瀏覽器就不會紀錄任何內容。

網頁設計小眉角:一些少見卻好用的 HTML & CSS Read More »

全字庫:免費中文毛筆/書法字體下載

經常製作活動網頁的朋友們為了配合活動主題的走向,對字型的需求往往比 UIUX 設計師來的高,特別是一些主題性很明確的案子,如水墨風格的作品需要搭配合適的毛筆/書法字體。但中文世界裡合適的毛筆/書法字型並不多見,且須要遷就電腦字型的規範,讓這些毛筆字型多了規矩,少了筆意,用在小字的內文,辨識度不高,用在大字的標題,又顯得太過方板、規矩,以至於這些數量有限的毛筆/書法字型實際使用的效果也非常有限,有沒有其它更接近手寫效果的毛筆/書法字體可供選擇呢?

全字庫:免費中文毛筆/書法字體下載 Read More »

最簡單的 Scroll 頁面動畫:AOS-Animate on Scroll library

對很多偏視覺導向的網頁設計師來說,編寫原始碼是一個相對可怕的事情,特別是你要在網頁上呈現一些動畫以增加畫面互動時的趣味時,往往很多時候都需要求助前端工程師。但由於台灣淺碟型的市場,公司裡的分工不一定那麼清楚,有時也不會有專職的前端工程師,這時如果你能花點時間去熟悉一些常用的 Library,就能能讓你在相對有限的資源去完成更多有趣的想法。

最簡單的 Scroll 頁面動畫:AOS-Animate on Scroll library Read More »

資源不夠時別用 WordPress 架設購物車!特別是涉及到金流時,你需要想得更仔細些。

在許多討論 Wordpress 的論壇或社群很容易將 Wordpress 神格化,彷彿萬物皆可用 Wordpress 來解決,畢竟透過外掛,理論上它的確可以完成很多工作。但有趣的地方在於可以順利工作與可以穩定運行兩者間存在巨大的技術鴻溝,當你有足夠的背景知識去處理 Wordpress 衍伸出來的問題時,Wordpress 就會是一個好工具,反之,它會再出現問題的時候變成你的噩夢。

資源不夠時別用 WordPress 架設購物車!特別是涉及到金流時,你需要想得更仔細些。 Read More »

功能強大且超實用的截圖軟體 PicPick (for Windows)

對於 UI 或網頁設計師來說,與 PM 或客戶討論畫面的效果時,常常需要對畫面做一些局部擷取及簡單的標示。雖然 Photoshop 也可以完成這樣的工作,但這類專業的繪圖軟體功能過於複雜,一般人會比較難上手。在特定使用場景下,開啟 Photoshop 需要等待 30-60 秒,加上裁減大小及標示文字,完成一張用作討論的截圖需要一到兩分鐘。對於即時性有較嚴苛要求的討論情境裡,這樣的製圖流程往往過長。更別說在多人對話的線上會議,每個人提出的觀點會不一樣,如果製作截圖的流程及時間過於複雜且漫長,你會討論的過程中手忙腳亂,反而很容易忽略對話的內容,因此不會是首選工具,這時挑選一款輕巧好用且具有基礎編修功能的截圖軟體就會顯得十分有必要。

功能強大且超實用的截圖軟體 PicPick (for Windows) Read More »

你為什麼不需要買 NAS?

鑑於 Google Photos 從 2021 年的 6/1 起,免費無限空間的服務即將停止,網路上陸續出現主張用 NAS 取代付費 iCloud 或 Google One 等服務的說法,文章可能會從單位容量成本、隱私、擴充性、多樣進階的應用等角度切入。常常只提 NAS 使用上的優點及便利,卻在某種程度上淡化 NAS 的缺點,甚至為了突顯性價比將 NAS 與公有雲做了不適合的比較,關於這點,我們想要透過這篇文章做一些討論。

你為什麼不需要買 NAS? Read More »

Adobe Fonts 首頁

漂亮字型選不完,Adobe Font 讓你的網頁字型 72 變

說到免費的 Webfont 很多人就會聯想到 Google fonts,其實對設計軟體供應商 Adobe 來說,它們不只與 Google 合作思源黑體及思源宋體的開發,本身在字型領域也是深耕許久。只是這項服務早先被歸類在 TypeKit 的項目下另外收費,所以較少被大家提及,但後來 Adobe 將 Typekit 與 Creative Cloud 創意雲整合,並更名為 Adobe Fonts。現在只要你有 Creative Cloud 創意雲的帳號,就可以免費使用使用,而且同時提供離線版及 WEB 版兩種選擇,這麼好康的東西趕快來看看吧。

漂亮字型選不完,Adobe Font 讓你的網頁字型 72 變 Read More »

VISUAL STUDIO CODE 初心者設定指南

一般來說,剛安裝好的 Visual Studio Code 就已經相當完整,內建 emmet、各種常見語言的色彩標示、程式碼折疊、所在行標示、HTML & CSS 語法及屬性的下拉選項、支援 Markdown 等等…對一個網頁設計師來說,如果沒有特別的需求,幾乎可以馬上用來開發。話說如此,但總還是有一些小細節不是那麼完美,就像買了最潮的球鞋,裡頭卻有顆小石頭,穿起來總是刺腳。所幸 Visual Studio Code 提供極為豐富的設定,幫助你打造屬於自己的編輯器。下面有一些我們推薦的設定,讓你的 Visual Studio Code 不只是潮,用起來更是舒適。

VISUAL STUDIO CODE 初心者設定指南 Read More »

網頁設計師必學的五個 CSS 動畫庫

俗話說,工欲善其事必先利其器,對現在的網頁設計師來說,為畫面增加一些微互動的動態效果已經是時勢所趨,但 CSS 不比 Flash,需要透過 Code 的方式才寫出動態的效果,對很多視覺設計師來說是一道門檻,所幸網路上已經有很多資源將類似的動畫需求整合起來,只需要用點心去尋找,就可以找到許多功能強大的 CSS 動畫庫,下面我們挑五個比較有名且實用的來介紹。

網頁設計師必學的五個 CSS 動畫庫 Read More »

返回頂端