XHTML+CSS

[CSS] 萬無一失的透明寫法

花水木 — Thu, 22 Oct 2009 03:21:25 +0000

CSS可以讓東西變成透明，可以讓東西變得漂漂亮亮，但是很麻煩的是，不同瀏覽器需要的寫法不同，因此一個透明，事實上你要寫三行CSS才行。

.opacity {
  opacity: 0.8;
  -moz-opacity:0.8;
  filter:alpha(opacity=80);
}

其中opacity: 0.8;是給Firefox新版用的，所有標準化的瀏覽器也都適用，-moz-opacity:0.8;是給Firefox舊版，filter:alpha(opacity=80);則是IE專用。

Plurk2:花水木版圓角作法&原始檔

花水木 — Thu, 19 Feb 2009 06:08:04 +0000

這個貼紙的圓角邊框作法是參考這個網站製作的。
http://www.schillmania.com/content/projects/even-more-rounded-corners/

他的好處是

沒有javascript，速度快
只需要一張圖就可以有圓角邊框
區塊寬和高都可以隨意設定
透明的背景，很漂亮

他的壞處是

內容如果太複雜有時會跑版
XHTML/CSS code不算簡潔
圖檔不算小(15~20K)

不過對我來說好處大於壞處，所以還是使用了。背景圖檔他有給原始檔，可以去那邊下載，本文最下面的下載是Plurk2貼紙的背景。有PLURKPlug字樣。

作法

在HTML的地方輸入

<div class="dialog">
 <div class="content">
  <div class="t"></div>
  這裡放你的內容
 </div>
 <div class="b"><div></div></div>
</div>

在CSS的地方輸入

/* 
  -- Even more rounded corners with CSS: Base stylesheet --
*/
 
.dialog {
 position:relative;
 margin:0px auto;
 min-width:8em;
 max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
 color:#fff;
 z-index:1;
 margin-left:12px; /* default, width of left corner */
 margin-bottom:0.5em; /* spacing under dialog */
}
 
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;
 _background-image:url(dialog2-blue.gif);
}
 
.dialog .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}
 
.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 width:12px; /* top slice width */
 margin-left:-12px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}
 
.dialog .b {
 /* bottom */
 position:relative;
 width:100%;
}
 
.dialog .b,
.dialog .b div {
 height:30px; /* height of bottom cap/shade */
 font-size:1px;
}
 
.dialog .b {
 background-position:bottom right;
}
 
.dialog .b div {
 position:relative;
 width:12px; /* bottom corner width */
 margin-left:-12px;
 background-position:bottom left;
}
 
.dialog .hd,
.dialog .bd,
.dialog .ft {
 position:relative;
}
 
