[CSS] css 特效hover on 和 off

最近處理一個畫框的特效，效果要在hover的時候順時鐘畫，
原來只有注意hover 的時候加入線的寬，但沒考慮hover off的行為(讓框倒帶)
不過在這篇讓我想到哪裡要修正

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

終於可以順利倒帶 -,-

作品是朋友的網站大境建設 : thegand.com.tw

[CSS] 使用css transition 做出underline的效果

作者示範了各種underline的動畫效果，有需要的朋友可以參考一下。
我的案例需要下圖中記錄的SlideIn效果。

http://bradsknutson.com/blog/css-sliding-underline/

[CSS 3動畫] animation 語法動畫筆記

最近一些case需要使用大量的css動畫，把一些處理到的指令筆記一下

animation的短指令

animation: name duration timing-function delay iteration-count direction;

定義動畫結束後如何停止最後一個狀態

animation-fill-mode : none | forwards | backwards | both;


none：不改变默认行为。

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both：向前和向后填充模式都被应用。

[CSS] 使用Media Query來處理不同裝置所需的樣式筆記

記錄一下相關media query的筆記。

• media query可用來依據裝置特性套用樣式。
• min-width (而不是 min-device-width) 以確保獲得最通用的體驗。
• 針對元素使用相對大小，避免版面走樣。

實作方法

使用link標籤

使用import語法

查詢語法

一般RWD最常使用以下屬性

屬性	結果
min-width	任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width	任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height	任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height	任何未超過查詢中指定高度的瀏覽器都會套用規則。
orientation=portrait	任何高度大於或等於寬度的瀏覽器都會套用規則。
orientation=landscape	任何寬度大於高度的瀏覽器都會套用規則

[CSS] 重設 絕對定位的值

今天在試media query重新定位某個icon時，發現一直無法清掉left，

查了一下google大神，可以在覆寫的css中改加上 left:auto; ，瀏覽器即會使用預設的值。

[CSS] backgroud 與 backgroud-image 小踩雷

今天在弄二層下拉選單時(以前都有美工拉好T_T)，
在mouse hover的時候設定要改一下背景色，結果卻把a裡面設定的backgroupd-image ICON蓋掉了，
原來是用錯指令啦，記得要使用backgroupd-color

.sub-nav li a:hover,.sub-nav li:hover{
    color:  #000 !important;
/*    border-bottom:  2px solid  #58616d;*/

    /*background是設背景圖，會把icon換掉的，要改backgroupd-color即可*/
    /*background:#dfdfdf !important;*/ 
     background-color: #dfdfdf !important;
}

[CSS] IE8 顯示背景圖的icon的解決方法

遇到IE8的背景圖跑不出來的問題，另外ie8也看不懂 background-position 與 background-size

「background-size」是 CSS3 才有的進階語法，ie9後才有支援
.nav-icon-devicemgmt{
    background: url('../images/icons/nav-icon-devicemgmt.png') no-repeat left  ;
}

/*IE8可跑*/
.nav-icon-devicemgmt{  
    background-size: 32px 32px;
    background-image:url('../images/icons/nav-icon-devicemgmt.png') ;
    background-repeat:  no-repeat;
    background-position:  left ;
    background-position-x: 5px;
}

[CSS] CSS菜鳥茶包: 讓div的內容置中

測試二個讓Div內的文字可以置中的效果

[CSS] IE8 透明度寫法

記錄一下如何在萬惡的IE8支援透明度:D

img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }