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月19日 星期二
2018年6月18日 星期一
2018年6月17日 星期日
CSS3 動畫,hover 離開後動畫回播
用 CSS3 做動畫,比較簡單的 transition 的話當我們是使用 :hover 觸發的話,會在我們離開後自動回轉回去,但用 animation 的話則無法,所以如果我們想要做比較複雜的動畫的話,
就必須要再寫一個回播的的動畫才可以,簡單的如下:
在 hover 跟原始的屬性上各自加上不同播放方向的動畫就好了,但可能會有個缺點是一開始進來的時候動畫先播一次,這個也可以用一些技術上的方式解決。
Read more
就必須要再寫一個回播的的動畫才可以,簡單的如下:
在 hover 跟原始的屬性上各自加上不同播放方向的動畫就好了,但可能會有個缺點是一開始進來的時候動畫先播一次,這個也可以用一些技術上的方式解決。
2018年6月16日 星期六
2018年6月15日 星期五
2018年6月13日 星期三
2018年6月12日 星期二
2018年6月11日 星期一
2018年6月10日 星期日
[Pokémon-Info] UI 調整與其他型態寶可夢資訊

花了點時間把同一隻寶可夢如果有其他形態的資料加上去,比如噴火龍的超進化型態或是代歐奇希斯的各種型態,另外也在 UI 上做了一點調整,希望大家用起來更順手。
目前資料建到第三世代,其他寶可夢資料與遊戲資料也會陸續新增上去,也歡迎大家給我在製作上的建議喔。

2018年6月9日 星期六
2018年6月8日 星期五
2018年6月6日 星期三
2018年6月5日 星期二
2018年6月4日 星期一
HTML 轉圖片- html2canvas

想要把 html 直接轉成圖片下載,這個 html2canvas 的 plugin 非常有用,以往需要 jQuery,現在也改成不用也可以執行了,使用方法很簡單,裝好 plugin 後用官網的方式就可以產生截圖。
- html2canvas(document.querySelector("#capture")).then(canvas => {
- document.body.appendChild(canvas)
- });
簡單講就是要指定要產生截圖的 id,這樣可以很方便的選擇 html 上的區塊產生圖片,其中 canvas 就是產生時的圖片,可以直接把他 append 到 html 上,或是使用以下方法直接下載。
- $("#auto").attr('href', canvas.toDataURL("image/png"));
- $("#auto").attr('download','download.png');
- lnk = document.getElementById("auto");
- lnk.click();
這邊是建一個 a,隱藏並設定 id=auto ,在使用 html5 新增的 download 屬性直接將產生的圖檔透過虛擬點擊的方式下載下來。
參考: jQuery 網頁特定區塊的截圖外掛 html2canvas
2018年6月3日 星期日
html5 a 的 download 屬性
html5 在 <a> 新增了一個 download 屬性,以往下載一個檔案可以簡單的用 a 加上連結,瀏覽器會幫你開啟一個新的頁籤下載,在 html5 加了這個屬性之後,就可以直接把檔案下載下來不用在另開頁籤了。
若在 download 加上屬性的値就可以設定下載的檔名,可以不用設定副檔名,只是要注意這個屬性跨網域(包含子網域)就無法作用了。
Read more
若在 download 加上屬性的値就可以設定下載的檔名,可以不用設定副檔名,只是要注意這個屬性跨網域(包含子網域)就無法作用了。
2018年6月2日 星期六
[SVG] 矩形基本繪圖
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
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>
要繪製的時候先要用 svg 的標籤,再依想繪製的形狀使用繪製的標籤。
其中 rect 是基本矩形標籤,可以設定寬高
style 內是 css 定義樣式,
fill 設定背景色
stroke-width 設定邊框粗細
stroke 設定邊框顏色
所以我們也可以改成用 css 控制屬性
此外我們還可以用設定形狀的位置還有透明度等
x, y 用來設定離左上角的位置,透明度分為 fill-opacity 跟 stroke-opacity,個別設定填色和邊框的透明度。
加上 rx 及 ry 可以設定矩形的圓角。
[SVG] 簡介
這幾年來因為製作網頁時需要兼顧到在各載具都能很適當的呈現內容,除了大家常聽到的 RWD(響應式網頁設計)外,圖片也都是一個時常需要處理到的議題,我們可以使用 css 的 media query 或 html 的 picture 標籤在各個解析度範圍內設定要顯示的圖片外,另外像 icon 或 logo 這種相對比較單純的圖形,則可以使用向量圖讓圖片不管如何縮放都不會失真,加上又只需要準備一個檔案,相對起來輕鬆又愉快。
以下為制服地圖網站的 logo 圖片,即以 svg 格式儲存。