.dialog .wrapper {
 /* extra content protector - preventing vertical overflow (past background) */
 position:static;
 max-height:1000px;
 overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
 
.dialog h1
.dialog p {
 margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
 padding:0.5em 0px 0.5em 0px;
}
 
.dialog h1 {
 padding-bottom:0px;
}

事實上他的CSS寫得很細，但不代表完全不需要微調，我甚至還改了許多選擇器(Selector)的名稱，所以其實我的code現在很亂，應該要來整理一下了。

Plurk2:噗浪插頭的貼紙美化

花水木 — Thu, 19 Feb 2009 04:22:03 +0000

plurk.tw

Plurk Plug(噗浪插頭XD)樣式目前有3種，範例如下：

PLURK² Clean Style：
乾淨的版本，沒有CSS，所以會直接套用你原本部落格的CSS。

PLURK²Hana Style：
較花俏的版本。

ph2(Plurk Hana 2) Style：
比較中性、適合各種佈景的部落格。(但有用jQuery)

這應該是第一次，畫出來的東西真的把他用程式套成可以貼的貼紙。看到Gene貼到他的部落格，感覺頗有趣的。

噗浪插頭 = Plurk Plug = Plurk2

不過當我試著貼一張到自己部落格，我發現我的部落格CSS都用太兇了。
比如說我把文章內文的所有圖片，都padding(偏移)了10px，因為我想要這樣的效果。

但Plurk2貼紙貼上去之後，因為這張貼紙是javascript自動會寫入內容，並非iframe的方式，所以不只自己的CSS會生效，部落格本身的CSS Selector如果碰巧有指到這張貼紙，那也會生效。因此貼紙裡的圖片也變成有padding:10px這個屬性。很醜。

這部份不難，就找到貼紙專屬的CSS，然後加上：

padding:0;
margin:0;

這是最簡單的CSS Reset。我另外也在其他html元素也加上這個東西。不過不確定還會不會有其他問題，目前只能等大家測了。

另外，我還有個問題就是，一般CSS教學都說以下語法要寫在<head></head>之間，
<link rel="stylesheet" type="text/css" href="plurk-plug.css">

可是當貼紙想要使用這個語法，不可能貼在<head></head>裡面，但貼在body裡面也是生效的！不知會不會有什麼後遺症？

用CSS把東西隱藏的兩種方法

花水木 — Mon, 16 Feb 2009 06:35:09 +0000

今天談用CSS隱藏物件的方式。有些隱藏後會完全消失，不佔位置，有些隱藏後位置還是會在。我盡量舉一些應用的例子來。大部分應用的例子都是「暫時看效果」，不然就是必須搭配javascript做些切換效果時用。

display:none;

用這種宣告方式的話，這東西就會像從沒出現過一樣。
ex.想要暫時把一個東西刪掉，看看效果的時候。
ex.用javascript製作tab換頁的功能的時候。
(之後會再寫文說明最簡單的javascript tab)

visibility:hidden;

用這種宣告方式的話，東西會隱藏起來，但他佔用的空間還是會在。
ex.如果有物件重疊了的話，可以先隱藏起來看他後面的東西。

visibility:collapse;

若是給table元素用，就會真的像沒出現過一樣，若是給一般元素，就會只是隱藏。

filter:Alpha(Opacity=0);opacity:0;

感謝eRic。
這種宣告方式是讓東西的透明度變0，也就是整個變透明。
前面的filter是給IE用的，後面是全部都可用。
想當然，變透明的話，它佔的空間還是會在，只是因為透明所以變得看不見。

IE7 CSS Hack

花水木 — Mon, 16 Feb 2009 06:07:12 +0000

換了新佈景，但對於CSS的position，Firefox和IE7仍有不同看法。(IE 6沒測試)所以找了IE 7 CSS Hack的方式。

/* 全部都有用 */
#h1{position: absolute; top: 0.15em;}  
 
/* Firefox 吃*/
html>body #h1{ top: 0.25em;} 
 
/* IE7 吃*/
*+html>body #h1{top: 0.34em;} 
 
 /* IE6 and 7 都吃*/
#h1{*top: 0.34em;}
 
/* IE6 吃*/
#h1{_top: 0.34em;}

如果有很多IE7專用的CSS，不妨就另寫一個css檔案，然後在網頁加入這樣的原始碼。

<!--[if IE 7]>
<link 連結外部CSS語法>
<![Endif]-->

平衡主內容和側邊欄的高度

花水木 — Thu, 22 Jan 2009 08:33:01 +0000

如果設計網站的時候，主內容和側邊欄都有設底色或底圖時，當側邊欄和主內容長度不同時，會有不平衡的感覺。

像是Dan Cederholm示範的這張圖：

如果一直想朝著「偵測主內容和側邊欄區塊高度，並自動讓高度較大者的值等於高度較小者的高值」這種方向來找解法的話，可能會很複雜，這裡有個較簡單的技倆，可以說是用視覺上來欺騙人。

這個作法以及圖是轉自這篇文章，也就是「設定背景圖」。

這張圖顯示，其實整個背景是個橫條、長長的圖，並且repeat-y。在整體的背景設定這張圖之後，主內容和側邊欄就都不用設底圖了，像本站也是用這個方法。

這個概念顯示，其實若對CSS和網站layout了解更深的話，許多事情是可以很容易解決的呢！