CSS tools - Revision history

Planetoid: Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} "

2025-01-08T12:17:44Z

Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} "

← Older revision		Revision as of 20:17, 8 January 2025
Line 92:		Line 92:

	=== 不同螢幕解析度檢視網頁 ===		=== 不同螢幕解析度檢視網頁 ===
	~~: [[Image:Owl icon.jpg]]~~ {{exclaim}} 以下服務模擬不同螢幕解析度，跟 [https://en.wikipedia.org/wiki/Mobile_device_detection Mobile device detection] 會判斷裝置送出的 Header 資訊不同，因此跟實際裝置的測試狀況會不同。		{{Tips}} {{exclaim}} 以下服務模擬不同螢幕解析度，跟 [https://en.wikipedia.org/wiki/Mobile_device_detection Mobile device detection] 會判斷裝置送出的 Header 資訊不同，因此跟實際裝置的測試狀況會不同。

	* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}		* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}

Unknown user: /* 挑選顏色 */

2023-12-26T04:10:29Z

挑選顏色

← Older revision		Revision as of 12:10, 26 December 2023
Line 152:		Line 152:
	* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次		* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次
	* [https://atmos.style/color-generator Color generator \| Find harmonious colors for UI \| Atmos] 提供中性、成功、警告、危險、資訊、主要、次要等用途的隨機顏色。可以選定某個顏色後，再隨機產生其他輔助顏色。		* [https://atmos.style/color-generator Color generator \| Find harmonious colors for UI \| Atmos] 提供中性、成功、警告、危險、資訊、主要、次要等用途的隨機顏色。可以選定某個顏色後，再隨機產生其他輔助顏色。
			* [https://hexcolor.co/palette-generator Hex Colors]（hexcolor.co）是一個提供各種免費顏色工具的網站，非常適合專業設計師和顏色愛好者。它具有顏色選擇器、調色板生成器和漸層產生器等功能。用戶可以探索帶有十六進制代碼的各種顏色名稱，生成顏色漸層的 CSS，檢查顏色對比以確保可用性 (accessibility)，甚至從圖片中節取出顏色調色板。該網站還提供了關於各種顏色模型和配色的資訊，例如互補色和相似色，使其成為顏色選擇和設計靈感的全面資源。

	色碼換算		色碼換算

Unknown user: /* 不同螢幕解析度檢視網頁 */

2023-05-03T02:42:19Z

不同螢幕解析度檢視網頁

← Older revision		Revision as of 10:42, 3 May 2023
Line 98:		Line 98:
	* [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) for Windows {{IE}}		* [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) for Windows {{IE}}
	** 選單位置: 工具 -> 重新調整大小		** 選單位置: 工具 -> 重新調整大小
	* [http://resizemybrowser.com/ resizeMyBrowser]
	* [https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal Resolution Test] for {{chrome}}		* [https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal Resolution Test] for {{chrome}}
	* [http://mattkersley.com/responsive/ Responsive Design Testing] {{exclaim}} Not work for HTTPS e.g. [https://www.facebook.com/ Facebook] or [https://tw.discount.yahoo.net/index.php?group=all&_co=pSDA&_co2=pSDA Yahoo奇摩] {{access \| date = 2015-07-16}}		* [http://mattkersley.com/responsive/ Responsive Design Testing] {{exclaim}} Not work for HTTPS e.g. [https://www.facebook.com/ Facebook] or [https://tw.discount.yahoo.net/index.php?group=all&_co=pSDA&_co2=pSDA Yahoo奇摩] {{access \| date = 2015-07-16}}
	* [http://viewlike.us/ ViewLike.Us] ViewLikeUs - Check Sites in Various Resolutions! [http://blog.yalinfo.com/2009/07/viewlikeus.html 教學]
	* [http://whatismyscreenresolution.net/multi-screen-test Test your website at different screen resolutions: Multi Screen Test] Not work for HTTPS e.g. [https://tw.yahoo.com/ Yahoo奇摩] {{access \| date = 2016-04-26}}		* [http://whatismyscreenresolution.net/multi-screen-test Test your website at different screen resolutions: Multi Screen Test] Not work for HTTPS e.g. [https://tw.yahoo.com/ Yahoo奇摩] {{access \| date = 2016-04-26}}

Unknown user: /* 不同螢幕解析度檢視網頁 */ remove Resizer

2023-05-03T02:25:07Z

不同螢幕解析度檢視網頁: remove Resizer

← Older revision		Revision as of 10:25, 3 May 2023
Line 95:		Line 95:

	* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}		* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}
	* {{Gd}} [http://design.google.com/resizer/ Resizer - Google Design] allowed to switch to different screen resolution {{access \| date = 2016-02-28}}
	* [http://lab.maltewassermann.com/viewport-resizer/ Responsive design testing tool – Viewport Resizer – Device simulation tool] 提供瀏覽器按鈕(bookmarklet). {{exclaim}} It follows [http://content-security-policy.com/ Content Security Policy]. That's means it's not wok on facebook & gmail. {{access \| date = 2015-07-16}}		* [http://lab.maltewassermann.com/viewport-resizer/ Responsive design testing tool – Viewport Resizer – Device simulation tool] 提供瀏覽器按鈕(bookmarklet). {{exclaim}} It follows [http://content-security-policy.com/ Content Security Policy]. That's means it's not wok on facebook & gmail. {{access \| date = 2015-07-16}}
	* [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) for Windows {{IE}}		* [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) for Windows {{IE}}

Unknown user: /* 不同螢幕解析度檢視網頁 */ remove Screenfly

2023-05-03T02:24:49Z

不同螢幕解析度檢視網頁: remove Screenfly

← Older revision		Revision as of 10:24, 3 May 2023
Line 94:		Line 94:
	: [[Image:Owl icon.jpg]] {{exclaim}} 以下服務模擬不同螢幕解析度，跟 [https://en.wikipedia.org/wiki/Mobile_device_detection Mobile device detection] 會判斷裝置送出的 Header 資訊不同，因此跟實際裝置的測試狀況會不同。		: [[Image:Owl icon.jpg]] {{exclaim}} 以下服務模擬不同螢幕解析度，跟 [https://en.wikipedia.org/wiki/Mobile_device_detection Mobile device detection] 會判斷裝置送出的 Header 資訊不同，因此跟實際裝置的測試狀況會不同。

	* {{Gd}} [http://quirktools.com/screenfly/ Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions] {{exclaim}} Not work for HTTPS e.g. [https://www.facebook.com/ Facebook] or [https://tw.discount.yahoo.net/index.php?group=all&_co=pSDA&_co2=pSDA Yahoo奇摩] {{access \| date = 2015-07-16}}
	* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}		* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}
	* {{Gd}} [http://design.google.com/resizer/ Resizer - Google Design] allowed to switch to different screen resolution {{access \| date = 2016-02-28}}		* {{Gd}} [http://design.google.com/resizer/ Resizer - Google Design] allowed to switch to different screen resolution {{access \| date = 2016-02-28}}

Unknown user: /* 挑選顏色 */

2022-08-24T02:57:39Z

挑選顏色

← Older revision		Revision as of 10:57, 24 August 2022
Line 155:		Line 155:
	* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}		* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}
	* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次		* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次
	* [https://atmos.style/color-generator Color generator \| Find harmonious colors for UI \| Atmos] ~~提供中性、成功、警告、危險、資訊、主要、輔助用途的隨機顏色。可以選定某個顏色後，再隨機產生其他輔助顏色。~~		* [https://atmos.style/color-generator Color generator \| Find harmonious colors for UI \| Atmos] 提供中性、成功、警告、危險、資訊、主要、次要等用途的隨機顏色。可以選定某個顏色後，再隨機產生其他輔助顏色。

	色碼換算		色碼換算

Unknown user: /* 挑選顏色 */

2022-08-24T02:46:59Z

挑選顏色

← Older revision		Revision as of 10:46, 24 August 2022
Line 155:		Line 155:
	* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}		* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}
	* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次		* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次
	* [https://atmos.style/color-generator Color generator \| Find harmonious colors for UI \| Atmos] ~~可以選定某個顏色後，再隨機產生其他輔助顏色~~		* [https://atmos.style/color-generator Color generator \| Find harmonious colors for UI \| Atmos] 提供中性、成功、警告、危險、資訊、主要、輔助用途的隨機顏色。可以選定某個顏色後，再隨機產生其他輔助顏色。

	色碼換算		色碼換算

Unknown user: /* 挑選顏色 */

2022-08-24T02:45:15Z

挑選顏色

← Older revision		Revision as of 10:45, 24 August 2022
Line 155:		Line 155:
	* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}		* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}
	* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次		* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次
			* [https://atmos.style/color-generator Color generator \| Find harmonious colors for UI \| Atmos] 可以選定某個顏色後，再隨機產生其他輔助顏色

	色碼換算		色碼換算

Unknown user: /* 挑選顏色 */

2022-07-04T02:34:32Z

挑選顏色

← Older revision		Revision as of 10:34, 4 July 2022
Line 154:		Line 154:
	* [http://colormind.io/ Colormind - the smart color palette generator] {{access \| date = 2017-03-27}}		* [http://colormind.io/ Colormind - the smart color palette generator] {{access \| date = 2017-03-27}}
	* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}		* [https://picular.co/ Picular] 教學: [https://free.com.tw/picular/ Picular 色彩界的 Google！以關鍵字搜尋各種顏色靈感] {{access \| date = 2018-09-14}}
			* [https://hexcolor.co/css-color-extractor/ CSS Color Extractor - Online CSS Color Checker Tool] 輸入 CSS 網址，會擷取色票、顏色被使用幾次

	色碼換算		色碼換算

Unknown user: /* 其他工具 */

2022-06-02T05:56:06Z

其他工具

← Older revision		Revision as of 13:56, 2 June 2022
Line 178:		Line 178:
	* [[Javascript debug]]		* [[Javascript debug]]
	* 填充版面工具: [[Random content generator‎‎]] e.g. [http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers/ The Top 8 Placeholder Services for Web Designers \| Nettuts+]		* 填充版面工具: [[Random content generator‎‎]] e.g. [http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers/ The Top 8 Placeholder Services for Web Designers \| Nettuts+]

	* [https://www.favicon-generator.org/ Favicon & App Icon Generator]		* [https://www.favicon-generator.org/ Favicon & App Icon Generator]

			* [https://chrome.google.com/webstore/detail/outline-chrome-extension/gkakhdblgdnbknpibnflepnhcpmpohnm Outline Chrome Extension] for Edge & {{Chrome}} 顯示每個元素的外框線

	----		----