海岸散步,網頁設計,blog設計,psd to html,花蓮

今天是

2011-02-04T17:06:00.000-08:00

這很方便，用javascript產生出來的日期。只要把下例js貼在任一處，就行了。

JavaScript

<div id="today"><SCRIPT> 
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
var montharray=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")
document.write("<small>      <FONT color='#ffffff' FACE='Verdana'><B>今天是</FONT><FONT color='#000000' FACE='Verdana'> "+dayarray[day]+",  "+year+"年  "+montharray[month]+" "+daym+"日</B></FONT></SMALL>")
</SCRIPT> </div>

wordpress的自訂欄位

2011-01-22T06:14:00.000-08:00

這個欄位，會出現在文章撰寫的下方。有自訂的欄位名稱和欄位內容。但無論鍵入什麼內容，該文章都不會有反應，原因就是theme本身沒有把這比資料讀出來。

只要在想要出現自訂欄位內容的地方加入<?php the_meta(); ?>就會出現自訂欄位的內容了~

另外，自訂欄位的html在/wp-includes/post-template.php這個檔案中。

wordpress的theme name在style.css裡

2011-01-15T18:07:00.000-08:00

是個要改不改都可以的東西，但由於這次正要用設計一個可以讓使用者自選樣式(theme)的介面，才發現印出來的theme name都是一樣的…。

google了一下才找到，theme的所有資料都在style.css裡，很神奇。在該檔案的最上面。如圖。

就是最上面那些註解，雖然一開始也覺得不可能，但就是它。

text-overflow

2010-10-22T09:26:00.000-07:00

這也是一個很實用的css，它可以把多出區塊內的文字自動在最後加上「...』。如果IE的市占率不要這麼高的話，應該很快就可以運用在網站中了。但事實能支援的瀏灠器並不多，所以也只能先在這練一練試跑一下。
以下有兩個例子，文字的內容都是一樣超出區塊的寬度；第一個是用了text-overflow:ellipsis，在區塊結結束前出現了「...」，第二個則是一般的overflow:hidden。

這也是一個很實用的css，如果IE的市占率不要這麼高的話，應該很快就可以運用在網站中了。但事實能支援的瀏灠器並不多，所以也只能先在這練一練試跑一下。

chrome是一定可以跑的，firefox4應該也可以。如果正常的話，它跑出來的應該是類似以下這樣。

這也是一個很實用的css，如果IE...

樂活bali*希臘風情Blogger化

2010-10-03T22:59:00.000-07:00

用原本的設計，將網站整個搬到blogger來了。留言換成了disqus這個系統，還蠻受好評的！！

CSS3-BORDER-IMAGE.邊框圖片

2010-10-02T19:03:00.000-07:00

雖然說CSS3已出現非常久了，但到目前為止都只有在用border-radius和box(text)-shadow，好像CSS3只多了這兩個用處似的。

不過大多也是因為市占率最高的IE6~8都不支援CSS3所以在設計網頁時也不太想用這些大多數人都無法看到的CSS3屬性，倒至現在和CSS3整個不熟。嗯…雖然說用不太到，不過還是決定多花點時間先把CSS3練起來放好了。以下是CSS3的border-image

CSS3 border-image的寫法為border-image:url(imgurl.png) 15 round;
url後的 15是框的寬度 round側是重覆；還有另一個用法是stretch會把圖片拉長。

#border-image li{
border:#ccc solid 15px;
-webkit-border-image:url(rect3218.png) 15 15 round round;
margin-bottom:1px;
}

網站的選單最好不要在側欄

2010-09-29T23:27:00.000-07:00

設計網頁這麼久了，到今天才有這種領悟…。之前沒在意過，也沒注意過；選單到底應該在哪裡這件事。而不在意的結果就是，有不少舊的作品的選單都在左(右)側。當初設計上好像不覺得是什麼問題，但到了最近要修改舊網站才發現，這問題大了。嗯…怎麼說呢，目前發現了幾個選單設計在側欄所會碰到的問題，以下以清單表示。

