睡蓮‧池水間

Guest
2012-Feb-12  
有 0 位會員和 13 位訪客在線上

文章 :: 語言集

用 CSS 3 將你的設計帶入下個高度

日期：09/6/27 16:11
點閱：1110
評分：0票
回覆：4
子標題：用 CSS 3 將你的設計帶入下個高度 - 2
3）多欄佈局

　　這是新的 CSS 3 選擇器可以讓你不用使用多個 div 標籤就能實現多欄佈局。瀏覽器解釋這個屬性並生成多欄，讓文本實現一個仿報紙的多欄結構。

tweetCC在其首頁使用了CSS3多欄選擇器


　　tweetCC在其首頁上將介紹文字顯示為四欄。 這四欄並非浮動的div；相反，設計師使用下面的 CSS 3 多欄佈局：

  .index #content div { 
      -webkit-column-count : 4 ; 
      -webkit-column-gap : 20px ; 
      -moz-column-count : 4 ; 
      -moz-column-gap : 20px ; 
      }

　　我們可以通過這個選擇器定義三件事情：欄數( column-count )、欄寬( column-width 、例子中沒有用到)和各欄之間的空白/間距( column-gap )。 如果 column-count 未設定，瀏覽器會在允許的寬度內容納盡可能多的欄目。

　　為了在各欄時間添加一個數值的分隔，我們可以使用 column-rule 屬性，其功能和 border 屬性類似:

  div { 
      column-rule : 1px solid #00000 ; 
      }

　　上面的這條屬性，瀏覽器中不會看到任何效果，因為它没有分欄，如果配合上面的例子就可以了。

　　相關屬性: column-break-after , column-break-before , column-span , column-fill。

　　瀏覽器支持:多欄佈局目前被Safari 3+，chrome，和Firefox 1.5+所支持。

擴展閱讀：

　　‧CSS3系列教程:多列/多卷
　　‧CSS3 module: Multi-column layout: W3C Working Draft
　　‧Columns
　　‧CSS3 – Multi-Column Layout Demonstration
　　‧CSS3 Columns
　　‧Designing tweetCC
　　‧Introduction to CSS3 – Part 5: Multiple Columns

4)多背景圖

　　CSS 3 允許你使用多個屬性比如 background-image 、 background-repeat，background-size，background-position，background-origin and background-clip 等在一個元素上添加多層背景圖片。

　　在一個元素上添加多背景的最簡單的方法是使用簡寫代碼，你可以指定上面的所有屬性到一條聲明中，只是最常用的還是 image，position 和 repeat:

div { 
	  background : url ( example.jpg ) top left no-repeat , 
		  url ( example2.jpg ) bottom left no-repeat , 
		  url ( example3.jpg ) center center repeat-y ; 
	  }

　　第一個圖片將是離用戶“最近”的那個。

　　該屬性的一個更複雜的版本可以是這樣的：

div { 
	  background : url ( example.jpg ) top left ( 100 % 2em ) no-repeat , 
		  url ( example2.jpg ) bottom left ( 100 % 2em ) no-repeat , 
		  url ( example3.jpg ) center center ( 10em 10em ) repeat-y ; 
	  }

　　在這裡，(100% 2em)是 background-size 的值；第一個背景圖片將會出現在左上角並會被拉伸至該 div 的 100% 寬度和 2em 的高度。

　　因為只有少數的瀏覽器支持它，又因為在網站上不顯示背景有損網站的視覺效果，所以，這並不是一個被廣泛應用了的屬性。 儘管如此，它顯然能夠大大地提高設計師的工作流並顯著減少標籤數量——相對於用其它方式實現同樣的效果。

瀏覽器支持:目前，多背景圖片只在 Safari/chrome 和 Konqueror 中有效

擴展閱讀：

　　‧CSS3系列教程:背景圖片(背景大小和多背景圖)
　　‧Layering multiple background images
　　‧Multiple backgrounds with CSS3 and CSS3.info
　　‧Introduction to CSS3, Part 6: Backgrounds

5)Word Wrap

　　word-wrap 屬性用來防止太長的字符串溢出的。可以用兩個屬性值 normal 和 break-word 。normal 值(默認的)只在允許的斷點截斷文字，如連字符。如果使用了 break-word，文字可以在任何需要的地方截斷以匹配分配的空間並防止溢出。

WordPress後台在數據表中使用了word-wrap。


　　在 WordPress 的控制面板中， word-wrap 屬性被用於表格中的元素；比如在日誌和頁面的列表中：

.widefat * { 
      word-wrap : break-word ; 
      }

　　瀏覽器支持： word-wrap 被 Internet Explorer 和 Safari/chrome 支持。Firefox 將在3.5版本中支持它。

擴展閱讀：

　　‧Force Wrapping: the 'word-wrap' property — CSS Text Level 3: W3C Working Draft
　　‧word-wrap: CSS3.info
　　‧CSS word-wrap
　　‧word-wrap: Mozilla Developer Center

6)文字陰影

　　儘管在 CSS 2 中就已經存在，text-shadow 是一個未被廣泛應用的 CSS 屬性。但是它將在 CSS 3 中被廣泛採用。這個屬性給設計師一個新的跨瀏覽器的工具來為設計添加一個維度以使文字醒目。

　　儘管這樣，你需要確認，你的設計中的文字是可讀的，以防用戶的瀏覽器不支持 CSS 3 高級屬性。 給文字和背景色彩足夠的對比度以防 text-shadow 屬性不能被瀏覽器正確渲染或理解。

Beakapp在它的網站中使用了 text-shadow 屬性：內容區域。


　　BeakApp.com 為內容區域使用了 text-shadow 屬性，為文字添加深度和維度並讓它變得醒目 —— 而不是使用某種圖片替換技術。該屬性目前只在 Safari 和 Chrome 中可用。

　　該網站的主菜單使用的CSS如下：

.signup_area p {
	text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

　　這裡我們使用陰影顏色(使用了RGBA，前面有描述)，然後是右(x 坐標)和底部(y 坐標)偏移，最後是模糊半徑。

　　如果要在一個文字上使用多陰影，可以使用逗號分開。比如：

p { 
      text-shadow : red 4px 4px 2px , 
		  yellow -4px -4px 2px , 
		  green -4px 4px 2px ; 
      }

　　瀏覽器支持: Webkit 核心瀏覽器和 Opera 9.5 支持 text-shadow。Internet Explorer 不支持它，Firefox 將在即將發行的 3.5 版本中支持。

擴展閱讀：

　　‧CSS3系列教程:陰影
　　‧Text Shadows: the 'text-shadow' property — W3C Working Draft
　　‧Text shadows: Web Style Sheets CSS tips and tricks
　　‧Text-shadow, Photoshop like effects using CSS — CSS3.info
　　‧Make Cool And Clever Text Effects With CSS Text-Shadow
　　‧Safari's Text-Shadow Anti-Aliasing CSS Hack
　　‧text-shadow
　　‧text-shadow: Mozilla Developer Center

7)@font-face屬性

　　儘管是最被期待的 CSS 3 特性 (甚至它在 CSS 2 中就已經被引入了)，@font-face 在網站上仍然沒有像其它 CSS 3 屬性那樣被廣泛採用，這主要因為字體授權和版權問題：嵌入的字體很容易從網站上下載到，這是字體廠商的主要顧慮。

　　儘管如此，授權我呢提貌似已經開始解決了。TypeKit 承諾將製定一個方案，以使設計師和字體廠商更容易的統一授權問題，這將顯著的充實網站設計中的排版並使 @font-face 屬性在實際工作中可用。

Mozilla 實驗室 JetPack 網站採用 font-face 規則來使用 DroidSans 字體。


　　少數使用該屬性的網站之一是新上線的 JetPack MozillaLabs。

@font-face{ 
      font-family : 'DroidSans' ; 
      src : url ( '../fonts/DroidSans.ttf' ) format ( 'truetype' ) ; 
      }

　　要想在你的網站中使用嵌入字體，你必須獨立的生命每個樣式(比如，normal、bold 和 italic )。 請確保只使用被授權為使用到網站的字體並在需要的時候給字體的設計師一些表揚。

　　在定義了 @font-face 規則之後，你就可以用普通的 font-family 屬性來引用該字體了：

p { 
      font-family : "DroidSans" ; 
      }

　　如果一個瀏覽器不支持 @font-face，它將使用 font-family (CSS 字體庫)屬性中指定的下一個字體。 對支持的瀏覽器來說，如果 @font-face 字體是一個奢侈品（只有少數元素用到），這對一些網站是可行的；但是如果該字體在設計中佔有一個主要的角色或者是公司的視覺特徵的一部分，你就可能想使用其它的解決方案，比如 sIFR 或 Cufón。儘管如此，請記住，這些工具對標題或較短的文字更適合，複製和粘貼此類內容比較困難而且對用戶並不友好。

在網站中使用此類字體不是很好嗎？ Dave Shea 使用 Cufón 和 Museo Sans 來做的實驗。 很漂亮！


　　瀏覽器支持: @font-face 被 Safari 3.1+ 和 chrome 支持。 Internet Explorer 支持 EOT 字體。Opera 10 和 Firefox 3.5 將會支持它。

擴展閱讀：

　　‧CSS3系列教程:嵌入字體/網絡字體
　　‧Font Descriptions and @font-face — W3C Working Draft
　　‧Web fonts with @font-face
　　‧@font-face — Sitepoint
　　‧Fonts available for @font-face embedding
　　‧@font-face
　　‧beautiful fonts with @font-face
　　‧Introducing Typekit

    «« 如何在 IE 中使用 HTML 5 元素 於文章中嵌入自訂的FLV/MP4播放器 »»    

專題

引用

  • 文章地址： http://waterlily-lsl.com/modules/article/view.article.php/c2/189
  • 引用地址： http://waterlily-lsl.com/modules/article/trackback.php/189

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 用 CSS 3 將你的設計帶入下個高度
goldhouse

網友

註冊: 09年7月22日
回覆數: 7

發表日期: 09/7/23 1:30  更新日期: 09/7/23 1:30


看來各家若能好好坐下來 將之統一化
則大家就不用那麼辛苦了
調了這個 那個又不行 真素的！

另外 蓮香的code背景圖那一區塊 如果也想要自訂一個元素 就可以實現 那個元素該要如何定義？

就是類似
<code> 我的內容 </code>

這區塊裡頭 就有我想要的背景 高度是隨著內容而擴展的

之前友看到您這裡的文章是說可以用java創建元素的方式來達到

只是具體作法是如何呢？

那您這裡是怎樣做到的呢？

對不起喔！我的問題很多～自己也慢慢再學！謝謝您～

回覆

 用 CSS 3 將你的設計帶入下個高度
睡蓮

網主

註冊: 08年3月21日
來自: 池水間
回覆數: 404

發表日期: 09/7/23 21:41  更新日期: 09/7/23 21:41


看來各家若能好好坐下來 將之統一化
則大家就不用那麼辛苦了
調了這個 那個又不行 真素的！

不好意思，我沒看懂您說的意思

另外 蓮香的code背景圖那一區塊 如果也想要自訂一個元素 就可以實現 那個元素該要如何定義？

就是類似
<code> 我的內容 </code>

這區塊裡頭 就有我想要的背景 高度是隨著內容而擴展的

作法可以有很多，簡簡單單給元素設背景圖也是一樣可以，就看您要用的是什麼背景圖
不過我看您的blog 裡有在用textarea 元素來顯示代碼
您是要在這區塊裡顯示背景圖嗎？

高度方面您只要不給它設定高度，它是會隨著內容多寡自動擴展

之前友看到您這裡的文章是說可以用java創建元素的方式來達到

只是具體作法是如何呢？

那您這裡是怎樣做到的呢？


您說的文章是指作者懌飛的那篇「如何在 IE 中使用 HTML 5 元素 嗎？」
如果是的話，您的blog目前的 DOCTYPE 是用 HTML 4.01 Transitional，用 html 5 元素在大多瀏覽器下是不會看到效果的。

我這站還沒有用到 html 5 元素，目前使用的 DOCTYPE 是 XHTML 1.1

另外，您在上面說的 java 其實和 javascript 是兩種不同的程式語言，別搞混哦。

回覆

 用 CSS 3 將你的設計帶入下個高度
goldhouse

網友

註冊: 09年7月22日
回覆數: 7

發表日期: 09/7/24 0:03  更新日期: 09/7/24 0:03


我覺得這邊的文章裡或者是回覆內容,都會有一個紫色的框框,比如這篇文章回覆的部份站長的專用回覆欄,quote的文字,想知道這個樣怎樣實現呢？

回覆

 用 CSS 3 將你的設計帶入下個高度
睡蓮

網主

註冊: 08年3月21日
來自: 池水間
回覆數: 404

發表日期: 09/7/24 13:07  更新日期: 09/7/24 13:08


那是系統內建，不是只有我專用，任何發表回覆者也一樣可以用的到

回覆

 

最 新 發 表 及 資 訊 區

最新公告

此為池水間 banner ，需要安裝 Adobe Flash Player 才能觀看內容。

文章分類

最新浮生錄文章

最新留言

最新留言：2012-Jan-6　11:13am
留言編號：76
留言者： wuji888
網主回覆： 有
總留言數： 71

前往萍踪留影

造訪統計

今天：596
昨天：544
本週：596
本月：6436
總計：376820
平均：292

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
登 入