Posts

Showing posts with the label CSS

用 CSS 累加數字 & CSS 支援變數

在這瞬息萬變的網路世界中 不要說十年… 五年就差很多了! 這有大部分要歸功於 Google 囉~ (Google OS:更!這又扯到我了…) 剛在這邊看到一個 例子 可以用 CSS 去控制數字累進 以下擷取 The Spanner 的部份程式出來說明( 範例 & 原程式碼 ) @ 這段是用來重整頁面用的 <?php for($i=0;$i<$maxLoop;$i++) { $frame = $i + 1; echo '<meta http-equiv="Refresh" content="'.$frame.';URL=cssloops.php#'.$frame.'_'.$rand.'">',"\r\n"; } ?> @ 這段是用來動態產生 CSS <style type="text/css"> <?php $linkCount = $maxLoop; for($i=0;$i<$maxLoop;$i++) { $frame = $i + 1; for($j=0;$j<$i;$j++) { echo 'a + '; } echo 'a[href="cssloops.php#'.$frame.'_'.$rand.'"]:visited + '; for($j=0;$j<$linkCount-1;$j++) { echo 'a + '; } ?> div:after { counter-increment: count <?php echo $frame?>; content: " " counter(count) " "; } <?php $linkCount--; } ?> div:after { content: " " counter(count) " "; } </style> ...

IE 6 支援 PNG 透明背景

網路上有很多文章在介紹這方面訊息的 如果沒有深入使用的人 可能會覺得這類的檔案怪怪的 怎麼有時候可以用 但有時候卻不靈光… 這邊介紹的也是一般最常用的 IE PNG Fix 使用方式非常的簡單 下面是使用這檔案的方式: img, div, a#demoLink { behavior: url("iepngfix.htc") } HTC 的全名為 HTML Component 可將 JavaScript 內崁在裡面 可用 CSS 的方式將 .htc 檔案呼叫進來 使用這檔案請注意兩個部份: 請注意檔案引用位置是否正確。 此檔案並 無 向下延伸的功能。 比較簡單明瞭又不佔空間的方式為可單獨定義一個 css class: div.transparent_bg { behavior: url("iepngfix.htc") } 實際上要用到的話可以如下引用: <ul id="momo"> <li><div class="transparent_bg c1">項目一</div></li> <li><div class="transparent_bg c2">項目二</div></li> </ul> 你或許會想問為何不直接定義成: #momo { behavior: url("iepngfix.htc") } 一來是那個 .htc 僅支援 HTML tag 為基礎來呼叫的方式 二來是他不支援 向下延伸 的定義 參考文章: 也許是目前修正IE6的PNG透明度問題最簡單的方法