每一個頁面都要出現側欄：這是當然的，因為選單是網站中非常重要的一部份，所以每一頁都要有，而選單在側欄，所以每一頁要有側欄…。而當有些頁面或許我們想要更寬的內容欄位當然我也看過有些網站的選單會隨著不同的頁面換到不同的位置，不過實在是不值得學習…。
容易造成側欄過長：因為選單通常內容也不會太少，所以，若是到了不同的頁面要在側欄放不一樣的內容就必需要在把側欄拉的更長，而側欄如果比內容欄位更長的話，版面其實是很難看的。
側欄寬度無法做大變化：選單的寬度是一定的，那如果有些頁面想要在側欄多加點內容就只能往下加，不能在加寬。

嗯…一時又想不太起來還有什麼了，想到在補上。

網址轉換中…

2010-09-25T22:51:00.000-07:00

雖然說google blogger非常好用，但想到未來還是有可能搬家，就先買了一組網址。嗯…。

主要是最近也開始用wordpress和tumblr，發現，如果真的比一比的話，它們都比google blogger好用不少，tumblr是還不太熟，但wordpress已經用它架過幾個站了。感覺很不錯，而且wordpress比blogger更像網站，產生出來的html也有多到不行的class可以在不同分類的文章加上不同的css，blogger就是完全不行了。

不過當然也要看網站的規模就是了，已本站目前來說blogger還是很夠用的。

新網址~http://walkinumibe.com

blogger『熱門文章』小工具~爆~很~大~

2010-09-01T01:21:00.000-07:00

好像就在這幾天，google blogger多出了一個『熱門文章』的官方小工具。之前也一直在找類似的小工具，有用過一些，但好像沒找到什麼特別好用的，所以也就算了。而上星期，正好在設計友人的blogger，也正好發現這個新的小工具，就試了一試。

很不錯用！！而且html也很好修改，不到一小時，馬上就和該blogger合為一體了。由於我是將該區塊放在最下方…其實，我想應該是在安裝好的第一時間就發生了可怕的事情了，但由於是在該區塊之後，而且google chrome的除錯實在很強，所以，我完全沒有發現在它之下的html都已爛掉了…。

到底是什麼個爛法。從下圖應該可以看出來。

紅框的部份，就是那裡，那個記號是blogger內建的『閱讀更多』。照理講這個記號不應該出現，其他所有的tag，如a,b,u等都不會被印出來，但這個會被印出來，而且就像上圖一樣，如果文章被切斷的點正好在這個的中間的話，之後的HTML就是完全的爆了…orz。從上圖的顏色應該也看得出來，在它之後從原本的五顏六色轉成了一片慘綠。

就是這樣，而它會到下一個-->之前才會回歸正常。但，中間會有一大塊HTML都會被認為是『註解』而不會出現…。

決解的方法，其實也很單純，就是早一點；或晚一點在用。看起來它把文章切斷的點是一樣的；一樣的字元數，所以，只要注意一下，多寫幾個字在切斷就好。

除了這個bug之外，這個小工具是非常好用的，讚！

關於PSD TO HTML

2010-08-26T01:25:00.000-07:00

先從字面上解釋。就是可以將你的PSD(photo shop)檔案轉成HTML，也就是網頁。你設計你的網站，我把它HTML化。我相信這是須要一點技術的，而且要讓這樣的技術『上身』要花不少時間，而會美工的又不一定會網頁，用DreanWeaver也排不出自己的設計，而且，它不是『自由軟體』它是要錢的，我信相就『正規』的方法入手，它要不少錢。而且，你不用為了喝牛奶而養一頭牛。

我想身為設計師的各位，一定有自已的設計風格，但，要把這風格變成網站，可能就有點難。也有可能到最就放棄原先的設計，只為了能排出一個版面。我想這是要分工的。就像室內設計師也不會自已下去做裝潢，裝潢就交給裝潢師父做，而我，就是那個自願當裝潢師父的人。

若你是設計師；或你也不是什麼設計師，但就是找不到哪個網站的設計讓你看的順眼。那麼，您可以試著把網站『畫』出來，然後把排版的事交給我： )

windows主機和linux主機哪裡不一樣？

2010-08-08T21:30:00.000-07:00

