2018年6月29日 星期五

2018年6月28日 星期四

2018年6月27日 星期三

2018年6月26日 星期二

2018年6月25日 星期一

2018年6月24日 星期日

2018年6月22日 星期五

2018年6月21日 星期四

2018年6月20日 星期三

2018年6月19日 星期二

2018年6月18日 星期一

2018年6月17日 星期日

CSS3 動畫，hover 離開後動畫回播

發表於 下午12:37 /  沒有留言
標籤
用 CSS3 做動畫，比較簡單的 transition 的話當我們是使用 :hover 觸發的話，會在我們離開後自動回轉回去，但用 animation 的話則無法，所以如果我們想要做比較複雜的動畫的話，
就必須要再寫一個回播的的動畫才可以，簡單的如下：



在 hover 跟原始的屬性上各自加上不同播放方向的動畫就好了，但可能會有個缺點是一開始進來的時候動畫先播一次，這個也可以用一些技術上的方式解決。
Read more

2018年6月16日 星期六

2018年6月15日 星期五

2018年6月14日 星期四

2018年6月13日 星期三

2018年6月12日 星期二

2018年6月11日 星期一

2018年6月10日 星期日

[Pokémon-Info] UI 調整與其他型態寶可夢資訊

發表於 2018年6月10日 星期日 下午4:33 /  沒有留言
標籤 , ,


花了點時間把同一隻寶可夢如果有其他形態的資料加上去，比如噴火龍的超進化型態或是代歐奇希斯的各種型態，另外也在 UI 上做了一點調整，希望大家用起來更順手。

目前資料建到第三世代，其他寶可夢資料與遊戲資料也會陸續新增上去，也歡迎大家給我在製作上的建議喔。


Read more

2018年6月9日 星期六

2018年6月8日 星期五

2018年6月7日 星期四

2018年6月6日 星期三

[DeTools] 台灣制島等級地圖

發表於 下午11:22 /  沒有留言
標籤 ,


因為網友說沒有綠島、蘭嶼那些小島，所以又做了一個台灣制島等級地圖，只要點一點就可以就算你在台灣各島之間的分數喔!

不過由於小島很多，所以這個地圖主要只有比較大的島，而像澎湖、金門和馬祖這種的群島也歸在一個，這個難度就比台灣那個困難多了吧。

如果對我製作的小工具有任何意見和建議也歡迎提出喔。
Read more

2018年6月5日 星期二

2018年6月4日 星期一

HTML 轉圖片- html2canvas

發表於 2018年6月4日 星期一 上午12:00 /  沒有留言
標籤


想要把 html 直接轉成圖片下載，這個 html2canvas 的 plugin 非常有用，以往需要 jQuery，現在也改成不用也可以執行了，使用方法很簡單，裝好 plugin 後用官網的方式就可以產生截圖。

view plaincopy to clipboardprint
  1. html2canvas(document.querySelector("#capture")).then(canvas => {   
  2.     document.body.appendChild(canvas)   
  3. });  

簡單講就是要指定要產生截圖的 id，這樣可以很方便的選擇 html 上的區塊產生圖片，其中 canvas 就是產生時的圖片，可以直接把他 append 到 html 上，或是使用以下方法直接下載。

view plaincopy to clipboardprint
  1. $("#auto").attr('href', canvas.toDataURL("image/png"));   
  2. $("#auto").attr('download','download.png');   
  3. lnk = document.getElementById("auto");   
  4. lnk.click();  

這邊是建一個 a，隱藏並設定 id=auto ，在使用 html5 新增的 download 屬性直接將產生的圖檔透過虛擬點擊的方式下載下來。

參考: jQuery 網頁特定區塊的截圖外掛 html2canvas
Read more

2018年6月3日 星期日

html5 a 的 download 屬性

發表於 下午11:36 /  沒有留言
標籤
html5 在 <a> 新增了一個 download 屬性，以往下載一個檔案可以簡單的用 a 加上連結，瀏覽器會幫你開啟一個新的頁籤下載，在 html5 加了這個屬性之後，就可以直接把檔案下載下來不用在另開頁籤了。

若在 download 加上屬性的値就可以設定下載的檔名，可以不用設定副檔名，只是要注意這個屬性跨網域(包含子網域)就無法作用了。
Read more

[DeTools] 台灣制縣地圖

發表於 下午2:50 /  5 留言
標籤 , ,
講制縣有點怪，總之是最近日本那個旅遊的成就地圖又被大家廣泛討論，所以我也做了一個台灣版的，覺得地圖在這方面的應用以後應該還大有可為，也歡迎大家一起來玩及分享，並提供我在製作上的意見喔。

台灣制縣地圖產生器

分類的方式跟日本一樣，但其實台灣比較想其實評分標準是可以調整的，不過就先這樣大家來玩看看計算自己的分數吧。

Read more

CSS 的穿透屬性- pointer-events

