訂閱/取消電子報 | 用RSS訂閱文章 |
▌訂閱、追蹤本站最新文章
§歡迎加入臉書粉絲團
§歡迎加入Google+社交圈

如何用 CSS 做出滑動開/關切換按鈕?

在 Windows、Android、IOS 或是網頁上經常都可以看到滑動型的開/關切換按鈕,如果自己在網頁上要做出如此效果的按鈕,免用 Javascript 就可以辦到,proto.io 網站提供滑動開/關切換按鈕 CSS 語法產生器,透過介面輸入所需條件,便可產生 CSS 語法,方便你應用在網頁上。
ContentPhoto2819

喜歡 Instagram 圖片濾鏡效果嗎? 透過 Instagram.css 網站就可輕鬆達成

Instagram 是個圖片與影片分享社群網站,其中最讓人喜愛的便是圖片的濾鏡效果,有了濾鏡的色彩協助,它可以快速的讓圖片變得更有質感,手機內建的相機功能也有提供濾鏡功能,拍完照片,就能選取包裝好的濾鏡來套用,如果是在網頁要呈現多種濾鏡效果,可以來使用 Instagram.css 網站所提供的純 CSS 濾鏡效果,使用方式很簡單,只要套用不同 CSS 名稱,就能更換濾鏡,該套純 CSS 濾鏡效果支援 Chrome (18+)、Microsoft Edge (13+)、Firefox (35+)、Safari (6+)、Opera (15+) 等瀏覽器。
ContentPhoto2817

ICOOON MONO 免費圖示,個人與商用皆可使用

圖示,就像交通號誌一樣,要設計的讓人一看就懂,「ICOOON MONO」是來自日本的一個免費圖示集網站,提供各種主題類別的圖案,像是人物、美食、商業、健康、時尚、活動、動植物、交通工具、建築、藝術音樂、體育、文具雜貨、符號、教育、電子產品等等,收錄超過 6000 個免費圖案,各圖示均提供 16px、32px、48px、64px、128px、256px、512px 大小,格式有 PNG、JPG、SVG、Illustrator Ai、Photoshop EPS,且可線上預覽、切換或調整顏色,無需註冊,所有圖示都可下載,個人或商業用途均可。
ContentPhoto2777

利用 Google 測試網頁顯示在行動裝置上的相容性

瀏覽網頁的裝置,早已不再限定是電腦,越來越多的用戶,還會選擇平板或手機,因此,對於網頁開發人員來說,網頁的設計,就必須考量多種裝置在不同解析度所要呈現的網頁內容,對開發來說可能不是問題,反倒是測試比較麻煩,所幸 Google Search Console 有提供「行動裝置相容性測試」網站,讓測試人員只需輸入網址,就能測試所開發網頁,在行動裝置上顯示的樣貌,進而節省網頁上線時間。
ContentPhoto2766

HTML Table Styler 📅 CSS Generator 免費互動式的 HTML 表格與 CSS 線上程式碼產生器

對 HTML 的初學者來說,如果有 HTML 與 CSS 相關的工具來輔助入門,將可事半功倍,以網頁的製作來看,通常都少不了 table 與 div 的應用,如果要有些變化,就需要在色彩、框線、文字、背景等多加著墨,HTML Table Styler 📅 CSS Generator 是一個免費互動式的 HTML 表格與 CSS 線上程式碼產生器,透過操作方便的調整介面,就能產生出 Gradient、Box Shadow、Text Shadow、Color、Font、Table、Column Border、Border Radius、Transform、Background 各種樣式,每種均可產生 HTML、CSS Code,且可預覽,另外,針對 table 要改用 div 也提供轉換器,讓初學過程大幅減短,兼顧工作效率。
ContentPhoto2755

如何使用 OneDrive 雲端硬碟的「內嵌」功能,讓文件、圖檔直接顯示在其他網頁上?

一直以來,網頁內圖片的顯示,佔據了網站流量的大宗,因此有些架站服務,會限制流量或限制檔案大小,甚至不允許上傳多媒體類型的檔案,該如何有個品質穩定、管理方便又能免費使用顯示在其他網頁上的儲存空間呢?答案就是利用微軟的 OneDrive 雲端硬碟,透過 Windows 作業系統結合的 OneDrive 在「檔案總管」就能方便管理檔案,想要將文件、圖片或影音檔直接顯示在其他網頁上也只要透過內建的「內嵌」功能就能達成,且同時支援 SSL 與設定圖片尺寸。
相關操作,還可以參閱:
ContentPhoto2740