跳到主要內容

發表文章

目前顯示的是有「工具」標籤的文章

實用的假文產生器

網路上可以隨處搜尋到許多假文產生器（Lorem Ipsum Generator） 這裡我列出幾個較常使用的 https://www.lipsum.com/ https://loremipsum.io/ https://www.blindtextgenerator.com/lorem-ipsum 只是很可惜，這些假文產生器都沒有繁體中文的版本，但我個人是覺得用英文來排版，比中文的好看，哈~~ 如果真的想要中文假文，可以試試以下的網站 https://textgen.cqd.tw http://www.richyli.com/tool/loremipsum/ 裡面的文字真的是完全沒有任何義意，看得懂那還真的是異世界的人了
More »

好玩有趣的 SVG 動態效果

最近剛好在研究 CSS 動畫效果，有時網頁只是需要一個簡單動態效果，總不能花大錢製作影片吧？ 後來發現可以利用簡單的 SVG 及一些 CSS 手法，就可以讓圖片動起來 只能說…高手真的是很強！看完介紹影片後，才覺得自己好弱呀~~ 泡泡動態效果 Youtube影片介紹： https://youtu.be/liW6bDLnuuk （這個作者真的蠻強的，除了泡泡影片也有其他跟 CSS、JavaScript 有關的動態效果影片，我已經入坑加入追蹤了） 它是利用 SVG 的動態語法特性，再加上 CSS 的配合，製作出會動的感覺 影片中提到的「泡泡 SVG」網站在這裡： https://lokesh-coder.github.io/blobs.app/?e=6&gw=6&se=32&c=d1d8e0&o=0 ，免費使用，真是佛心來的呀~~ 依據影片教學我自己也製作出類似的動態效果 【 泡泡動態效果看這裡 】 另外我自己又延伸出波浪的動態效果，不過在做完之後，才發現這個網站更佛心，它能自動產生動態效果，只要把語法放進 HTML 裡面就可以了，哈！ 「波浪 SVG」： https://svgwave.in/ 【 波浪動態效果看這裡 】 詳細的 SVG 動態語法，可以參考該站的說明： https://ithelp.ithome.com.tw/articles/10159283
More »

專屬於臺灣的免費 ICON 圖示

網址：https://www.twicon.page/index.html 之前在瀏覽新聞時，注意到這個網站。 它裡面提供了專屬於臺灣意象的 ICON 圖示，重點是：它完全免費！ 這對很多設計師來說非常有吸引力，而且將這些圖示添加在自己的設計上，更有「台味」的感覺。 除了臺灣發明的小綠人外，還有女王頭、捷運…很有趣的感覺，大家若要使用，也可以依照使用狀況，自行下載不同的檔案類型。 作者還很有自信的在上面說道：會永久更新。哈~~~
More »

好用免費的Google Font

做網頁的人，常常會遇到的一個問題： 字體設定 現在的電腦系統五花八門，windows、mac、還有手機版 除了設定微軟正黑體、儷黑體…這些一般電腦都有安裝的字體外，如果想要使用圓體、宋體呢？ 申請每月付費的webfont是蠻不錯的，但Google硬是要搶人生意，用了一個Google Font，裡面支援六百多種不同的字體，雖然繁體中文只有個位數，但對我們做網頁的人真的是超級佛心來的！ Google Font 網站 https://fonts.google.com/ 使用方法： 範例 > 思源宋體 （搜尋Noto Serif TC） 1. 進入思源宋體的介紹頁面，將該字體加入 2. 這時畫面的右下角會出現一個小視窗清單 3. 將該視窗清單打開，將語法貼到對應的位置就可以了 Standard的語法請貼在<head>......</head> 裡，這樣才能讓桌機和手機都能套用到 若是使用@IMPORT的語法，雖然只要貼在<style type="text/css">.....</style> 裡，但會造成只有桌機能正常顯示，手機仍是會以手機的預設字體顯示 若想要有特別的粗體、斜體，都可以在CUSTOMIZE裡做勾選，勾選完後，一樣回到EMBED裡將語法複製下來貼上就可以囉！
More »

各式 HTML 符號一覽

41389 ＃ 41390 ＆ 41391 ＊ 41392 ※ 41393 § 41394 〃 41395 ○ 41396 ● 41397 △ 41398 ▲ 41399 ◎ 41400 ☆ 41401 ★ 41402 ◇ 41403 ◆ 41414 □ 41405 ■ 41406 ▽ 41407 ▼ 41408 ㊣ 41409 ℅ 41428 √ 41429 ＜ 41430 ＞ 41431 ＝ 41432 ≦ 41433 ≧ 41434 ≠ 41435 ∞ 41436 ≒ 41437 ≡ 41443 ～ 41444 ∩ 41445 ∪ 41446 ⊥ 41447 ∠ 41448 ∟ 41449 ⊿ 41450 ㏒ 41451 ㏑ 41452 ∫ 41453 ∮ 41454 ∵ 41455 ∴ 41456 ♀ 41457 ♂ 41458 ⊕ 41459 ⊙ 41460 ↑ 41461 ↓ 41462 ← 41463 → 41464 ↖ 41465 ↗ 41466 ↙ 41467 ↘ ★=2605　☼=263c　♥=2665　♠=2660　♨=2668 ♪=266a　♫=266b　☺=263a　♣=2663　☎=260e ☜=261c　◈=25c8　▒=2592　◐=25d0　☆=2606 ♀=2640　♂=2642　〒=3012　∩=2229　〃=3003 △=25b3　▲=25b2　▽=25bd　▼=25bc　□=25a1 ■=25a0　℅=2105　￡=ffe1　￠=ffe0　⊙=2299 █=2588　℃=2103　℉=2109　∮=222e　Θ=0398 ╭=256d　╮=256e　╰=2570　╯=256f　〥=0325 ◢=25e2　◣=25e3　◤=25e4　◥=25e5
More »

免費線上資源：圖庫

網路上百百種的圖庫資源，特別整理一下可以使用的（國內&國外） 【照片】 https://pixabay.com/ https://unsplash.com https://www.pexels.com/   https://mixkit.co/ https://stocksnap.io/ https://www.foodiesfeed.com/  （食物） （以下是免費與付費皆有，有需要的人可以參考） https://www.stockvault.net/ http://imcreator.com/free https://pickupimage.com/ https://www.crazy-tutorial.com/ http://kaboompics.com http://librestock.com https://tw.123rf.com https://pixabay.com/ http://www.freepik.com/ https://picjumbo.com/ https://www.freemediagoo.com/ 【向量圖】 https://www.freepik.com/popular-vectors （這個只能免費個人使用，無法商用） https://undraw.co/illustrations  （免費可變更顏色插畫） icons http://www.flaticon.com/ http://www.iconninja.com/ https://www.iconfinder.com 【文字字體】 http://fontfree.me （日文） http://www.1001fonts.com/free-fonts-for-commercial-use.html （英文） 想要中文只能用租的，或是到 Google Font 查詢也有一些免費的中文字體 【紋理】 https://www.toptal.com/designers/subtlepatterns/ 【圖片產生器】 https://picsum.photos/
More »