發表於 下午2:45 /  沒有留言
標籤 ,
這屬性最近用到覺得很方便，主要是當 html 上有兩個東西疊在一起時，hover 到上面那個後，下面的就無法偵測到 hover 事件。



當我們把上面那一個 div 修改屬性為 pointer-events:none 時，下面的就可以 hover 了。


這個屬性給 svg 可以玩得更多，完整的屬性說明如這篇文章介紹:

auto
pointer-events 未指定時的預設屬性，對於SVG内容，該值与visiblePainted效果相同
none
元素永遠不會成為滑鼠事件的target。但是，當其後代元素的pointer-events屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情况下，滑鼠事件將在捕獲或冒泡階段觸發父元素的事件真聽器。

visiblePainted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標：


visibility屬性值為visible，且滑鼠游標在元素内部，且fill屬性指定了none之外的值
visibility屬性值為visible，滑鼠游標在元素邊界上，且stroke屬性指定了none之外的值

visibleFill
只適用於SVG。只有在元素visibility屬性值为visible，且滑鼠游標在元素内部時,元素才會成為滑鼠事件的目標，fill屬性的值不影響事件處理。
visibleStroke
只適用於SVG。只有在元素visibility屬性值为visible，且滑鼠游標在元素邊界時,元素才會成為滑鼠事件的目標，stroke屬性的值不影響事件處理。
visible
只適用於SVG。只有在元素visibility屬性值为visible，且滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標，fill和stroke屬性的值不影響事件處理。
painted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標：


滑鼠游標在元素内部，且fill屬性指定了none之外的值
滑鼠游標在元素邊界上，且stroke屬性指定了none之外的值

visibility屬性的值不影響事件處理。
fill
只適用於SVG。只有滑鼠游標在元素内部时,元素才會成為滑鼠事件的目標，fill和visibility屬性的值不影響事件處理。
stroke
只適用於SVG。只有滑鼠游標在元素邊界上時,元素才會成為滑鼠事件的目標，stroke和visibility屬性的值不影響事件處理。
all
只適用於SVG。只有滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標，fill、stroke和visibility屬性的值不影響事件處理。



最近有用在台灣制縣地圖上，就不會因為文字疊在圖片上點不到了。

Read more

2018年6月2日 星期六

[SVG] 繪圖

發表於 下午4:00 /  沒有留言
標籤 ,
矩形使用 rect

可以設定的屬性有:

x: 起始點 x 軸的座標
y: 起始點 y 軸的座標
width: 矩形的寬度
height: 矩形的高度
rx: 圓角的 x 軸半徑
ry: 圓角的 y 軸半徑
transform: 矩形的變形效果

style 可以設定的值有

fill: 圖形內部的填滿顏色
fill-opacity: 圖形內部的不透明度值
stroke: 圖形的邊框顏色
stroke-width: 圖形的邊框寬度
opacity: 圖形的不透明度值
Read more

[SVG] 矩形基本繪圖

發表於 下午3:35 /  沒有留言
標籤
svg 有以下幾種基本的繪圖標籤：
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

要繪製的時候先要用 svg 的標籤，再依想繪製的形狀使用繪製的標籤。


其中 rect 是基本矩形標籤，可以設定寬高
style 內是 css 定義樣式，
fill 設定背景色
stroke-width 設定邊框粗細
stroke 設定邊框顏色

所以我們也可以改成用 css 控制屬性



此外我們還可以用設定形狀的位置還有透明度等


x, y 用來設定離左上角的位置，透明度分為 fill-opacity 跟 stroke-opacity，個別設定填色和邊框的透明度。


加上 rx 及 ry 可以設定矩形的圓角。

Read more

[SVG] 簡介

發表於 下午3:01 /  沒有留言
標籤
這幾年來因為製作網頁時需要兼顧到在各載具都能很適當的呈現內容，除了大家常聽到的 RWD(響應式網頁設計)外，圖片也都是一個時常需要處理到的議題，我們可以使用 css 的 media query 或 html 的 picture 標籤在各個解析度範圍內設定要顯示的圖片外，另外像 icon 或 logo 這種相對比較單純的圖形，則可以使用向量圖讓圖片不管如何縮放都不會失真，加上又只需要準備一個檔案，相對起來輕鬆又愉快。

以下為制服地圖網站的 logo 圖片，即以 svg 格式儲存。


現在許多網站也都把 logo 改成 svg 的圖片，筆者本人有在講授前端相關的課程，學生們結訓後也不少跟我反應他們工作後也都會把公司的 logo 改成 svg 的格式，而要製作 svg 也很簡單，只要會使用 illustrator 繪圖，在存檔的時候將格式設定為 .svg，就可以 svg 以 img 標籤嵌入網頁，或直接將原始碼嵌入網頁可進一步設定及操作。
Read more

2018年6月1日 星期五

訂閱： 文章 (Atom)
Related Posts Plugin for WordPress, Blogger...