現在許多網站也都把 logo 改成 svg 的圖片,筆者本人有在講授前端相關的課程,學生們結訓後也不少跟我反應他們工作後也都會把公司的 logo 改成 svg 的格式,而要製作 svg 也很簡單,只要會使用 illustrator 繪圖,在存檔的時候將格式設定為 .svg,就可以 svg 以 img 標籤嵌入網頁,或直接將原始碼嵌入網頁可進一步設定及操作。
Read more
以下為制服地圖網站的 logo 圖片,即以 svg 格式儲存。
現在許多網站也都把 logo 改成 svg 的圖片,筆者本人有在講授前端相關的課程,學生們結訓後也不少跟我反應他們工作後也都會把公司的 logo 改成 svg 的格式,而要製作 svg 也很簡單,只要會使用 illustrator 繪圖,在存檔的時候將格式設定為 .svg,就可以 svg 以 img 標籤嵌入網頁,或直接將原始碼嵌入網頁可進一步設定及操作。
訂閱:
文章 (Atom)
文章
-
▼
2018
(528)
-
▼
六月
(66)
- 線上協作起手式
- 夕陽
- 個人問題
- 台灣五金行力挺阿根廷紀念帆布發售中
- 39 等
- 台北市公訓處資料收集與辨識班
- 你期待出現什麼
- 太陽岩
- 教學生 switch 判斷式
- 年輕人不用 fb 了
- 教麻瓜防身術
- 我要當女一的製作團隊成員
- 阿羅拉
- pokemon Go 好友系統
- 雷吉艾斯
- 前端班結訓
- 拆掉的兒童樂園
- 福音戰士與大叔
- 色違蓋歐卡
- 空總活動中心拆掉了
- 尊重專業
- [DeTools] BMI 計算機、銀行代碼查詢
- 拉普拉斯來我家
- JK 轉頭
- CSS3 動畫,hover 離開後動畫回播
- 幼基拉斯社群日
- 石碇服務區
- 自己微波
- 真實與虛擬的急凍鳥
- 講講 flex
- 下大雨假新聞
- 一月球迷開始
- google 搜尋 wingzero
- 身分證設計比賽
- gitLab 塞車
- 正義聯盟咖啡
- 學學金正恩
- photoshop 素材
- 年輕老師
- 爪爪
- 幼稚園與大學老師
- [Pokémon-Info] UI 調整與其他型態寶可夢資訊
- 韓索羅與侏羅紀世界2
- 面子果實
- 2018 NBA Filnals
- 台灣制縣地圖開發過程
- 6/6 PM6:00 的超夢
- 亞洲大學制服講座
- [DeTools] 年齡計算機
- [DeTools] 台灣制島等級地圖
- 洛克人 X 歷代八大魔王
- 9 小時的課
- DW 與 CSS
- 噗浪十週年
- 信義區的恐龍
- 女僕咖啡廳與寂寞經濟學
- HTML 轉圖片- html2canvas
- Switch 洛克人紀念合輯
- html5 a 的 download 屬性
- [DeTools] 台灣制縣地圖
- 色違化石翼龍
- [SVG] 繪圖
- [SVG] 矩形基本繪圖
- [SVG] 簡介
- 工地風制服美少女
- 聖母專校制服座談會
-
▼
六月
(66)

標籤雲
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
360
3D
3D Printer
3D Scanner
3D TV
3DS LL
3ds max
七大創意原則
七武海
九州
九型人格
人生
十大創新法則
三立
三立新聞網
三星
三國傳
千值練
大地盃
大阪
大津
大氣系
小田原
小朋友
小動畫
中央大學
中平商圈
中華職棒
互動設計
公視
天氣娃娃
心情日記
手機
手繪
日文
日本
日本戰國
日本職棒
日劇
月津港
火箭營
仙書紀
令和
北海岸
北海道
北關
可動群雄
台中
台南
台湾狼
台灣
台灣社群排行榜
台灣數位文化協會
台灣選舉地圖
史旺基
平面設計
未來國會
正妹
永平工商
生日
立委
光雕
印刷
名片
地科院
地球村
地圖
地震
好人卡
好軟體
好網站
年誌
成果展
早安
有聲書
江火明
自介
行銷
衣服
似顏繪
初音
完成品
尾牙
我的迷你城市
我要當女一
扭蛋盒玩
扭蛋戰士DASH
扭蛋戰士NEXT
汶萊
沖繩
狂新聞
京都
制服
制服大賞
制服女孩
命理
夜之祭
奈良
姊妹
宜蘭
東大特訓班
東京
武神降臨編
直播
社群日
股票
金流
金庸
侯文詠
勇者
厚生市集
咪醬
哆啦A夢
星座
活力熊
研究所
穿衣指數
紅色死神
美劇
風起雲湧
風雲祭
飛肯
香港
哥吉拉
展覽
座談會
旅行
旅遊
時報周刊
書
書單
栗原洋服店
格言
桃園
桌面寵物
氣象
氣象主播
氣象局
氣象預報
海洋堂
特殊符號
特攝
班服
神戶
神奇寶貝
紙公仔
紙模型
退休光碟
高中職博覽會
高校誌
假面騎士
偉大的航道
動物森友會
動畫
動畫術語
專家審查會議
專題
教學
產生器
設計
部落格
部落格小玩意
陳金鋒
創業
喬巴
媒體報導
減碳雙熊
無名
無障礙
程式
童顏app
絕對領域
萌
萌咩誌
評審
賀卡
超合金魂
超合金魂 F.A.
超級英雄圖譜
超級英熊
超級戰隊
跑馬燈
雲寶
黑襪
奧爾資訊
新聞易數
義大遊樂世界
聖鬥士星矢
資策會
路上觀察
遊記
遊戲
零秒出手
電子看板
電子書
電子報
電腦戰機
電影
預付卡
團體服
壽屋
夢想
慈幼社
漫畫
綠界
網頁
網頁作品
網站工具
網站優化
網路狂人週報
舞台背板
蜜月
酷瞧
颱風
餅乾
魂spec
彈珠台
影片
影音氣象
影集
影像處理
數位時代
樂樂小黃
模型
熱舞
獎金獵人
稻江護家
箱根
膝上襪
衛星雲圖
論壇
遮罩
戰鬥女子學園
戰隊
橋本環奈
機器人
機器人相關
講師
還願
黏土人
瀏覽器
翻譯
藍球教學
轉輪科技
鎌倉
雞排妹
顏文字
羅東
寶貝
籃球
蘋果日報
攝影
蘭友會
鐵啞鈴
魔神英雄傳
魔動王
讀書會
體育用品
ACA
ACE
AddThis
Adobe
Adobe XD
aerender
After Effect
AIR
AJAX
Android
AngularJS
AngularUI
Annual Analysis
ANSI
API
Apple
Apple Watch
AR
AR+
Arduino
array
Arrow
AS 3.0
background
BANDAI
Batman
BB戰士
bbs
blog
blogger
Blogger Touch
board game
bootstrap
Brave合金
browser
C3.js
CANDY醬
canvas
Card sorting
chrome
CI
CM's
cocos2D
CodeIgniter
color
COMPOSITE Ver. Ka
cookie
cosa
cosplay
css
css3
css教學
CW
CWB
D-Arts
D3.js
DC Comics
Death Note
deathhell
Decool
design
desktop
DeTools
Diablo
Discuz
display
dragon
embed
Emmet
EVA
excel
facebook
favicon
fc2
filter
Firebug
firefox
flash
Flex
FlickLinkr
flickr
FQL
fun電
Fun籃球
G Generation
G+
GARNiDELiA
GFF
GIGA合金
GIPHY
git
GleeFB
GleeShare
google
google adsense
Google Analytics
google datastudio
google fonts API
Google Geocoding API
Google Map API
google mapplets
google PageSpeed API
google tool bar
google+1
googlemaps
grid
GTI
GUNDAM
Gundam W
GUNDAM“EX-STANDARD”
Gunpla
GunXSword
hairbook
hairdodo
hairmap
Hami App
HG
HiRM
Homebook
HPX
htaccess
html
html5
iAngel
ichannel
ico
icon
IDEO
IE
III
illustrator
ImageMagick
InDesign
info graphic
instagram
iOS
iphone
Iron Man
ITCD
iTenki
IxD
javascript
JK
jquery
jquery plugin
jQuery UI
js
JSDC
JSON
JSON-LD
Keroro魂
Kobe
Koobii 高校誌
kuso
La new
lazyload
LEGO
less
life style
Line
Linux
localStorage
logo
LucyPop
Mac OS
MAD
mailgun
Maker Fair
Marvel Comics
MegaHouse
meta
Metal Robot 魂
MG
MIC
mit.jobs
MLB
mobile app
mobile web
movie
MSI
MSN小圖
MSN小綠人
msn表情符號
MSN機器人
mssql
MTK
My Weather
MySQL
NBA
NCU
NeoShop
node.js
nokia
NXEDGE STYLE
NXT
ONEPIECE
open data
OpenCart
ovomedia
Pantone
PChome
PDO
persona
photoshop
photoshop教學
php
phpFlickr
Picasa
pintrest
Pixnet
PIXOSTYLE
plurk
pokemon
Pokemon Go
Pokémon-Info
PPT
premiere
PTT
pv3d
PWA
Python
Raspberry Pi
react.js
reCAPTCHA
Restaurant City
RIOBOT
RoboInfo
robot
ROBOT魂
rockman
rockman X
RQ-Star
RWD
S.H.E
S.H.Figuarts
S市集
SCANDAL
scratch
Scss
SDCS
SDX
Semantic UI
SEO
showtenki
simpleXML
SketchUp
slideshow
sliding doors
spotlights
SQL
SQL Server
srw
SRW OG
star wars
Sublime Text
Super Heroes
Super MiniPla
Super Robot超合金
Supergirl
svg
switch
SyntaxHighlighter
TapFighters
TenkiMaps
TibaMe
Titanium
TP合金
TweenMax
twitter
U-Mobile
UCD
UI
UiGathering
Uniform Map
Unity
Usability
UX
video
vimeo
vQmod
Vue.js
WBC
WCF
weather
weather icon
weatherrisk
web
Web Design Theory
WebApp
WebConf
widget
Win7
wingzero
Wordpress
XAMPP
xml
XMLHttpRequest
Xuite
Yahoo API
Yahoo open hack
Yahoo!
Yam
YouTube
ZOIDS
