CSS

In Visual Studio Code, I’m using the Live Sass Compiler and Live Server (both plugins are developed by Ritwick Dey) for the development HTML project.

After install Live Sass compiler and Liver Server, the quickly functional button “Watch Sass” and “Go Live” will show in the VSCode bottom status list.

CSS 限制內容字數寬度或行數，超過顯示刪節號…

簡單記錄透過 CSS 來限制字數寬度或行數做法，可以將長篇的文章進行截斷，並且結尾以點點點方式呈現

在版面需要對其實，是相當好用的方式。

CSS Grid 是一個 layout framework，

雖然多數新屬性僅有主流瀏覽器版本才有支援，但是具有未來性的東西，還是值得學，將陸續整理一些相關介紹及用法

這裡Grid建構原型相關圖片及範例主要參考自 Per Harald Borgen 這篇，有興趣的話，可以看看原始全文內容，介紹會更加詳細

接下來，開始介紹如何使用 Grid 建構原型

在過去 sass/scss 興起的時期，最常搭配 compass 以及相關的 mixins 來進行開發

CSS3 建構過程，時常會需要用到動畫設計，所以就將相關的參數及使用記錄下來，方便之後查詢及使用~

瀏覽器前綴

在使用任何CSS3高級屬性時，建議都要搭配瀏覽器前綴，讓屬性效果可以在各瀏覽器有更好的支援

-moz-{屬性}：Firefox 瀏覽器。
-webkit-{屬性}：Safari, Chrome, Opera 等瀏覽器。
-o-{屬性}： Opera 瀏覽器。
-ms-{屬性}： IE 瀏覽器。

Transition

Transition 可以用來設定基礎的動畫效果，直接指定要產生變化的css屬性

開發網站需要留意各種解析度尺寸 這裡就整理一些常見的螢幕尺寸，在開發響應式網站 RWD (responsive web design) 時，可以直接拿來參考 液晶螢幕尺寸（吋） 畫面比例 解析度 15 4:3 1024768 17 / 19 5:4 12801024 19 寬螢幕 16:10 1440900 20 4:3 16001200 20 寬螢幕 16:10 16801050 21 4:3 16001200 21 寬螢幕 16:10 16801050 22 寬螢幕 16:10 16801050 23 4:3 16001200 24 寬螢幕 16:10 19201280

推薦一款由 leecade 所發布的 react native swiper 套件，目前版本可以同時支援 iOS 及 Android，並且可以自定義樣式

Flexbox 彈性盒子，讓CSS區塊布局能更容易更具有彈性， 目前主流瀏覽器都已經有良好的支援，雖然許多功能仍在草案階段，但該項目已受到廣泛支持，在未來勢必成為主流標準之一。 Flex 排版能更優雅的處理不同螢幕尺寸及設備布局，接下來將直接進入他的功能介紹，逐步來了解這裏面的特性及用法 flex 階層關係 在討論功能之前，先要了解 flex主要框架設計理念， 通常，會在最外圍設定一個主要的 flex，在他內部可以包含0到多個區塊。 在外層的這個主要的 flex，就可以用一些參數來控制內部的區塊排版，包括排列方向、總體尺寸等等… 設定 flexbox 因此，先將要設定的主要區塊調設定為 flexbox 例如，這裡用display:flex 來設定一個 div 為 flexbox div{ /* flexbox setup */ display: flex; } flex flex 可以用來設定同一個主元素底下，內部元素的長度分配。

最新推薦給設計師30個高質感免費字型，適用於大標題、Logo、T恤、標籤、海報、徽章等用途。每一個字型都是經過精挑細選，讓你可以用來創造更具有個人風格的設計專案，並且這些字型都能免費提供個人或商業用途，非常值得蒐藏。

目前有很多客製化form element的套件， 但是這次專案只需要客製checkbox及radio， 由於這樣的類子很常用到，就直接在這裡就做個紀錄，方便之後查詢 如何透過CSS來客製化HTML checlbox 及radio buttons

對於一般網頁設計師而言，對CSS的刻板印象只在於樣式設計方面，能讓你更容易設計出具有吸引力的網頁，但事實上，他的能力比你想像中還來得複雜，用CSS一樣可以做出豔麗的效果，例如純動畫及互動元件，當然，如果搭配HTML、Javascript，又能激發更多的創意變化。

瀏覽器就像是一個空白的畫布，最重要的還是你能不能運用靈感，在這張畫布上發揮你的創意，在這裡，將介紹18個使用CSS來打造的創意作品，從最簡單的字體到動畫 ，相信都能讓你對CSS有所改觀。

圖片來源: dudamobile

響應式網頁設計(Responsive Web Design)在這幾年越來越火紅，剛好，這次要開發項目的程式面會比較單純，所以想說，之前沒畫過RWD的畫面，就來試著畫一下，因此，就開始陷入Photoshop Guid這塊。不知道大家在使用 Photoshop設計時，都會怎麼處裡?

在製作過程，我使用的是 Photoshop 中的網格的擴充套件，由於，公司跟家裡使用的Photoshop CS版本不一樣，並且安裝的方法也不同。因此，在本篇主要以如何在Photoshop CS5裡面安裝Grid 網格擴充功能: