CSS濾鏡在超市中的應用

由于大部分的超市製作軟件都有很多定制功能,例如 Arles Image Web Page Creator 的添加代碼功能,Express Thumbnail Creator 的索引頁定制功能,究其原理,無非是在 html、css 等方面做文章。現在有見到在超市的索引頁上加入縮略圖的特效的例子,這種效果在我自己發佈圖集的時候也常常采用。接著就簡單介紹一下在 Arles Image Web Page Creator 中使用CSS濾鏡……

濾鏡也有自己的规则和语法,它是把一些特殊的效果添加到 html 元素上,而图像就成为利用濾鏡最多的 html 元素了,因为许多效果在图像上能得到更好的表现,舉個用 Arles Image Web Page Creator 制作并有 Alpha 濾鏡效果的例子說明。

可以這樣添加
Demo1

這是代碼。

onmouseout="this.style.filter='Shadow(enabled=false)'"
onmouseover="this.style.filter='Alpha(style=2,opacity=100,finishOpacity=25)'"

也可以這樣添加,其效果是一樣的,只是添加的位置不同,
Demo2
這是代碼。

a:link img {filter:Shadow(enabled=false)};
a:visited img {filter:Shadow(enabled=false)};
a:hover img {filter:Alpha(style=2,opacity=100,finishOpacity=25)}

預覽地址:地址A 地址B

第一種是應用了鼠標動作添加,第二種是通過定義圖片鏈接樣式添加,其結果是一樣的,不過生成的索引頁可不一樣,第一種方法需要爲每個縮略圖都添加一個鼠標動作,生成的索引頁文件會比較大,因此推薦第二種添加方法。如果真的看懂了,那就可以手動添加到不論用哪種軟件生成的索引頁中了……

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *