2012年4月16日 星期一

快速透視、示顯頭頂工具列


喜歡原創 不隨波遂流!

如有引用請用原文、留言! 

"一寸光陰一寸金" 時間不等人! 不少網友慣用的自定欄位輸入空間巳經爆滿, 請自行掉配空間! 在其他自定欄位輸入語法, 繼續美化!

記得將語法全部放進一對 <style></style> 之間包着即可!! 我不遂個寫了!

欄位名稱、語法動作順序中、英對照!

*      *      *

現在的 Y blog 開放了很多, 一些從前只能用在別的網誌上的語法, 現在也可在這裏套用上! 使得語法更精簡, 對一些效果更方便、快捷! 強而有力!

不少 bloggers 走到裏那也喜歡在工具列上美化或將之拿掉! 這我覺得始終都是用網誌的服務, 留個面的好!

連續兩篇介紹過相關的一些細項調較, 接下來做透視就漂亮得多! 要透視效果令版面全個人化, 又保留工具列, 以便其他 bloggers 使用, 配搭 hover 語法調較再顯示就行了!


示範圖:  

*      *      *

首先了解一下透視語法是怎樣調較透視度吧!

filter 是濾鏡, alpha 是調較透視度的濾鏡種類, opacity 是調較透視度。

IE 用的語法例子是: filter:alpha(opacity=50); 即有半透明效果!

透明到實色: 度數由 1 ~ 100。 度數越細越透明。

Firefox 用的語法例子是: opacity:0.50; 度數越細越透明。

透明到實色: 度數由 0.0 ~ 1。

*      *      *

這次示範只徹去 logo , 把工具列主背景、中間背景、分隔線轉色!

語法:

#asb-nav-logo{background:none;}

#asb-uh, #asb-nav, #asb-nav .nav-item .divider{background-color:skyblue;}

順便補充一下主背景是指工具列的全長, 中間背景是指有 Y logo、文字及按扭的範圍!

*      *      *
美化了小項, 加上以下兩句便可輕易將工具列快速透視與顯示!

語法:

/*頭頂工具列快速透視、hover 示顯*/
#asb-uh{opacity:0.0;filter:alpha(Opacity=0);}


#asb-uh:hover{opacity:0.2;filter:alpha(Opacity=20);}

***測試、制作及編寫下過心機, 用了時間,
如引用語法或文章資料請連同我 blog Logo 一併帶走!

