Design / 免費照片、圖片、icon 分享,可用於平面、網頁、UI 設計 (2019.08更新)

Design / 免費照片、圖片、icon 分享,可用於平面、網頁、UI 設計 (2019.08更新)

▍照片、圖片庫 Unsplash 圖片、照片 Pexels 照片、影片 ▍UI 設計 Flaticon 向量 icon ▍字型 Google Fonts 各國語言字型 ▍綜合素材庫 Envatoelements 圖片、照片、影片、音樂、字體、簡報樣板、WordPress 主題 Freepik 向量圖檔、照片、圖片、向量 icon、平面設計樣板 Copyright announcement:the featured image: Photo by Jeff Sheldon on Unsplash

CSS / 變更選取文字的背景顏色

CSS / 變更選取文字的背景顏色

在 CSS 當中有定義一些偽元素選擇器 (pseudo element selector),他是用兩個冒號 :: 表示指定元素的特定的狀態。例如下面這個 code 就表示所有段落 (p) 的第一行 (first-line)。 那麼要怎麼改變被選取文字的背景色呢?只需要使用 ::selection 這個偽元素就可以囉! 假設我們要改變所有段落中被選取的文字的背景色: 下面這段文字就應用了上面這段 CSS 屬性,被選取的文字背景色會是 #0ABAB5 這個顏色 (tiffany blue): Our deepest fear A Return to Love: Reflections on the Principles of “A Course in Miracles” — Marianne Williamson (1992) Our deepest fear is not that we are inadequate. Our...

CSS / 幫表格加入橫向捲軸,讓超出螢幕寬度的表格不會擠成一團

CSS / 幫表格加入橫向捲軸,讓超出螢幕寬度的表格不會擠成一團

我們在網頁當中加入表格的時候常常會遇上一個問題,就是當表格的寬度已經超過螢幕的寬度要怎麼辦?尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性,但只設定這個屬性是不夠的,還需要對表格的加入以下屬性: 首先要先讓 table 這個物件變成 block 物件,然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容,自動加入水平捲軸。 最後是 white-space: nowrap 這個屬性,讓文字不會因為寬度自動斷行,除非內容真的有斷行 <br> 存在。 這是另一篇文章 Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表 有用到表格捲軸的範例: ▍ 關於上面三個 CSS 屬性的詳細說明可以參考 W3School 的說明: display: CSS display Propertyonferflow: CSS overflow Propertywhite-space: CSS white-space Property Copyright announcement:the featured image: Photo by The Journal Garden | Vera Bitterer on Unsplash

Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表

Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表

蘋果因為有 Retina 螢幕之後,我們想知道我們最後呈現在 Macbook 或 iPhone 畫面上的樣子都非常的麻煩,因為他有好多種解析度。例如我們在做手機的 UI 設計、網頁前端畫面、顯示在手機上的照片等等,都會需要注意到解析度的問題。 大多數的狀況來說,幾乎目前的 APP 都不支援 Retina 的呈現,也就是說 Retina 高解析度的畫面輸出只支援少部分的軟體,像是系統原生的照片瀏覽 APP 在顯示照片、影片時就是以 Retina 的解析度在顯示的。 而 Safari 或其他瀏覽器則都不支援 Retina,我猜原因應該是因為目前主流網頁的設計還是沒有以蘋果的 Retina 螢幕做設計,並竟還是有大多數非蘋果的用戶。所以在瀏覽器的設計上,蘋果還是維持原本傳統的解析度輸出。 iPhone iPhone 把畫面顯示到你的螢幕上總共會經過三個 (或四個) 過程,我們可以看到下表有三種解析度,其中最重要的是 Points,我們在做網頁設計或任何不支援 Retina 的 APP 時就會使用到這個解析度。 iPhone Points(logical resolution) Rendered Pixels(resolution) Physical Pixels 像素密度 螢幕尺寸 2G, 3G, 3Gs 320 x 480 320 x 480...