CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

常可以見到在網路上關於 CSS 排版的提問,例如元件在容器內如何橫排、對齊或是自動縮放等問題,而這些問題幾乎都可以使用 CSS Flexbox 來解決,那什麼是 Flexbox 呢?簡單的說就是將容器的 display 屬性設定為 flex,再透過 flex 的相關屬性來決定容器內的元件要如何排版,所以 Flex 可以分成控制外容器及控制內元件的兩個主要類別屬性,如果是 CSS Flexbox 的初學者建議先看 圖解:CSS Flex 屬性一點也不難 這篇文章,因為即便是想要利用 CSS Flexbox Generator 這個網站來自動產生 flex 相關的 CSS 語法,你也可能需要對 flex 屬性有基本的認識,即便是不全,在實際操作該網站後,便可以完全釐清疑問,增加自己對使用 flex 排版的功力。

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

WorldVectorLogo 免費下載全球知名企業 LOGO 圖示向量圖檔

做網頁、文宣品,如果需要放上企業品牌的 LOGO 圖示,像是 Google 旗下的 YouTube、Google Pay、Photos、Map...等眾多服務的代表圖示或是 Facebook、line、twitter社群網站的分享按鈕圖示時,通常都可以直接到官方網站下載圖示圖檔,然後根據所要的尺寸進行放大或縮小,方法雖可行,卻受限非向量圖檔的因素,品質很難統一。WorldVectorLogo 這個網站提供全球各大知名品牌的 SVG 向量圖示檔,不論對尺寸是要放大還是縮小,都能維持清晰度與一致性,大幅縮短網頁或文宣品的製做工時。
繼續閱讀»»»

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

Online Gantt 線上免費製作甘特圖

甘特圖(Gantt Chart)、要徑法(CPM)及計畫評核術(PERT)都是專案用來控制時程的技術,各有其優缺點,而甘特圖以條狀呈現,橫軸表示「時間」,縱軸表示「工作項目」,線條則表示整個工作期間,因其易懂、易學,故其為專案計畫與日程安排最常使用的工具。想要製作甘特圖,其實也不需要很複雜的工具,透過 Online Gantt 這個線上工具就可以輕鬆達成,以往類似的工具大都會要求使用者註冊,以方便後續對其專案檔的管理,而 Online Gantt 則無註冊帳號的要求,製作好的專案檔,使用者可以自行儲存到自己的電腦,需要編輯時,再將其匯入到網站來做維護,而編輯好的甘特圖還可以將其輸出成 Excel 或是 PDF 檔案,以提升檔案的流通率。
繼續閱讀»»»

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

在網頁中如果要用圖示,例如電話、郵件或是箭頭,以往的做法就是要有該圖示的圖片檔,將其放在指定的位置,但隨著螢幕大小多元化,固定尺寸的圖示圖片檔,缺點盡顯,除了佔用流量外,亦無法滿足螢幕大小的變化,因此將圖示如同網頁字形般的運用,是目前圖示應用在網頁的做法。不論是 Unicode、Icons - Google Fonts 、Font Awesome 都有提供適合在網頁中使用的字形化圖示集,CSS.GG 這個網站同樣提供免費的字形化圖示集,使用者可以自訂顏色、尺寸,再透過其所提供的 HTML,CSS、SVG 或是 TSX 語法就能應用到網頁上。
繼續閱讀»»»

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

Face Maker AI 透過草圖轉換成真實人臉

透過目擊者對嫌疑犯長相的描述,先以草圖繪製後,進而轉換成一張看似真實的照片,這是犯罪電影中常會有的劇情,而現實上 Massless 網站下的 Face Maker AI 這個免費服務也在幫你完成這個工作,使用者透過網站所提供的五官、特徵等繪圖工具繪製草圖,系統就會根據這些特徵轉換成一張真實的人臉圖片,其後,也可對轉換後的圖片進行調整,使其更符合心目中的長相,完成後,可下載成 PNG 圖檔,但會有浮水印。
繼續閱讀»»»

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

「臺灣音聲一百年」帶你重溫囡仔歌、電視廣告、笑詼唱片內的音聲

或許你聽過雨夜花、天黑黑、一隻鳥仔...等這些經典的歌曲,但你一定沒聽過這些歌曲還只能儲存在黑膠唱片時的版本,那些音聲的背景還會拌隨的沙沙的聲音,想重溫台灣早期的聲音,包括歌唱、笑詼(說話類)、廣告、禁歌、囡仔歌的聲音,可以來「臺灣音聲一百年」這個網站,該網站蒐錄了 1890年到 2019年間的各類的音聲,使用者可以透過關鍵字來搜尋音聲,例如很讓人印象深刻的撒隆巴斯之歌、聲寶牌拿破崙彩色電視廣告...等等,都可以透過線上來撥放這些每個時代所留下的歷史。
繼續閱讀»»»

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

教育部「楷書」、「宋體」及「隸書」字形檔免費下載使用

不論是手寫或是電腦打字,國字應該怎麼寫怎麼選字才算是標準呢?在正體字主題網中,有特別提出國字字形有兩個很重要特色,一是筆畫辨義,二是異體字很多: 

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

[ Excel ]如何使用圖示集來凸顯儲存格內的值?

在一堆的數據中,如果沒有特殊條件的標示,估計閱讀的人要耗費的心思也不輸製表人,以學生的成績來說好了,要列出所有學生的各科成績、平均應該都不難,但,數據這麼多,如果都是同一個顏色來顯示,這對看報表的人來說,實在無法一眼就看出成績之間的落差,在 Excel 中,我們可以透過格式化條件以資料橫條、色階或是圖示集來凸顯儲存格內的值,如此一來,對閱讀報表的人來說,也能快速掌握報表內的重點,快速做出決策。
繼續閱讀»»»

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

EngTRESS Font 英文字母標準字型,解決學習困擾

許多家長在教剛學習英文字母,若是想要製作一些教材時,通常英文預設字型是 Times New Roman, 但偏偏小寫a,g 與一般手寫 a, g 會不同,而且 Times New Roman 為了美觀,該字型設計的有稜有角,常會誤以為一定要畫出那些線條。為此,就必須改用 Comic Sans MS 字型,但此字型不夠端正,且小寫 t,大寫G, M 及Y 都與一般教學寫法有所出入,若改用 Arial 字型,是夠端正,但小寫 a 及大寫 I 又不合標準,而且所有字型都沒有輔助初學者的格線可以使用。EngTRESS 是一套標準英文字型,也能產生格線,對於有心要製作教材的家長或老師都有很大的幫助。
 

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

如何在瀏覽器玩 Windows 經典的「接龍」遊戲?

從微軟 Windows 95 作業系統開始就有內建的小遊戲像是接龍、踩地雷等,直到 Windows 8 推出後,這些遊戲才消失,想要重溫經典的「接龍」遊戲嗎?現在只要經由 Google 搜尋引擎打入 solitaire 關鍵字,就可以在微軟的 Edge 或 Google Chrome 瀏覽器上玩「接龍」遊戲。
 

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

如何使用 Live Stream Downloader 來下載網站內的串流影音?

現在有很多免費或付費的影音網站提供像是電影、台劇、陸劇、日據、韓劇、美劇、綜藝、卡通等各式各樣的影片供用戶觀看,其共通特點就是使用串流影音,讓用戶不需要下載整部影片就可以開始觀看,而想要下載這些影片,就需要透過工具,Live Stream Downloader 是個瀏覽器的擴充功能,不論是 Edge 或是 Chrome 均可以安裝,完成安裝後,當到達影音網站開始看影片時,該擴充功能便會由灰色轉換成彩色,提示使用者該部影片是可以下載的,因此當網路卡卡的時候,還不如將整部影片下載後再來看會比較過癮。

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

[ Google 試算表 ]如何將個人資料去識別化?

避免從資料直接或間接推斷出有關個人不想揭露的資訊,是個人資料去識別化的目標,例如從電話號碼的區號,推斷出居住地,或是由身分證號碼推斷出其性別,甚至是由職業別推斷出興趣或薪資等,這些看似平常的資料,但經由蒐集、處理、比對、分析後,就可以變成有用的資訊。那該如何將個人資料去識別化呢?如果是使用[ Google 試算表 ]時,我們可以運用 REPLACE 這個函數來將個人資料去識別化,例如將姓名變成 O家豪,身分證號 OO23465789 等。
繼續閱讀»»»

KeyChtouch 發表在 痞客邦 留言(0) 人氣()

Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。