記得四五年前，想說申請一個自已的主機，上網看了看，完全不了解什麼是windows主機；什麼是linux主機。寫了一卡車看不懂的語言支援…不懂就是不懂。但通常像這種不懂的人，到最後都會買windows主機。為什麼？因為windows看起來比較親切…。

但，他也貴出不少，一樣的流量空間，多者會貴近一倍。但不知道為什麼，還是不敢選擇linux主機。就因為windows看起來親切…。

那麼到底windows主機和linux主機的差別在哪？

差別就在於，可以跑的程式種類和資料庫不一樣。

原則上windows主機可以跑asp和Access；linux則是php和MySQL。大多是這樣。至於初學者們用DreamWeaver做出來的純HMTL，則是都可以。

都可以，所以若是用DW做出來的純html網站設計，當然是要用linux的，因為他便宜不少。嗯。

ubuntu筆記-XAMPP安裝

2010-07-28T02:23:00.000-07:00

由於筆電重灌了，在來就是要灌一些有的沒的程式，其中最重要的之一，就是xampp，這篇文章，主要是整理一下這次的過程，這樣下次自已灌就不用在到處爬文了W

到xampp for linux下載tar.zg
。載完之後把檔案移到"/"也就是"家目錄"，這樣比較方便。
開啟終瑞機
輸入"su"切換成root模式；並輸入密碼。如果沒有設密碼是無法切換到root模式的。這時後就要用

sudo passwd root

來設定root的密碼。
將下載的壓縮檔解壓縮/安裝到/opt
只要輸入以下：

tar xvfz xampp-linux-1.7.3a.tar.gz -C /opt

安裝就完成了。
啟動XAMPP
只要執行下列的指令

/opt/lampp/lampp start

就會看到像下例這樣的指令：
Starting XAMPP 1.7.3a...
LAMPP: Starting Apache...
LAMPP: Starting MySQL...
LAMPP started.
到這就ok了。
開機自動開啟XAMPP
也只要輸入以下：

ln -s /opt/lampp/lampp /etc/init.d/lampp
sudo update-rc.d -f lampp defaults

open小將*CSS

2010-07-27T05:51:00.000-07:00

想試著用css畫個什麼東西，其實並沒有太難。前前後後花了大約五十分鐘。之所以會想這麼做是因為看了日本css達人畫的小叮噹…。本來以為應該會花非常久的時間…但，我這個open小將畫了個頭(身體我想是畫不出來了)花了五十分鐘來看。小叮噹應該在一個工作天可以完成= =+但我不想嚐試，我有這個open小將就很滿足了。

付上了css。值得注意的是#face的radius，寫成border-radius:200px 170px;。如果是firefox的話就會變成『左上、右下=200px』；『左下、右上=170px』，但在chrome，就不是這樣了，那個170…我到現在還是不知道那是什麼數字，不過我知道這樣寫可以跑出橢圓形，很神奇，我也是不小心試出來的。原來用css可以畫出橢圓形…。

OPEN CSS

*{
margin:0px;
padding:0px;
}
ul, li, ol{
list-style:none;
}
body{
height:100%;
}
#open{
width:400px;
height:400px;
position:relative;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
}
#rambow{
height:200px;
width:340px;
position:absolute;
top:0px;
left:0px;
z-index:1;
border:10px solid #000;
-webkit-border-top-left-radius:200px;
-webkit-border-top-right-radius:200px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:200px;
-moz-border-radius-topright:200px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
overflow:hidden;
background:#fff;
-webkit-box-shadow:0 0 15px #333;
-moz-box-shadow:0 0 15px #333;
}
#rambow li{
-webkit-border-radius:200px;
-moz-border-radius:200px;
position:absolute;
width:300px;
height:300px;
}
#rambow li#yellow{
border:20px orange solid;
}
#rambow li#green{
border:20px green solid;
width:250px;
top:25px;
left:25px;
}
#rambow li#red{
border:30px red solid;
width:180px;
top:50px;
left:50px;
}
#face{
background:#fff2c6;
height:160px;
width:195px;
border:10px solid #000;
-webkit-border-radius:200px 170px;
-moz-border-radius:200px;
position:absolute;
z-index:20;
top:80px;
left:73px;
-webkit-box-shadow:0 0 15px #333;
-moz-box-shadow:0 0 15px #333;
}
#face li{
position:absolute
}
li.eye{
width:40px;
height:40px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background:#000;
z-index:21;
position:absolute;
top:50px;
}
li.left{
left:25px;
}
li.right{
left:130px;
}
li#hana{
width:30px;
height:20px;
border:6px solid #000;
background:#630;
-webkit-border-radius:25px 20px;
-moz-border-radius:25px;
top:80px;
left:50%;
margin-left:-21px
}
li#kuchi{
border-bottom:8px solid #000;
-webkit-border-radius:100px;
-moz-border-radius:100px;
width:100px;
height:100px;
top:35px;
left:50%;
margin-left:-50px;
}

蘋果風DOCK

2010-07-21T04:37:00.000-07:00

試著練習了一下CSS三的特性，但也不知道要練什麼或是做什麼。看著UBUNTU的WBAR。於是，就…試試看吧。所以標題不應是APPLE DOCK，應該是ubuntu wbar才對，但，我想這個標題應該比較好讓人理解，所以還是用這蘋果風DOCK這個標題。樣式就是我桌面上的wbar，就是長這樣…嗯。

其實說是css3的練習，但真的用到的只有transition和color:rgba而以…。所以。照理講，就算是不支援css3，看起來應該也都還可以，只是沒有動畫而以。目前用google chrome試是ok的，不過我也只用google chrome試過而以…等等灌了firefox在試試。

CSS

body{
background:url(bg.jpg) top center;
}
*{
margin:0px;
padding:0px;
}
#dock{
position:fixed;
bottom:10px;
left:50%;
margin-left:-250px;
}
#dock ul{
background:rgba(225,225,225,0.1);
-webkit-border-radius:40px;
-webkit-box-shadow:0 0 20px rgba(000,000,000,0.3);
padding: 0 ;
height:70px;
 -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#dock ul:hover{
margin-left:-25px;
}
#dock ul li{
float:left;
position:relative;
width:70px;
height:90px;
margin-top:-20px;
 -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#dock ul li a{
padding:0px;
margin:0px;
display:block;
height:100%;
}
#dock ul li img{
width:60px;
position:absolute;
bottom:5px;
left:50%;
margin-left:-30px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#dock ul li:hover{
width:110px;
}
#dock ul li:hover img{
width:110px;
z-index:10;
margin-left:-50px;
}

GMail的簽名檔是可以加圖片和背景圖片的

2010-07-16T22:01:00.000-07:00

話說網路這世界還真是知難行易，幾天前才發現『罐頭回應』和『插入圖片』，也不知道是什麼時後才開始有這個功能的，總之就試了一下。而且還是要加入一點ＣＳＳ，至於在簽名檔、信件中加入CSS其實這幾天因為工作的關系也還在研究中。有不少限制；有幾個特定的屬性是不能用的。其中最重要的就是background不能用。但，用table的 background='url'就可以。當然可能還有更多是有限制，或不能用的，還沒整理出來。但，table可以加入background算是得救了…。不知道多久沒用table了…。

↑↑↑上圖是幫客戶試做的，背景雖然有點淡，但，是有背景的。

HTML

<table cellspacing="0" cellpadding="0" border="0" align="left" valign='top' width="239" height='160'>
<tr><td width="239" height='160'  align="left" valign='top' background='http://www.smalltown.url.tw/img/small-sign.png'>
<ul>
<li>大城小鎮<em>B&B</em></li>
<li>徐筱菁 | 0921-098470</li>
<li><a href='http://www.smalltown.url.tw'>www.smalltown.url.tw</a></li>
<li><a href='mailto:smalltown0501@gmail.com'>smalltown0501@gmail.com</a></li>
<li>花蓮市民國路63號</li>
</ul>
</td></tr>
</table>

CSS

ul, li ,a{ margin:0px; padding:0px; } ul{ margin-top:15px; } ul li{ margin-bottom:8px; list-style:none; font-size:13px; height:15px; letter-spacing:2px; color:#003; margin-left:6px; } ul li a{ color:#036; text-decoration:None; }

GMail-圖片簽名檔(非官方)

2010-07-15T08:53:00.000-07:00

事實上，這並不是什麼簽名檔，只是一個『類簽名檔』的功能，但我覺得這個功能比簽名檔還要更方便。

設定→研究室→罐頭回應。找到了之後開啟，就ok了。這邊就直接把說明貼過來。

懶人專用的電子郵件。您只要按一下撰寫表單的 [罐頭回應] 按鈕，就可以儲存或傳送罐頭回應。您還可以利用篩選器自動傳送電子郵件呢！

非常好懂的說明，而且真的非常方便，因為我也常要發mail而且大多都發的差不多，但又不是完全一樣，嗯~讚！至於簽名檔的問題，由於這個罐頭回應不但是方便叫出，而且還可以插入圖片，所以，筆者式著在mail中編輯了一下，自已的簽名檔，然後儲存~果然(當然)，只要點一下就可以哪來當簽名檔用了~！！而且比簽名檔更方便的是，他可以選擇性的使用，讚！見下圖↓↓↓

至於圖片就是一般的插入法，但要記得先進『研究室』裡把『插入圖片』這個功能也打開。然後，點選圖片，加入連結，圖片簽名檔就大功告成了！！

原來Gmail可以插入圖片了(官方)

2010-07-14T11:27:00.000-07:00

嗯…怎麼總覺得很早很早以前就有了，但一直都沒發現，不過也有可能真的是最近才出現的，因為這個功能還在『研究室』裡面。所以應該還算新吧！

設定→研究室→插入圖片。開啟之後就ok了，以後就不用在從奇怪的地方貼來貼去了~

本站不支援IE6以下瀏灠器

2010-07-13T04:13:00.000-07:00

如果您使用的IE6那你應該看到本站是有多可怕了。其實他可以不這麼可怕，但，我想把這個可怕的樣子保留下來。這就是『一般』我們辛辛苦苦做完一個網站之後IE6『正常』顯示出來的樣子。所謂正常，就是說，在使用IE7以上；或其他五大瀏灠器瀏灠本站，都是我原本想要呈現的樣子，但不知道為什麼，在IE6看起來就不是樣，而且差的非常多，然而要理解為什麼會差這麼多，這個問題可能連比爾 ‧ 蓋茲也不知道…。

近最一直在想，其實，IE6沒有錯，或許『當年』(2001年)它也不是個爛瀏灠器，可以肯定的是，他是個非常老的瀏灠器，快十年了，它是近十年前出廠的瀏灠器。所以，它真的沒有錯，它是太老了，常常在想，為什麼IE6不支援這個也不支援那個，但想了一圈回來之後發現，在它出生的時後，沒有這麼也沒有那個，所以，不支援也是理所當然的…。

講了一圈，重點是，IE6沒有錯，錯的是不更新的使用者。

若您是IE6的使用者，請相信我，任選一個上方的圖示，點兩下，你所看到的網路世界將會不一樣。

在blogger的指定頁面加上HTML/JAVASCRIPT

2010-07-11T09:59:00.000-07:00

看到不少人寫了關於blogger的首頁至頂文章的教學，很實用，本站也有用到。本站用的是至頂『html』。但只有首頁還不夠，這幾天爬了爬文在國外網站看到了個讓html出現在指定的網址。基本上…只要有這個語法就可以說是萬能了…。可以把它用在某個tag上，比如說是作品，相片，然後在該頁面放個台頭；多寫幾行css，看起來就活像個網站頁面了！

本站是用在work這個label。所以在『指定頁面網址』中貼上http://walkinumibe.blogspot.com/search/label/works就這樣，works這個label就有一個專用的css和hmtl(javascript當然也可以)了。請參考本站的作品。

指定的頁面網址code

<b:if cond='data:blog.url == "指定的頁面網址"'>    
 在這裡面的內容將只會出現在指定的頁面網址
</b:if>

在blog/網站中加入google表單

2010-07-09T19:26:00.000-07:00

關於google文件的表單應該不用多說明了，這個表單他的官方當然有他的嵌入法，但都是用<iframe>的方式，很難控制他的樣式，別說是長寬了，不論你嵌在哪，他永遠都是白底黑字，看起來很沒整體感。

事實上，我們可以直接把原碼裡的<form>複製出來，並且把內裡面的東西都清一清(看個人)，只要留下<form>,</form>之間所有的<input>就可以了。接著就是要把這些整理過的html貼到你的網站或blog就可以用了！和用<iframe>之間絕對性的差異就是，表單(form)本身的html就在你的網頁中，就可以自行更改樣式了。

如果和本站一樣是用blogger的話，就選擇新增HTML/JAVASCRIPT小工具，並且把<form></form>中的內容貼上就可以了。範例請見本站的下方~。

在blogger中加入twitter

2010-07-08T08:10:00.000-07:00

其實在小工具中有很多個類似這樣的東西，但都是用頁框跑出來的，不能更改他的樣式，很麻煩，看起來亂沒整體感的

找了一下，這是官方的給blogger用的twitter，雖然他只有白底黑字，但，他的欄位下方就有寫，可以自已在編輯css。沒錯，這就是我要的。只要點入本頁，雙點blogger的logo就會跑到blogger加入小工具的畫面，然後只要打個標題就可以用了。

彩色標籤雲

2010-07-05T11:41:00.000-07:00

這可以說是本站費心最多的一個小區塊了…。效果請見側欄。就支援度來說，chrome是100%支援；firefox90%支援；ie8則是30%左右…。
chrome不用說了，就是一開始想做來的樣子，FF是因為HOVER的陰影沒有動畫(也有可能是的FF有問題…因為官網說3.6有支援)，而IE8呢，由於不支援圓角(border-radius)、陰影(box-shadow)及色彩透明(color:rgba)，還有，文字上下置中的不完全，所以，30分。
可能是有點自我感覺良好，也可能是真的搞太久，所以想寫一下心得。若是blogger的使用者的話，理論上只要把下例的貼到自已的HTML裡應該就ok了。

←←←用IE8的朋友們可以看此圖，這是100%支援的樣子

雖說好像只是一般的標籤雲加上了彩色透明的背景，一開始也這麼想，但若是只加上背景會出現下例的問題。

斷行問題。由於屬性不是block所以會出現字還沒跑完就斷到下一行的情行。只實這是自找苦吃，若不是有加上背景，基本上是看不出來這個問題的，但加上了背景，很明顯的就會看出被『切斷』的感覺。為了要讓每一個標籤成為一個單位，就是說，斷行就斷『一整個』，只要加上display:block;float:left;就可以了。
在來是高度(行高)。一定要加上行高(line-height)才不會上下無法對擠。對了，還要為IE加上一個word-break:keep-all;才行，不然它還是會斷行。(一點道理也沒有…)
如果有篇數的話…只要把這個css寫在span上面就可以了，如果沒有數字的話還是寫在a上，因為這樣的話選取區會比較大。這邊只寫到第五個(事實上好像最多也到五個而已…)，若更多話，在加下去就可以了。

彩色標籤雲CSS

#Label1 span.label-size a, #Label1 span.label-size span{
padding:3px 4px;
display:block;
float:left;
background:rgba(225,225,225,0.3);
-webkit-border-radius:4px;
-moz-border-radius:4px;
text-align:center;
margin-right:10px;
margin-bottom:10px;
line-height:18px;
-moz-box-shadow:0 0 2px rgba(0,0,0,0);
-webkit-box-shadow:0 0 2px rgba(0,0,0,0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
border-radius: 4px;
word-break:keep-all;
*:filter:alpha(opacity=50);
*:color:#fff;
}
#Label1 span.label-size a:hover{
-moz-box-shadow:0 0 15px rgba(225,225,225,0.5);
-webkit-box-shadow:0 0 15px rgba(225,225,255,0.5);
text-decoration:none;
*:background:url(img/white01.png);
}
#Label1 span.label-size-1 a{
background:rgba(111,222,012,0.3);
*:background:rgb(111,222,012);
}
#Label1 span.label-size-2 a{
background:rgba(121,022,112,0.3);
*:background:rgb(121,022,112);
}
#Label1 span.label-size-3 a{
background:rgba(000,212,202,0.3);
*:background:rgb(000,212,202);
}
#Label1 span.label-size-4 a{
background:rgba(133,242,192,0.3);
*:background:rgb(133,242,192);
}
#Label1 span.label-size-5 a{
background:rgba(225,48,48,0.3);
*:background:rgb(225,48,48);
}

