10 個有趣實用的 WordPress 外掛

Coming Soon Page & Maintenance Mode by SeedProd – 即將推出

  • 開發者:@johnturner
  • 立即下載:Coming Soon Page & Maintenance Mode by SeedProd
  • 簡介:這個外掛的功能很簡單,那就是為你的 WordPress 建立一個「即將推出」或者「正在維護」的頁面,讓到訪的使用者知道你的網站正處於建構或者維護中,適用於任何 WordPress 的主題佈景,也可以用 CSS 和 HTML 對內容進行制定,而且支援響應式網頁。

coming-soon

Continue reading “10 個有趣實用的 WordPress 外掛”

Open post

Low Poly 最近很紅的一種設計風格

最近國外設計圈很流行的一種風格,他有點類似 3D 建模初期的 LOW POLY 模型,或是石膏模型的角面像 (單色版)。你可以把這種風格視為連續三角或四角形的分布,近看或放大看是多邊形的色塊,但退點距離或縮小後,就可以看出物體的型態,有點類似印象派秀拉的點描風格,差別只是把點換成角面,效果比點描更俐落、更誇張、更有現代感,可以為影像增加視覺的衝擊力道,很富有表現趣味的一種手法。下面是一則 Low Poly 的教學影片,只要先選一張照片墊在最底層,然後依光影逐步建立三角或四角面。技術上不難,但要花時間、磨功夫:)
Continue reading “Low Poly 最近很紅的一種設計風格”

10 款最棒的 Chrome OS App

Chrome OS 是 Google 基於 Chrome 瀏覽器和 Linux 核心所推出的作業系統,他和一般的 OS 最大的差異在於 Chrome OS 完全是基於網路而誕生的雲端作業系統,Google 當初在設計這套系統時,假設了未來的網路會具備簡單、高速及雲端化,人們會基於上述的特性使用網路的各種服務,因此喊出「網路即平臺」的觀點,而 Chrome OS 即是這樣觀點下的產品;你可以透過 Google 的 Chrome 應用程式商店,下載各式各樣的 App 來輕鬆存取網路的各種服務、像是瀏覽網頁、搜尋、電子郵件、文書處理、網路硬碟、檔案分享、通訊、音樂、社群、影像處理、遊戲等等,這裡我們先準備了 10 款最新、最火辣辣的 App,讓你可以領先大夥率先體驗 Chrome OS 的奇妙世界。 Continue reading “10 款最棒的 Chrome OS App”

CSS 屬性選擇器-新手入門篇

大多數的 HTML 標籤都包含相對多組的屬性,例如常見的連結 a 標籤可以加 href、style、target、title 等屬性,而 CSS 屬性選擇器可以讓 CSS 依屬性的差異給予該標籤不同的設定,這樣做一來可以減少 class 或 id 的使用,讓 HTML 更加精簡好閱讀,二來可以增加維護的便利性,三來可以更便利的控制網頁上的每個元素,好處不少。
Continue reading “CSS 屬性選擇器-新手入門篇”

如何製作響應式的影片

很多時候我們需要在網頁中插入一段 Youtube 影片,如果你直接複製 Youtube 中的鑲入則會發生一個問題,那就是 Youtube 提供的 HTML 會是一個佔據固定範圍的影片,無法配合手機或平板彈性縮放!其實不只是 Youtube 會發生這樣的問題,只要是影片要鑲入到網頁中,都會發生類似的問題;如果我們把影片寬設成 100%,高度設成 auto,預覽顯示的效果不會如我們想像會自動等比例縮放,高度會被侷限在一定的範圍內,造成影片變形,因此我們需要一點小技巧,好配合響應式網頁的縮放需要。
Continue reading “如何製作響應式的影片”

網頁的安全字型

由於網路上使用者的設備具有高度不統一的特性,且每一種設備預設安裝的字型也不太一樣,因此在設計網頁的時候,常常為了遷就共通性而犧牲部分文字的效果,像是繁體中文的世界中萬年不敗的新細明體就是一例;而對英文來說,由於每一套英文字型的大小並不像中文那麼占空間,選擇性也就比較多,但也因為選擇性多,每種平台支援的程度也不一樣,反而造成了使用上的困擾。

因此,有人就把一些每種平台都有支援的英文字型整理起來,把這些字型稱做網頁的安全字型,意思就是說,只要使用這些字型,在各種平台上顯示的效果比較一致,不用擔心頁面相容的問題。
Continue reading “網頁的安全字型”

Open post

FONT AWESOME 免費的向量圖示字型

過去我們在處理網頁圖示 (Icon) 時,通常都會用圖片的方式來呈現,但這樣做有幾個缺點,一、圖檔的檔案較大,二、修改不易,三、一些常用如陰影之類的效果需要送 Photoshop 處理,四、點陣檔無法縮放。
Font Awesome 是一個 github 下的專案,他提供可縮放的向量圖示字型,使用上就像一般的字型,你可以透過簡單的 CSS 設定,來改變 Icon 的大小、顏色及各種 CSS 效果,為網頁增加趣味;它包含下列幾項優點:
Continue reading “FONT AWESOME 免費的向量圖示字型”

幾個不常見的 HTML & CSS 效果

  1. 在 body 設定色彩,影響的範圍不只於內文文字,還包含影響下列的標籤
    • 圖像上的 alt 屬性
    • 列表元素的外框顏色 (border-color)
    • 列表的項目符號
    • hr 的顏色 (需設定 border-color:inherit; 且 IE 不支援)
  2. border 有下面幾種方式的簡寫
    • 邊框的粗細:border-width:5px 10px 15px 20px;
    • 邊框的樣式:border-style: solid dashed dotted double;
    • 邊框的色彩:border-color: red blue yellow green;
  3. word-wrap 自動折行:
    在處理連續無空格的英數字串時 (例如一個很長的網址),基於排版的需要,有時我們會希望把這個字串限制在一個固定大小的寬度中,這時我們就可以透過設定該容器的 word-wrap: break-word; 來達到這樣的效果。下面是範例:

    CSS:

    p.example{width:200px; border:#ccc 1px solid; padding:15px; word-wrap:break-word;}

    HTML:

    <p class=”example”>http://www.tt5.org/wordpress/css/example/word-wrap/</p>

    效果:

    http://www.tt5.org/wordpress/css/example/word-wrap/

  4. white-space 處理空白字元:
    空白/連續空白 Tab/連續 Tab 換行/連續換行
    normal 皆保留一個空白 皆替換一個空白 皆替換一個空白
    nowrap 皆保留一個空白 皆替換一個空白 皆替換一個空白
    pre 全部保留 全部保留 全部保留
    pre-wrap 全部保留 全部保留 全部保留
    pre-line 皆保留一個空白 皆替換一個空白 全部保留
    • 簡單的來說,normal 和 nowrap 都會把所有的格式轉換成一個空白,不論是空白、連續空白、Tab、連續 Tab、換行及連續換行皆轉換成一個空白,差異只在於 normal 支援自動換行,nowrap 則強制不可換行。
    • per 和 pre-wrap 則完整保留所有格式,pre-wrap 多了自動換行。
    • pre-line 則保留換行格式,且支援自動換行,其餘皆轉換成一個空白
  5. base 標籤:

    base 標籤放置在 head 標籤裡,可以設定的屬性有兩個,一個是 href,一個是 target,我比較常用的是 target,只要設定一次,整個網站的連結就可以直接套用,讓 HTML 的檔案看起更加精簡。

封面照片:

Posts navigation

1 2 3 4 5 6