[CSS] 以 CSS 自製物件背景

CSS3 所提供的許多新功能真的可以幫我們節省許多時間與精力。對於我這種沒有美工基礎的程式設計師來說, 如果想幫 HTML 元件做個可以看的背景圖, 雖然不是辦不到, 但是如果自己畫, 可能花了許多工夫, 還是覺得難看; 如果上網路去找, 除了隨時有侵權的疑慮, 同樣要花掉許多時間。後來轉念一起, 為何不使用 CSS 本來就提供的功能? 東西是自己做的, 高興怎麼用就怎麼用, 改起來也容易...

...繼續閱讀 »

展望 HTML5 未來新趨勢

關心網路發展趨勢的朋友一定知道, W3C 聯盟 (World Wide Web Consortium) 己在近日 (2012/12/17) 宣布完成了 HTML5 和 Canvas 2D 的規格定義, 接著將展開互通性 (Interoperability) 與效能方面的測試, 來確保 HTML5 能與各大瀏覽器達到最大的相容。W3C 除了在這一天推出 HTML5 規格的侯選推薦版本 ((Candidate Recommendation, CR) 之外, 並將按計畫於 2014 年推出 HTML5 最終規範, 正式讓 HTML5 成為網頁撰寫標準語言。不過, 為避免不同標準對推出的時程造成交互影響, Canvas、Web Sockets 和 Web 儲存等技術將會被獨立出來, 各自訂定計畫, 將不再納入 HTML5.x 發佈計畫裡面...

...繼續閱讀 »

[CSS3] 使用 CSS3 製作 HTML 小時鐘

在 CSS3 裡面增加了 transform 功能, 使得我們可以對網頁元件進行放大、縮小、平移、旋轉、扭曲等等效果。我在本文中要介紹的是其中的 rotate 效果, 而且運用它來製作一個完全使用 HTML 標籤加上 CSS3, 不使用任何圖片的小時鐘。在我開始介紹這個時鐘小工具之前, 你不妨往本網頁的右邊看一下, 在側邊欄的 jlClock 就是我的作品...

...繼續閱讀 »

(CSS3) text-shadow 詳解

text-shadow 是 CSS3 中一個蠻有趣的屬性。加上這個屬性之後, 文字馬上變得多彩多姿起來。簡單的講, 就如同它的字義, text-shadow 意思就是給文字加上陰影。以前我們必須使用繪圖軟體才能為文字套上這些特殊效果, 而且還要把它轉變成圖形。現在, 只要方便地賦予它 "text-shadow" 這個 CSS 屬性, 馬上就可以看到效果...

...繼續閱讀 »

運用 CSS 讓過長文字以省略符號取代

在某種情況下, 我們可能需要把一段過長的文字從中截斷, 並在截斷處以省略符號 (...) 取代, 表示這段文字其實尚未結束, 只是被省略。如果你的文字是從資格庫中取得, 那麼你可以從資料庫取出時就載斷字串並加上簡略字元後傳回; 然而, 如果你不想把原始資料真的截斷...

...繼續閱讀 »

[入門文章] 介紹 CSS 選取器

凡是 CSS 樣式定義都具備兩種元素:1. 選取器(Selector)2. 屬性(Property)。你可以想像一下 Name-Value Pair 結構,如果 Value 是 Property,那麼 Name 就是 Selector 了。若用白話來說,「選取器」就是「屬性」的索引。 我想屬性的部份在這裡就不多做介紹了;我將主要解說選取器的類別和用法...

...繼續閱讀 »