15 則留言 :

  1. 暫時無時間學呢, 謝謝這美美的分享~~
    [版主回覆04/17/2012 11:21:53]也想放輕鬆點, 我有時間會出教學文作為分享呢! ^^

    回覆刪除
  2. 土耳其他他 - TATA2012年4月17日 下午3:17

    多謝分享~
    \|/ 嗨..下雨天...遠方的朋友
    -◎- ....他他送給你溫暖的太陽啦!
    /|\ 大家要好好保重喔~週二快樂!!
    [版主回覆04/17/2012 23:38:21]香港下雨, 涼下都好! 等著再出太陽啦 ^^ 祝一週愉快

    回覆刪除
  3. 謝謝雅姬蘭分享~
    我從未試過這樣的hover呢~^^
    [版主回覆04/17/2012 23:42:38]這樣語法簡短好多呢! ^^ 減省欄位內容正好!

    回覆刪除
  4. 感謝您的分享!祝你有愉快的一天!
    [版主回覆04/17/2012 23:43:02]祝一週愉快 ^^

    回覆刪除
  5. 晚上好Akina!會否和以前的頭頂列之語法有衝突呢?照貼便可?
    [Joe回覆04/19/2012 17:05:24]Thanks again !!!
    [版主回覆04/19/2012 16:39:32]語法包在一對 <style></style>就成了, 省位又方便管理, 減少出錯機會, 慢慢整理吧! ..
    [Joe回覆04/19/2012 16:19:22]午安Akina!我已將部份語法 hightlight 剪下到新的自訂欄位貼上,仍show不出,想放回原位又不能,頭痛!謝謝妳的回應!!!
    [版主回覆04/19/2012 00:27:54]講多次 ... 將部份語法 hightlight 剪下到新的欄位貼上就行! 我現在要改都很順利 ^^
    [Joe回覆04/18/2012 22:55:45]謝謝姬蘭!近日被yb的伺服器困擾,連背景語法也失去,再貼上亦不能,唯有等遲些再搞了。想必妳也看過我blog背景喇,現時暫用yb出品啦。
    [版主回覆04/17/2012 23:46:27]和我上兩篇的細項夾得到, (藍色組語法) 沒撞的 ^^ 晚安

    回覆刪除
  6. 謝謝分享! 我老是不敢亂動啊! 我的電腦容量好細又慢, 看來要儲錢換部超級的, 才可作多方面調配啊! 晚上好.
    [版主回覆04/18/2012 07:10:52]早晨! 語法只用在 blog 自定欄位裏, 有足夠空間便可! 不然只顯示不到效果! 不關電腦事! 若電腦沒什麼空間只會慢呢 ...

    回覆刪除
  7. 簡單容易的好語法
    辛苦晒!謝謝伱!!!
    [打皂坊回覆04/19/2012 00:19:27]原來如此
    [版主回覆04/18/2012 07:13:45]快捷易用 示範只在這文章裏, 我現在 Chrome 睇一樣得呀! 你睇返工具列頭一篇, 背景一定要 upload 圖架!
    [打皂坊回覆04/18/2012 01:53:10]我用google看頭頂工具列不透視啊

    回覆刪除
  8. 好友午安: 有空閒......在下會試試看.感謝分享~
    [版主回覆04/18/2012 21:49:15]莫等閒呀!

    回覆刪除
  9. 土耳其他他 - TATA2012年4月18日 下午3:16

    午安, 雅姬蘭 !
    他他出發了, 你都要好好享受每一天喔!
    ★/○\★ 祝週三愉快! ★\○/★
    [版主回覆04/18/2012 21:51:06]恭喜你康復呀! 晚安啦

    回覆刪除
  10. 晚上好Akina!專誠來探你和道謝!
    [版主回覆04/19/2012 22:16:40]是呀! 猜你是用 Chrome, 好像第一篇工具列示範圖, 效果配合 yblog 背景是要 upload 圖的 ..
    .
    搬語法時逐少或一部份移, 慢慢試應該得的!
    [Joe回覆04/19/2012 21:49:21]妳是說頭頂工具列嗎?我處看不到啊。
    [版主回覆04/19/2012 19:35:04]見你做了透視, 幾好丫 ^^

    回覆刪除
  11. 土耳其他他 - TATA2012年4月19日 下午7:50

    雅姬蘭 , 晚上好!
    他他剛吃過午餐, 現在有空跟你問好!
    ☆●★●☆ ‧週四快樂!‧ ★\○/★
    [版主回覆04/19/2012 22:18:02]身體健康, 晚上好! ^^

    回覆刪除
  12. 我未明白,等我搬番去試下。謝謝雅姬蘭通知和分享!Good night!
    [版主回覆09/17/2012 19:02:14]轉了新主題精靈後, 些版語法不可好了 ... 快刪 ...
    [版主回覆04/19/2012 23:47:02]最好轉用 FF 呀! ^^ 會順D ..
    [版主回覆04/19/2012 22:21:04]以為更新又遲嘛 , 差點要去客服 ... 可在文章 HTML 尾打語法先試! 晚安!

    回覆刪除
  13. Hi akina 謝謝你的示範圖及分享,引用去待有時間玩
    [版主回覆09/17/2012 19:00:59]轉了新主題精靈後, 些版語法不可好了 ... 快刪 ...
    [版主回覆04/20/2012 20:35:30]好呀! 你先在文章 HTML 模式在文章尾打<style type="text/css">語法</style>試試也成呀!
    [melody~♫回覆04/20/2012 19:04:47]回頭才看到你的示範,好正的語法呀

    回覆刪除
  14. 我回來喇,先引用帶走,回去慢慢試. Thanks Akina
    [版主回覆09/17/2012 19:01:20]轉了新主題精靈後, 些版語法不可好了 ... 快刪 ...
    [版主回覆04/23/2012 18:52:42]好呀! 你都加油呀 ^^

    回覆刪除
  15. 妳好棒
    [版主回覆04/26/2012 20:32:55]謝謝! 晚上好!

    回覆刪除