<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[wowbox blog (網頁設計知識庫)]]></title>
<link>http://www.wowbox.com.tw/blog/</link>
<description><![CDATA[提供網頁設計相關資訊，CSS、JavaScri&#112;t、FLASH...]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog2 v2.4]]></copyright>
<webMaster><![CDATA[hanher@hotmail.com(hanher)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>wowbox blog (網頁設計知識庫)</title> 
	<url>http://www.wowbox.com.tw/blog/images/logos.gif</url> 
	<link>http://www.wowbox.com.tw/blog/</link> 
	<description>wowbox blog (網頁設計知識庫)</description> 
</image>

			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3469</link>
			<title><![CDATA[CSS 3.0 參考手冊 (中文版)]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[CSS Design]]></category>
			<pubDate>Sun,28 Feb 2010 21:41:50 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3469</guid>	
		<description><![CDATA[<img src="http://www.wowbox.com.tw/blog/attachments/month_1002/q201022821400.png" border="0" alt=""/><br/><br/>大陸網友，利用業餘時間整理出了一份比較完整的CSS 3.0 參考手冊，非常不容易。手冊是根據W3C的CSS3草案翻譯，並且結合實際的示範結合而成。每一頁都傾注了每一個同學的心血。 <br/><br/>預覽頁面：<br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/c201022821407.png" border="0" alt=""/><br/><br/>原始發佈處下載地址： <a href="http://webteam.tencent.com/css3/" target="_blank">http://webteam.tencent.com/css3/</a><br/><br/><img src="http://www.wowbox.com.tw/blog/images/download.gif" alt="下載文件" style="margin:0px 2px -4px 0px"/> <a href="http://www.wowbox.com.tw/blog/attachments/month_1002/k2010228214113.zip" target="_blank">本地下載，點擊下載此文件</a><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3468</link>
			<title><![CDATA[IE9 前瞻]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[網際網路]]></category>
			<pubDate>Sun,28 Feb 2010 21:36:21 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3468</guid>	
		<description><![CDATA[雖然IE6在依然是很重要的瀏覽器，但是我們不能放棄關注未來ie的變化。<br/><br/>IE9 的幾個關鍵字： <a target="_blank" href="http://channel9.msdn.com/posts/Charles/IE-9-Surfing-on-the-GPU-with-D2D/">硬件渲染</a>，<a target="_blank" href="http://channel9.msdn.com/posts/Charles/IE-9-First-look-at-the-new-JS-Engine/">新的JS引擎</a>，CSS，<a target="_blank" href="http://channel9.msdn.com/posts/Charles/IE-9-Standards-and-Interoperability/">標準</a><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/j2010228213238.png" border="0" alt=""/><br/><br/>大家期待已久的圓角也將支持了 <br/><br/>不過這裡最讓大家期待的是硬件渲染(視頻演示看這裡)的支持。這可以讓瀏覽器性能提高一個很高的檔次。<br/><br/>關於新的腳本引擎可以用下圖來說明，這個測試是用著名的SunSpider來測試的<br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/72010228213243.png" border="0" alt=""/><br/><br/>更多信息可以從<a target="_blank" href="http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx">官方博客</a>得到]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3467</link>
			<title><![CDATA[微軟試驗性瀏覽器 Pivot 體驗]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[網際網路]]></category>
			<pubDate>Sun,28 Feb 2010 21:29:56 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3467</guid>	
		<description><![CDATA[微軟實驗室發佈了新一代的Pivot瀏覽器，當然瀏覽器核心沒什麼變化(看了一下userAgent看到還是ie的核心)，主要是給未來瀏覽器的一些體驗提供了一些參考。以往的Tab導航被移動到了 下方，界面上的tab，收藏都是可以拖拽的。 <br/><br/>當然Pivot的重點功能在歷史功能和相片瀏覽功能。這兩個功能都可以 通過多種方式對相片進行索引和瀏覽。目前Pivot還在邀請測試階段。另外 Pivot不支持XP瀏覽器，而且vista和win7以上還必須支持Aero 界面的硬件支持。不知道Pivot會不會Copy到未來的IE9里面呢？<br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/t2010228212734.png" border="0" alt=""/><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/a2010228212741.png" border="0" alt=""/><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/x2010228212748.png" border="0" alt=""/><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/l2010228212755.png" border="0" alt=""/><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1002/z201022821285.png" border="0" alt=""/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3466</link>
			<title><![CDATA[虎年新年簡訊祝賀詞及虎年吉祥話 ]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[休閒養生]]></category>
			<pubDate>Sun,14 Feb 2010 16:02:52 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3466</guid>	
		<description><![CDATA[虎年到了，希望大家新的一年都能事事順利平平安安，在對岸網站收集了很多與虎年相關的成語以及虎年吉祥話，這在過年的時後拿來發虎年簡訊祝賀詞最好用了。以下是虎年成語吉祥話大匯總大家參考參考。<br/><br/>虎年祝你財源滾滾，發得象肥虎，身體壯的象頭虎 ，愛情甜的象奶虎，好運多的象虎毛，事業蒸蒸象大虎！ <br/><br/>新春佳節， 祝你虎年大吉大利，大顯身手，虎氣沖天！<br/>晨曦出現的第一縷陽光是我對您的深深祝福，夕陽收起的最後一抹嫣紅是我對您的忠心問候。在除夕來臨之際，送上我真摯祝福：虎年快樂！<br/><br/>如期而至的不僅僅是節日，還有幸福和快樂。日漸增加的不僅是年齡，還有友情和健康。我的心裏一如既往深深祝福:虎年萬事如意！<br/><br/>牛尾系著金攏財氣，虎首搖著鈴蕩福音。風追逐著春天的行蹤，雪漫步著溫馨的海洋，燈點亮了回家的路程，無論你在遠在近，我的祝福已經起航；祝你虎年快樂！<br/><br/>總有起風的清晨，總有溫暖的午後，總有燦爛的黃昏，總有流星的夜晚，總有一個人在祈禱世界上所有的美好全部屬於你！祝你虎年快樂，心想事成！<br/><br/>新春福虎送吉祥，金虎進家富滿堂，肥虎祝你壽延長，奶虎為你送健康，耕虎願你糧滿倉，紅虎祝你事業旺，虎郎望你愛情長！<br/><br/>在新的一年祝大家虎年大吉，虎氣沖天！身體健康如虎！總之一切虎！虎！虎！<br/><br/>虎年到來，祝您：逢虎年，辦虎事，做虎人，走虎運，發虎財，虎氣沖天嗷嗷叫，生活幸福哈哈笑，去年的心情還不壞，今年的日子更精彩！<br/><br/>以上是俗氣的很實惠的，還有文雅的。雅俗共賞的！<br/><br/>給你虎虎的祝福，虎虎的甜蜜，虎虎的運氣，虎虎的健康，虎虎的快樂，虎虎的心情，虎虎的欣慰，虎虎的順利，虎虎的幸福，虎虎的人生！<br/><br/>虎年送頭虎，全家樂悠悠。虎蹄為你開財路，虎尾為你拂憂愁，虎耳為你撞鴻運，虎背為你馱康壽，讓這頭虎伴你左右，你不虎也虎！<br/><br/><strong>虎年成語：</strong><br/><br/>人中龍虎 比喻人中豪傑。<br/>虎超龍驤 比喻群雄奮起，互相角逐。<br/>虎變龍蒸 指乘時變化而飛黃騰達。<br/>初生之犢不畏虎 比喻閱世不深的青年人敢說敢幹，無所畏懼。<br/>眾虎同心 許多虎一條心做事。比喻眾多有本事的人團結一致，力量會更大。<br/><br/>燕頷虎須 形容相貌威武。②借指武將、勇士。<br/>繡虎雕龍 比喻文章的辭藻華麗。<br/>熊腰虎背 腰粗壯如熊，背寬厚如虎。形容人身體魁梧健壯。<br/>如龍似虎 形容勇猛有活力。<br/>如虎生翼 好象老虎生出翅膀。比喻因增加新助力，強者愈強，惡者愈惡。<br/>敲山振虎 謂故意示警，使人震動。<br/><br/>潛龍伏虎 潛藏的蛟龍，潛伏的猛虎。比喻人才尚未被擢用。<br/>猛虎出山 像兇猛的老虎出山一樣。形容動作勇猛又快速。<br/>龍行虎變 《易•幹》：“飛龍在天……雲從龍。風從虎，聖人作而萬物睹。”又《革》：“大人虎變。”孔穎達疏：“損益前王，創制立法，有文章之美，煥然可觀，有似虎變，其文彪炳。”後遂以“龍行虎變”喻帝王革故鼎新，創制建業。<br/><br/>龍翔虎躍 喻奮發有為。<br/>龍驤虎嘯 喻氣概威武。<br/>龍威虎震 形容氣勢奔放雄壯。常形容書法筆勢的遒勁有力，靈活舒展。<br/>龍跳虎伏 猶言龍騰虎臥。喻筆勢。<br/>龍騰虎嘯 聲勢壯盛貌。<br/><br/>龍騰虎踞 勢力強盛，雄據一方。<br/>龍騰虎蹴 喻勇猛衝擊，勢不可當。<br/>龍跧虎臥 猶言龍蟠虎踞。喻山勢逶迤起伏。<br/>龍盤虎拏 虯曲蒼勁貌。<br/>龍拏虎攫 猶言龍爭虎鬥。喻筆勢遒勁、奔放。<br/><br/>龍精虎猛 喻精力旺盛，鬥志昂揚。<br/>龍虎風雲 ①《易•幹》：“雲從龍，風從虎。”後以“龍虎風雲”喻英雄豪傑際遇得時。②指君臣遇合。<br/>龍飛虎跳 喻筆勢遒勁奔放。<br/>龍幡虎纛 將帥之旗。<br/>麟角虎翅 麟之角，虎之翅。比喻世間不可多得的人才。<br/><br/>酒虎詩龍 比喻嗜酒善飲、才高能詩的人。<br/>虎步龍行 原形容帝王的儀態不同一般。後也形容將軍的英武姿態。<br/>鳳歎虎視 形容談吐文雅，器宇軒昂。<br/>鷹揚虎視 象鷹那樣飛翔，如虎一般雄視。形容十分威武。<br/>燕頷虎頸 頷：下巴頦。舊時形容王侯的貴相或武將相貌的威武。<br/><br/>臥虎藏龍 指隱藏著未被發現的人才，也指隱藏不露的人才。<br/>生龍活虎 形容活潑矯健，富有生氣<br/>龍跳虎臥 比喻文筆、書法縱逸雄勁。<br/>龍吟虎嘯 象龍在鳴，虎在嘯。比喻相關的事物互相感應。也形容人發跡。<br/>龍驤虎步 象龍馬昂首，如老虎邁步。形容氣慨威武雄壯。<br/><br/>生龍活虎 活潑壯勇的姿態。<br/>九牛二虎 喻極大的力量<br/><br/><strong>虎年祝福對聯：</strong><br/><br/>◎春光萬道、虎威千山<br/>◎春日春起色 、虎年虎生威 <br/>◎歲是春作首、虎是百獸王<br/>◎新年生虎氣、祖國起龍圖<br/>◎虎膽英雄氣、龍魂志士心<br/>◎道祖騎牛去、趙公跨虎來<br/>◎宏謀抒虎嘯、士氣奮鷹揚<br/>◎山嵐呈虎性、春色暖人心<br/>◎春風春起色、虎歲壯虎威<br/>◎燕飛水花俏 、虎躍山勢雄 <br/>◎龍引千江水、虎越萬重山<br/>◎虎躍龍騰碧海、鶯歌燕舞春風<br/>◎人間喜慶康平世、虎歲承歡幸福春<br/>◎虎躍龍騰生紫氣、風調雨順兆豐年<br/>◎一代英豪生虎氣、三春楊柳動鶯歌<br/>◎江山一統騰龍日、歲月三春入虎年<br/>◎虎踞龍盤今勝昔、花香鳥語舊更新<br/>◎春光春色源春意、虎將虎年揚虎威<br/>◎人入虎年增虎勁、門添春色發春輝<br/>◎醜舊寅新宏圖展 、牛歸虎躍春意濃 <br/>◎醜去寅來人益健 、牛奔虎躍春愈新 <br/>◎人入虎年鼓虎勁 、景添春色揚春輝 <br/>◎中華虎年虎添翼、神州龍驤龍騰空<br/>◎龍騰虎躍人間樂、鳥語花香天下春<br/>◎虎步龍驤，一代英才造氣勢鵬飛鯤擊，千年古國炳新篇<br/>◎春到人間，虎虎添生氣、日煊赤縣，熊熊炳壯姿<br/>◎虎躍龍騰一代英雄造時勢、山明水秀萬里春色泛桃花<br/>◎乘春風春雨播遍地春色、鼓虎年虎勁創驚天宏圖<br/>◎虎躍龍騰碧海黃山妝玉宇 、鶯歌燕舞春風旭日蔚神州<br/><br/><strong>虎年祝福短信</strong><br/><br/>◎虎年送頭虎，全家樂悠悠。虎蹄為你開財路，虎尾為你拂憂愁，虎耳為你撞鴻運，虎背為你馱康壽，讓這頭虎伴你左右，你不虎也虎！<br/><br/>◎虎年祝你財源滾滾，發得象肥虎，身體壯的象頭虎 ，愛情甜的象奶虎，好運多的象虎毛，事業蒸蒸象大虎！ <br/><br/>◎新春佳節， 祝你虎年大吉大利，大顯身手，虎氣沖天！<br/><br/>◎新春福虎送吉祥，金虎進家富滿堂，肥虎祝你壽延長，奶虎為你送健康，耕虎願你糧滿倉，紅虎祝你事業旺，虎郎望你愛情長！<br/><br/>◎在新的一年祝大家虎年大吉，虎氣沖天！身體健康如虎！總之一切虎！虎！虎！<br/><br/>◎虎年到來，祝您：逢虎年，辦虎事，做虎人，走虎運，發虎財，虎氣沖天嗷嗷叫，生活幸福哈哈笑，去年的心情還不壞，今年的日子更精彩！<br/><br/>◎以上是俗氣的很實惠的，還有文雅的。雅俗共賞的！<br/><br/>◎牛尾系著金攏財氣，虎首搖著鈴蕩福音。風追逐著春天的行蹤，雪漫步著溫馨的海洋，燈點亮了回家的路程，無論你在遠在近，我的祝福已經起航；祝你虎年快樂！]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3465</link>
			<title><![CDATA[CSS圓角 - 圓角化圖片  ]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[CSS Design]]></category>
			<pubDate>Sun,31 Jan 2010 04:44:43 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3465</guid>	
		<description><![CDATA[我們將一張上下漸變的的圖片作為標題的背景，並將它應用了圓角效果。是不是這種圓角框只能用於比較單調的圖片呢？我們還能將一些顏色比較豐富的圖片也進行透明圓角化嗎？<br/><br/>答案是肯定的，下面看看它的終極功夫。<br/><br/>還是先看最終效果圖吧：<br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1001/k201013144319.jpg" border="0" alt=""/><br/><br/>看到了吧，這就是用純CSS實現的圓角化圖片，為了能看到透明化的效果，我特意應用了一個背景圖片，你可以下載本模型到你的電腦中，隨意伸縮窗口的大小，看看外圓角是否是透明的。<br/><br/>有了這種效果，你再也不愁給每一張圖片作圓角的工作，這種效果在一些圖片類的演示頁面中經常見到，特別適用那些圖片比較多的列表中。怎麼樣，效果還可以吧！<br/><br/>好了，我們來看看它的實現機制吧！ <br/><br/>實現原理：<br/><br/>這種效果其實就是我在第二章中變體實現，下面講一講主要的關鍵代碼。<br/>主要變化的還是背景圖片的定位，只是這一次與第二章中的有些不同，這次需要考慮到下面的兩個圓角的變化。<br/><br/>先看看上面兩個圓角的實現：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">/*圖片偏移定位--上面部分*/<br/>.sharp b.b2{background-position:-4px top;}<br/>.sharp b.b3{background-position:-2px -1px;}<br/>.sharp b.b4{background-position:-1px -2px;}</div></div><br/><br/>再看看下面兩個圓角的樣式設置，下面部分和上面部分是相互對應的。<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">/*圖片偏移定位--下面部分*/<br/>.sharp b.b7{background-position:-4px bottom;}<br/>.sharp b.b6{background-position:-2px bottom;}<br/>.sharp b.b5{background-position:-1px bottom;}</div></div><br/><br/>不同的圖片調用樣式：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">/*顏色方案一,綠色風格----------------------------------------*/<br/>/*邊框色*/<br/>.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,<br/>.color1 .b7,.color1 .content{border-color:#262626;}<br/>.color1 .b1,.color1 .b8{background:#262626;}<br/>/*圖片路徑*/<br/>.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no-repeat;}</div></div><br/>前面兩句共同構成邊線框的顏色值，需要設置成同一個色值，後面的一句設置圖片的調用路徑。<br/><br/>三句話就搞定一種顏色方案了。 ]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3464</link>
			<title><![CDATA[CSS3+HTML5 實現未來Web設計 ]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[WEB Design]]></category>
			<pubDate>Sun,31 Jan 2010 04:40:14 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3464</guid>	
		<description><![CDATA[<img src="http://www.wowbox.com.tw/blog/attachments/month_1001/7201013142718.jpg" border="0" alt=""/><br/><br/>CSS3 + HTML5是未來的Web，它們都還沒有正式到來，雖然不少瀏覽器已經開始對它們提供部分支持。本文介紹了5個CSS3技巧，可以幫你實現未來的Web，不過，這些技術不應該用在正式的客戶項目，它們更適合你的個人博客站點，Web 設計社區，或者不會有客戶向你投訴的場合。<br/><br/><strong>1. 圓角效果</strong><br/><br/><br/>CSS3 新功能中最常用的一項是圓角效果，標準 HTML 方塊對象是90度方角的，CSS3 可以幫你實現圓角。<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">-moz-border-radius: 20px;<br/>-webkit-border-radius: 20px;<br/>border-radius: 20px; </div></div><br/>甚至單個角也可以實現圓角，不過 Mozilla 和 Webkit 的語法稍有不同：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; </div></div><br/>所支持的瀏覽器：Firefox, Safari , Chrome <br/>用例：<a target="_blank" href="http://twitter.com/">Twitter</a><br/>請參閱：<br/><a target="_blank" href="http://www.w3.org/TR/css3-background/#the-border-radius">W3C Working Draft</a> <br/><a target="_blank" href="http://www.css3.info/preview/rounded-border/">Border-radius on CSS3.info</a> <br/><a target="_blank" href="http://www.the-art-of-web.com/css/border-radius/">The Art of Web </a><br/><br/><strong>2. 圖形化邊界</strong><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1001/n201013142724.jpg" border="0" alt=""/><br/><br/>顧名思義，圖形化邊界就是允許使用圖片作為對象的邊界，語法如下：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat; </div></div><br/>這裡，border: 5px 設定了邊界的寬度，然後，每個邊界的圖片定義告訴瀏覽器，使用圖片的多大一部分來充當邊界。邊界圖片還可以針對每一條邊單獨設置：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">border-bottom-right-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-right-image border-right-image </div></div><br/>支持的瀏覽器： Firefox 3.1, Safari , Chrome. <br/>用例：<a target="_blank" href="http://www.blog.spoongraphics.co.uk/">Blog.SpoonGraphics</a>.<br/>請參考：<br/><a target="_blank" href="http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri">W3C Working Draft </a><br/><a target="_blank" href="http://www.css3.info/preview/border-image/">Border-image on CSS3.info</a> <br/><a target="_blank" href="http://ejohn.org/blog/border-image-in-firefox/">Border-image in Firefox </a><br/> <br/><strong>3. 塊陰影與文字陰影</strong><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1001/7201013143137.jpg" border="0" alt=""/><br/><br/>陰影效果曾讓 Web 設計師既愛又恨，現在，有了 CSS3，你不再需要 Photoshop，已經有網站在使用這個功能了，如 <a target="_blank" href="http://24ways.org/">24 Ways website</a>.<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;</div></div><br/>前兩個屬性設置陰影的 X / Y 位移，這裡分別是 10px，第3個屬性定義陰影的虛化程度，最後一個設置陰影的顏色。文字陰影也可以這樣設置：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">text-shadow: 2px 2px 5px #ccc;</div></div><br/>支持的瀏覽器：Firefox 3.1, Safari, Chrome (只支持 Box 陰影) ，Opera (只支持文字陰影).前3個數字表示紅綠藍三色的值，最後一個值代表透明度，另外，我們還可以使用 opacity 實現透明度（目前的燈箱效果多使用該技巧 – 譯者） <br/>用例：<a target="_blank" href="http://24ways.org/">24 Ways</a>.<br/>請參考：<br/><a target="_blank" href="http://www.w3.org/TR/css3-background/#the-box-shadow">W3C Working Draft </a><br/><a target="_blank" href="http://www.css3.info/preview/box-shadow/">Box-shadow on CSS3.info</a> <br/><a target="_blank" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows">W3C Working Draft </a><br/><a target="_blank" href="http://www.css3.info/preview/text-shadow/">Text-shadow on CSS3.info</a> <br/><br/><strong>4. 使用 RGBA 實現透明效果</strong><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1001/c201013143142.jpg" border="0" alt=""/><br/><br/>目前，<a target="_blank" href="http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/">Web 設計中的透明效果主要靠 PNG 圖片實現</a>（但在 IE 瀏覽器支持得並不好 – 譯者），在 CSS3，可以直接實現透明效果。<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">rgba(200, 54, 54, 0.5);<br/>/* example: */<br/>background: rgba(200, 54, 54, 0.5);<br/>/* o&#114; */<br/>color: rgba(200, 54, 54, 0.5);&nbsp;&nbsp;color: #000;<br/>opacity: 0.5;</div></div><br/>支持的瀏覽器： Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes). <br/>用例：<a target="_blank" href="http://24ways.org/">24 Ways </a>(RGBA).<br/>請參考：<br/><a target="_blank" href="http://www.w3.org/TR/css3-color/#rgba-color">W3C Working Draft</a> <br/><a target="_blank" href="http://www.css3.info/preview/rgba/">RGBA on CSS3.info</a> <br/><a target="_blank" href="http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children">Pure CSS Opacity</a> <br/><br/><strong>5. 使用 @Font-Face 實現定制字體</strong><br/><br/><img src="http://www.wowbox.com.tw/blog/attachments/month_1001/e201013143614.jpg" border="0" alt=""/><br/><br/>Web 設計中有幾種字體是比較安全的，如 Arial,Helvetica, Verdana, Georgia, Comic Sans （中文的，一般來說細明體是唯一安全的 – 譯者），現在，使用 CSS3 的 @font-face 可以自己指定字體，不過因為牽扯到版權問題，實際能用的字體也是有限的 (另外，體積龐大的中文字體也是一個不好解決的問題 – 譯者)。<br/><br/>語法如下：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">@font-face {<br/>font-family:&#39;Anivers&#39;;<br/>src: url(&#39;/images/Anivers.otf&#39;) format(&#39;opentype&#39;);<br/>}</div></div><br/>支持的瀏覽器： Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折，如果你不怕麻煩，可以在 IE 實現這個功能，請參考： <a target="_blank" href="http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work">make font-face work in IE </a>) <br/>用例：<a target="_blank" href="http://www.taptaptap.com/">TapTapTap</a>.<br/>請參閱：<br/><a target="_blank" href="http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_emb&#101;dding">Fonts available for font-face embedding</a> <br/><a target="_blank" href="http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work">Font-face in IE, making Web fonts work</a> <br/><a target="_blank" href="http://www.alistapart.com/articles/cssatten">Web fonts, the next big thing – A List Apart</a> <br/><br/>雖然 CSS3 尚在開發中，上面提到的這些功能已經可以在部分瀏覽器中使用了，尤其是 Safari。不幸的是，<a target="_blank" href="http://www.apple.com/safari/">Safari</a> 並非主流瀏覽器。<br/><br/><a target="_blank" href="http://getfirefox.com/">Firefox</a> 目前擁有大量用戶基礎，另外，即將推出的 Firefox 3.1 支持不少 CSS3 效果，因為 Firefox 用戶的升級積極性很高，因此，會有不少用戶可以提前體驗 CSS3 的新功能。<br/><br/><a target="_blank" href="http://www.google.com/chrome">Google Chrome</a> 今年剛剛發佈，它基於 Webkit 引擎，因此和 Safari 很相似，因為 Safari 主要用於 Mac 市場，Chrome 可以正好彌補 Windows 市場的空缺。<br/><br/>根據<a target="_blank" href="http://www.w3schools.com/browsers/browsers_stats.asp">統計數據</a>，2008 年11月止，44.2% 的用戶使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari，意味著 CSS3 的部分功能已經可以支持近半 Internet 用戶，而在 Web 設計圈子，這個比例可能更高，大約有 73.6% （<a target="_blank" href="http://www.blog.spoongraphics.co.uk/">Blog.SpoonGraphics </a>提供的數據）<br/><br/><strong>6. 負面因素</strong><br/><br/>上面講述的這些 CSS3 功能會給你的網站帶來出色的效果，但仍有一些負面的因素必須考慮：<br/><br/><strong>Internet Explorer：</strong>46% 的 Internet 無法看到這些效果，因此不要將這些東西用於重要的設計。同時保證，在這些效果不起作用的地方，有替代設計可用。 <br/><br/><strong>CSS 驗證問題：</strong>這些 CSS3 功能並非最終版本，目前不同的瀏覽器使用不同標籤實現這些功能，可能為你的 Style Sheet 帶來驗證上的問題。 <br/><br/><strong>臃腫代碼：</strong>因為不同瀏覽器要使用不同定義語法，最終將導致你的 CSS 代碼十分臃腫。 <br/>不當的使用: 對這些效果的不當使用，可能帶來一些不良後果，陰影效果尤其如此。 <br/><br/>英文原文：<a target="_blank" href="http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/">Push Your Web Design Into The Future With CSS3</a>]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3463</link>
			<title><![CDATA[跑馬燈語法]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[WEB Design]]></category>
			<pubDate>Wed,06 Jan 2010 19:42:41 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3463</guid>	
		<description><![CDATA[<strong>文字框跑馬燈</strong><br/><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wowbox.com.tw/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代碼"/> 程序代碼</div><div class="UBBContent">&lt;div align=&#34;center&#34;&gt;<br/>&lt;table style=&#34;color:white; font-size:10pt&#34; border=&#34;1&#34; style=&#34;color:white; font-size:10pt&#34; bordercolor=&#34;#FF9900&#34;&gt;<br/>&lt;td background=&#34;圖檔網址.gif&#34;&gt;<br/>&lt;p&gt;<br/>&lt;font color=&#34;#FFFF00&#34; face=&#34;新細明體&#34; size=&#34;2&#34;&gt;<br/>&lt;marquee scrollamount=&#39;2&#39; scrolldelay=&#39;150&#39; direction= &#39;up&#39; width=&#39;105&#39; id=xiaoqing height=&#39;120&#39; onmouseover=xiaoqing.stop() <br/>onmouseout=xiaoqing.start() style=&#34;color: #0000FF; font-size: 10pt; font-weight: bold; font-family:新細明體&#34;&gt;文字跑馬燈公告欄&lt;br&gt;在這輸入文字內容&lt;br&gt;&lt;/marquee&gt;<br/>&lt;/font&gt;&lt;/td&gt;&lt;/table&gt; </div></div><br/><br/>div align=&#34;center&#34;&gt;→文字公告欄置中<br/>center=居中；left=靠左；right=靠右<br/><br/>&lt;table style=&#34;color:white; font-size:10pt&#34; border=&#34;1&#34; style=&#34;color:white; font-size:10pt&#34;<br/><br/>color:white →公告欄背景白色<br/><br/>bordercolor=&#34;#FF9900&#34;&gt;→框線顏色(橘色)<br/><br/><br/>&lt;td background=&#34;圖檔網址.gif&#34;&gt;→可有可無<br/><br/>&lt;p&gt;<br/>&lt;font color=&#34;#FFFF00&#34; →公告欄內容文字顏色(藍色)<br/><br/>face=&#34;新細明體&#34; size=&#34;2&#34;&gt;→文字 字體 大小<br/><br/>&lt;marquee scrollamount=&#39;2&#39; scrolldelay=&#39;150&#39; →跑馬燈速度 數值越大跑越慢<br/><br/>direction= &#39;up&#39; →文字跑馬燈向上<br/><br/>跑馬燈移動： <br/><br/>往左=left <br/>往右=right <br/>往上=up<br/>往下=down<br/>左右=alt&#101;rnate<br/><br/>width=&#39;105&#39; id=xiaoqing height=&#39;120&#39; →跑馬燈公告欄寬高<br/><br/>onmouseover=xiaoqing.stop() <br/>onmouseout=xiaoqing.start() style=&#34;color: #0000FF; font-size: 10pt; font-weight: bold; font-family:新細明體&#34;&gt;文字跑馬燈公告欄&lt;br&gt;在這輸入文字內容&lt;br&gt;&lt;/marquee&gt;<br/>&lt;/font&gt;&lt;/td&gt;&lt;/table&gt;<br/><br/>&lt;br&gt;跳行語法]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3462</link>
			<title><![CDATA[用jQuery來做個頁框的版型！]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[JAVASCRIPT]]></category>
			<pubDate>Wed,06 Jan 2010 19:38:19 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3462</guid>	
		<description><![CDATA[<img src="http://www.wowbox.com.tw/blog/attachments/month_1001/v201016193317.jpg" border="0" alt=""/><br/><br/><a target="_blank" href="http://layout.jquery-dev.net/index.cfm">jQuery UI.Layout Plug-in</a><br/><br/>jQuery UI.Layout Plug-in對於前端網頁的操作非常有幫助，對於不是很懂CSS的人，很適合用來做後端的操作介面！<br/><br/>jQuery UI.Layout Plug-in 有幾點不錯的功能，比較好的部分整理如下：<br/><br/>collapsable：讓pane可以自由收合，也可以加上喜歡的jQuery特效<br/>resizable：每pane都可以自由的縮放，當然也可以限制縮放的大小 <br/>hotkeys：這個選項可以讓pane利用鍵盤的方向鍵來控制，甚至自訂快速鍵 <br/><br/>有更多進階範例請直接到<a target="_blank" href="http://layout.jquery-dev.net/demos.html">demo網頁</a>去看看。<br/><br/>部分內容來自這裡：<a target="_blank" href="http://kewang.pixnet.net/blog/post/23433067">jQuery的plugin，叫做UI.Layout</a>]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3461</link>
			<title><![CDATA[驢子P2P病毒 瓦解電腦主機]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[網際網路]]></category>
			<pubDate>Mon,04 Jan 2010 17:44:43 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3461</guid>	
		<description><![CDATA[【台灣醒報記者林永富報導】使用P2P分享平台軟體「驢子」（eMule）的電腦族要小心，一種專門透過「驢子」平台傳播的蠕蟲病毒，正在逐步肆虐，受感染後將會瓦解使用者主機，主動刪除一些檔案，嚴重者甚至電腦無法作用。防毒專家建議，電腦族盡量不要使用P2P軟體及平台，並隨時更新防毒碼及掃毒。<br/><br/>防毒軟體公司賽門鐵克指出，這種透過「驢子」軟體及平台傳播的蠕蟲病毒，名為「W32.Noobert」，就是利用P2P分享平台趁機傳播病毒，能感染受害電腦主機磁片上的.exe和.scr文件。<br/><br/>當受感染電腦運作時，此一病毒會被解壓縮到暫存檔目錄下繼續傳播，嚴重的是，它還會隨機刪除以*.avi，*.xls，*.jpg ，*.doc為尾碼名的檔案，並且會透過修改登錄表 (registry key)以及修改系統檔sfc_os.dll來關閉Windows的檔案保護功能，讓使用者遭受嚴重損失。<br/><br/>防毒專家建議：使用全球安全智慧型網路，抵禦病毒威脅。建議盡量不使用P2P軟體下載檔案，若必須下載時，先掃毒確認檔案沒有惡意程式，刪除遭感染程式並修復至被感染前的狀態，保護原始檔。隨時更新最新的病毒碼，勤於掃毒以免病毒感染。]]></description>
		</item>
		
			<item>
			<link>http://www.wowbox.com.tw/blog/default.asp?id=3460</link>
			<title><![CDATA[日本人怎麼老是將新技術用在怪怪的事情上？！]]></title>
			<author>hanher@hotmail.com(Admin)</author>
			<category><![CDATA[科技與新知]]></category>
			<pubDate>Sun,03 Jan 2010 13:49:40 +0800</pubDate>
			<guid>http://www.wowbox.com.tw/blog/default.asp?id=3460</guid>	
		<description><![CDATA[<p><img alt="" src="http://www.wowbox.com.tw/blog/attachments/month_1001/p20101313495.jpg" /></p>
<p>日本人有兩點最厲害 -- 開發新技術。遊戲開發商 TEATIME（應該沒弄錯吧）稱為「tech48」的技術，將 Webcam 定位人臉的技術，結合自家的 H game(應該是色情遊戲)，讓你可以靠移動頭的位置，來改變畫面上看到的視角。這麼做能達成什麼呢？依照 Demo 影片，它讓你可以將頭低到比裙子還要低的位置，然後... <br />
<br />
想必下一階段就是結合 3D 螢幕技術了吧？ 如果可以摸得到那應該會更好...</p>
<p><embed height="344" type="application/x-shockwave-flash" width="425" src="http://www.youtube.com/v/wwaSBld4ucQ&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;hl=zh_TW&amp;feature=player_embedded&amp;fs=1" allowscriptaccess="always" allowfullscreen="true"></embed></p>]]></description>
		</item>
		
</channel>
</rss>