10 個有趣實用的 WordPress 外掛

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

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

coming-soon

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

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

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

HTC RE Camera 正式發表 (潛望鏡來了)

之前傳出 HTC 將出一台定位類似 GoPro 的相機 RE Camera。今天,HTC 正式在美國紐約的 Double Exposure 全球產品發表會中亮相。外觀上,被戲稱為潛望鏡的設計得到確認,這個特殊的設計為 RE Camera 贏得不少目光和討論,也一度讓人以為 HTC 要和 GoPro 競爭。

Adobe 推出串流版的 Photoshop

之前,在 Adobe 推出 CC 創意雲時,號稱這是一款雲端的服務,當時以為從此不用在安裝幾百 MB 的 Photoshop 或 illustrotor,使用後才知道,Adobe 的雲端只玩半套,僅透過雲端整合你的 Adobe 帳號及授權,軟體的部分還是要另外下載。

10 款最棒的 Chrome OS App

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

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

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

如何製作響應式的影片

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

網頁的安全字型

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

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

FONT AWESOME 免費的向量圖示字型

FONT AWESOME 免費的向量圖示字型

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

幾個不常見的 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 的檔案看起更加精簡。

封面照片:

5 of 6
123456