August 31, 2018
花了一個多小時的車程，在下車後，三個小時卻走不完100公尺，卻足夠讓我細細描述這裡的植物故事，等等晚上還要去開會呢...
與平地不同的植物生態，類似的山壁上，有著不一樣的植物與故事；不過... 這裡的昆蟲與壁虎們，應該是我怕它，還是它應該怕我...
▼假柃木（賽柃木
與平地不同的植物生態，類似的山壁上，有著不一樣的植物與故事；不過... 這裡的昆蟲與壁虎們，應該是我怕它，還是它應該怕我...
▼假柃木（賽柃木
August 23, 2018
最近做一個案子，並非一般型態的網站，必須大量使用程式碼來控制圖像位置與顯示，其中之一就是在 a:hover 或是其他元素 :hover 之下，同時指定多重指定一個以上的位置同時顯示不同元素，在以前一定要靠 Javascript +其他方式來寫，現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示，可以在上層加上區塊元素（div）使用 position 來做文字元素（i or a or span）定位相對位置，應該就可以解決了，當然這裡只是簡單的範例。
範例參考：點這裡
範例參考：點這裡
July 25, 2018
跟工程師討論後，他想要使用JavaScript來呈現動畫效果，我也有另外一套方式，將在行進中的動畫改變成不同圖片的方式，來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置（碰撞與否），但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗，可愛吧？！
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
June 7, 2018
May 28, 2018
這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎，做下筆記。
▼電腦版介面
▼手機版介面 （以ICON做區別）
▼電腦版介面
▼手機版介面 （以ICON做區別）
May 28, 2018
說明：在CSS 的Class名稱中，只要包含「test」便改變屬性設定
中文範例：點這裡
CSS部分：
div[class*="test"]{
background:rgba(255,0,0,1.00);
color: #ffffff;
}
中文範例：點這裡
CSS部分：
div[class*="test"]{
background:rgba(255,0,0,1.00);
color: #ffffff;
}