COLOR:RGBA

2010-07-04T00:01:00.000-07:00

這是最近常在一些設計網站上看到的css3效果，其實和background:RGBA沒兩樣，但這個border:RGBA在google chrome上顯示出來可是別有一翻風味！！

從下圖看得出來，左邊的是firefox，只是單純的把邊框做成0.3。右邊的是chrome，邊的部份一樣是0.3，但四個角可以看出來有個黑點，看起來有點現代感。至於這是怎麼來的呢？我想應該是因為在chrome中，上、右、下、左，個是一條獨立的邊線，所以，角落會比較黑，是因為兩個邊框重疊在一起了；就是說，角的部份變成0.3+0.3=0.6所以會比較黑…以上，是個人的猜測。

你也可以到本站的網頁設計；並分別用firefox及chrome看一下這個css實際的效果。

本站用到的BORDER:RGBA-CSS

 .work-info{
 border:6px solid rgba(225,225,225,0.3);
 overflow:hidden;
 height:370px;
 width:588px;
 position:relative;
 margin-bottom:30px;
 }

海岸散步改版

2010-07-02T04:53:00.001-07:00

原本這個設計是要用在官方網站上的，但由於關網還有太多內容要做，所以先把這個版用在blogger上，效果相當不錯！但當然也還沒有完成做好。用firefox或chrome看都是ok的，除了sidebar的部份還不知道要放些什麼。blog本體應該算是完工了。

但…，方才試著用ie6.0看了一下，不能看。所以，當blog的樣式完全設計好了之後，連接著的工作是要讓本站在ie6.0也可以看。不過，光是要讓ie6.0可以看，大概就要花上一天的時間了…。

CSS3背景色透明

2010-06-03T22:29:00.000-07:00

最近看了不少css3的新屬性，其中本人覺得最實用，而且效果也最好的，就是color:rgba；背景透明。
由於css很早就有透明這個屬性，但它會連他的子元素也一起變成透明的，所以在顏色的選擇上一定要是差很大的才會顯示的比較清楚。比如說，黑色的背景，白色的字；這類的配色。
在者，若想要做出超透明的效果，就是說用到opacity:0.6以下的話，基本上文字跟本就會透明到看不見。
所以css3多了個color:rgba，就是只把背景色變透明，而子元素則不變。用法很易懂。rgb就和之前一樣，三元色，a就是透明度，寫法是color:rgba(225,225,225,0.2)，就會呈現白色透明度0.2嗯…。看看以下兩個例子。

opacity：子元素也會一起透明

rgb(255, 0, 0);opacity: 0.2

rgb(255, 0, 0);opacity: 0.4

rgb(255, 0, 0);opacity: 0.6

rgb(255, 0, 0);opacity: 0.8

rgb(255, 0, 0);opacity: 1

可以看到文色和背景一樣愈來愈透明，而這邊的hover是做成color:red，也就是說會變成和背景一樣的顏色，而文字也會和背景變成一樣的透明度，所以完全看不到文字了。

這是css3的background:rgba

rgba(255, 0, 0, 0.2)

rgba(255, 0, 0, 0.4)

rgba(255, 0, 0, 0.6)

rgba(255, 0, 0, 0.8)

rgba(255, 0, 0, 1)

可以看到從上到下文字的顏色始終是白的，而背影則愈來愈淡。而hover之後就更佳明顯；背景愈透明，文字反而愈名顯。因為文字一直是紅色，背影則愈來愈淡:)
其中0.4代表透明度。

IE8FireFoxChromeSafariOpera

CSS

background: rgba(255, 0, 0, 0.2);
background: rgba(255, 0, 0, 0.4);
background: rgba(255, 0, 0, 0.6);