bootstrap3 表格(table-responsive)無法支援滾動的雷~

最近在客戶專案發現手動的表格無法正常滾動，

因為系統有共用元件處理顯示透明滾軸的議題，

以為是js異常，結果只有一個專案異常，

最後發現是被css的字體是否換行影響，

.editor table tr td {
word-break: break-all;
}

剛好就讓所有文字換行符合無法滾動的大小

.editor table tr td {
word-break: keep-all;
}

效果參考: 偉能淨水 | 淨水器推薦 | 淨水器評比比較

[CSS] 純CSS- 背景漸變效果linear-gradient實做表格中的對角線（diagonal）效果

最後用最簡單的方法，在td內放入一個元素

並使用linear-gradient語法

<div class="diagonal"></div>

/*模擬對角線*/

div.diagonal{

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: 1;

content: '';

width: 100%;

background: linear-gradient(to top right,rgb(235, 218, 203) calc(50% - 1px), #fff , rgb(235, 218, 203) calc(50% + 1px) )

}

How to Draw Diagonal Line with CSS
Naveno Cendikiawan

 https://codepen.io/navenoc13/pen/YzpXrOg

[CSS] backdrop-filter 濾鏡背景效果-

backdrop-filter背景濾鏡與濾鏡屬性具有相同的效果，
只不過濾鏡效果僅應用於背景，
而不應用於元素的內容。
*不支援IE

https://css-tricks.com/almanac/properties/b/backdrop-filter/

[CSS] 滿版的banner手法

常常有廣告需求要將第一個段落設定高度滿版，可以利用height:100vh這個值。


https://www.htmllion.com/fullscreen-header-banner-section.html
https://www.htmllion.com/demo-fullscreen-header-banner-section.html

[CSS] css置中大法大全

找到一篇講述各種方法滿足你元素各種置中需求
https://css-tricks.com/centering-css-complete-guide/

[CSS] 三十個有趣的CSS特效

fb看人分享的，覺得裡面有很多選單特效就先記錄一下啦:D

http://www.hongkiat.com/blog/creative-css-animations/

[CSS] css 特效hover on 和 off

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

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

終於可以順利倒帶 -,-

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

[Bootstrap] 讓Modal滿版的樣式修正

為了想讓手機RWD的modal滿版效果感覺比較好，找到了下面的sample。

測試環境的bootstrap 3

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal-dialog {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #3c7dcf;
  border-radius: 0;
  box-shadow: none;
}

.modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  padding: 10px;
  background: #6598d9;
  border: 0;
}

.modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.modal-body {
  position: absolute;
  top: 50px;
  bottom: 60px;
  width: 100%;
  font-weight: 300;
  overflow: auto;
}

.modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  background: #f1f3f5;
}

https://codepen.io/yewnork/pen/Kpaqeq

[CSS 3] 描繪路徑

http://codepen.io/paintbycode/pen/JDbcF/
下拉Iron Man範例

如果要用Stroke效果來描述的話，需要計算path的數值。

以下記錄一下計算的方法

純JS

var path = document.querySelector('path');

var length = path.getTotalLength();

jQuery的方法

var path = $('#目的元素').get(0);

var pathLen = path.getTotalLength();

[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：向前和向后填充模式都被应用。

[jQuery plugin/CSS] 處理Youtube影片置入背景RWD的方法 :D

最近製作的網站有需要將youtube影片放置某一個元素裡面當背景，
找了二個不錯的資料如下，有興趣的朋友可以試玩一下。

http://rochestb.github.io/jQuery.YoutubeBackground/
https://github.com/chriscoyier/Fluid-Width-Video
http://www.seanmccambridge.com/tubular/

[CSS3] CSS transform/transition/animation 初學筆記

最近幫朋友弄了一個網站，需要使用很多CSS transition與animation的效果，
順道找了一些不錯的資訊學習，看完就可以馬上上手許多:D，很適合初學者們

短語法

可用屬性

參考如下：

https://www.openfoundry.org/tw/tech-column/9233-css3-animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html

超強transform解說：
https://desandro.github.io/3dtransforms/

[CSS] 讓youtube影片放入DIV後能夠填滿寬高的解法

如果你有需要使用youtube連結當背景播放影片的話，可以參考以下網址的解法，
試過是可行的:D 有需要的朋友可以看看。

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

[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] 處理內部元素無法完全顯示的問題，當父元素加入overflow:hidden時

之前遇到頁面上做了一個contextmenu的選單效果，但一直被顯示時，選單會因為父元素裡面設了overflow:hidde，導致這個問題。


討論串位址:
http://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent

This is an old question but encountered it myself.

I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")

If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.

If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.

[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] 語話氣球產生器 Word Ballonns

今天剛好在找參考的css，就找到了這個好用的工具 CSS Arrow Please
透過GUI點一點就會產生樣式了