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

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

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

littlesnippets.net 免費取得 CSS、JavaScript 動畫效果程式碼

littlesnippets.net 免費取得 CSS、JavaScript 動畫效果程式碼

寫網頁時難免會有需要一些動畫效果,例如當滑鼠指標在按鈕、圖片、功能表上或離開時,或是希望做出具有專業水準個人檔案、新聞、產品卡時,如果是初學者想要從無到有,可能需要花費較長時間,要是可以參考別人已做出的效果,取得其程式碼再來修改成自己想要的效果,這樣才能事半功倍。littlesnippets 這個網站提供按鈕、圖片、Logo、News Card、Menu、Profile Card ....等各式各樣的 CSS + JQuery 效果,且每個都有效果展示,更提供 HTML、CSS、JQuery 完整的範例程式碼,用戶只需取得這些程式碼,稍加修改,就可以在自己網頁呈現,相當方便。

angryTools CSS Animation Kit 純 CSS 語法動態特效產生器

angryTools CSS Animation Kit 純 CSS 語法動態特效產生器

寫網頁時,當需要應用一些特效,例如標題文字會閃動、旋轉等,以吸引讀者的注意,很多人都會考慮使用 JavaScript 來實現,如果要透過 CSS 來呈現,對 CSS 語法不熟悉,則變成是一個困擾,即便寫出,還要考慮各大瀏覽器的支援程度。angryTools 網站提供 CSS Animation Kit 產生的文字特效,支援 Edge、Chrome 主要瀏覽器,選好效果可立即檢視與產生 CSS 語法,複製即可使用,簡單方便。

Da Button Factory 線上網頁按鈕產生器

Da Button Factory 線上網頁按鈕產生器

Da Button Factory 是一個可以在線上製作網頁按鈕的免費產生器,所產生的網頁按鈕會包含已使用的背景圖片(PNG、GIF、JPEG、ICO)及相對應的 CSS 程式碼可供下載,讓你方便應用在網頁上;Da Button Factory 可讓使用者自訂所要產生網頁按鈕的樣式,亦可參考所提供的網頁按鈕範例再行修改,讓你幾乎不需要有任何美工的技巧,就能輕易做出有水準網頁按鈕。

DevDocs - Web 開發者必備的線上文件手冊

DevDocs - Web 開發者必備的線上文件手冊

對於要開發 Web 應用程式的初學者而言,要學的範圍很廣,最基礎的就有 HTML、JavaScript 與 CSS,若是還想結合資料庫,那可能還會選擇 PHP 或是 ASP.NET 等的開發工具來搭配所選的資料庫,因此,就基礎來說,一套有系統的整理各語法的使用方法與使用範例,絕對是初學者最快入門的方式。DevDocs 整理出 HTML、CSS、JavaScript、DOM、DOM Event、HTTP 等 Web 開發必須用到的各種語法並配上使用範例,縮短你在 Web 開發上摸索的時間與加快學習的腳步。

Diffchecker 線上找出文字內容的不同處

Diffchecker 線上找出文字內容的不同處

要找出兩個文字檔內容的不同處,尤其是那種落落長又有版本之分例如可用記事本開啟的程式語言、腳本之類的,像是 CSS、Javascript、HTML...等等,程式設計師有時為了比對出與上次版本的差異處,常常要用掉不少眼力,如果可以透過文字比對工具來進行,絕對可以事半功倍且精準,Diffchecker 這個網站除了有提供 Excel、PDF及圖片的比對工具外,還有提供線上文字比對工具,使用者只需貼上兩段文字,便會用顏色標示出兩者之間的不同處,方便使用者來查看。

EclipseCrossword 英文填字遊戲產生器

EclipseCrossword 英文填字遊戲產生器

填字遊戲不管是國字或是英文單字大家幾乎都有玩過,不過遊戲的難易度,不見得都適合每個人,EclipseCrossword 則是一套免費的英文單字填字遊戲產生器,可輸入適合程度的單字,就能幫你產生出填字遊戲的方格,並可產出以 JavaScript 為主的互動式 Html 網頁,並可列印出「空格+線索」,當然還有一份解答,另外也可儲存為 RTF 格式與 WMF 等格式。

emnu 步驟可視化的線上 C++ 編譯器

emnu 步驟可視化的線上 C++ 編譯器

「程式設計」已被明訂在十二年國教課綱的科技領域內,成為必修課程,其學習內容分為「演算法」、「程式設計」、「系統平台」、「資料表示、處理及分析」、「資訊科技應用」以及「資訊科技與人類社會」等六大面向,而在程式設計這塊,光是程式語言就有相當多種,但屹立不搖的大概就只有 C、C++、JAVA,網頁用的 PHP、JavaScript 等這幾種,但一法通、萬法通,不論程式語言出多少種,只要扎扎實實學好一種,其他的大概也能通個5、6成,剩下的就是各個語言上的限制了,想要學程式設計,看別人的程式碼相當有用,如果能自己實作更能融會貫通,emnu 是個免費的線上 C++ 編譯器,非常適合初學者及需要有步驟值的程式碼來這裡執行,例如寫了個迴圈,想要看迴圈內各變數的變化,emnu 就能幫你輕鬆實現,免去逐步 trace 過程。

EmuOS 在瀏覽器中模擬早期 Windows 作業系統並可玩多款經典遊戲

EmuOS 在瀏覽器中模擬早期 Windows 作業系統並可玩多款經典遊戲

很多人應該都沒接觸過 Windows 作業系統的早期版本,像是 Windows 95、98、Me 等,即便是現在自己要拿 PC 來安裝,估計也是困難重重,畢竟還要找出符合當時的硬體規格,這就有些麻煩,EmuOS 是個利用 JavaScript 模擬 Windows 作業系統的網路服務,不過對 Windows 著墨不深,主要是用來搭載遊戲及一些應用程式,像是大家熟悉的踩地雷、小精靈( Pac-Man )...等,還有就是 Winamp、小畫家、記事本...等經典應用程式,不論是要體驗早期 Windows 作業系統,還是要挑戰傳統的遊戲玩法,EmuOS 或許可以試試。

Free Colored ScrollBars 瀏覽器彩色滾動條(ScrollBar) CSS 及 JavaScript 特效產生器

Free Colored ScrollBars 瀏覽器彩色滾動條(ScrollBar) CSS 及 JavaScript 特效產生器

想要加強網頁的呈現效果,當然除了要有好的內容、合適的色彩及版型配置外,也可以在瀏覽器的外觀上動些手腳,像是使用 Free StatusTitle Maker 免費的網頁瀏覽器標題欄或狀態欄訊息產生器 在瀏覽器的標題或狀態欄做一些與眾不統的特效或是使用 Free Colored ScrollBars 這套免費的瀏覽器彩色滾動條(ScrollBar) CSS 及 JavaScript 特效產生器,來加強瀏覽器的上下左右的滾動條的特效。

Free JavaScript Editor 實用的 HTML 及 JavaScript 整合編輯器,具 Intellisense 功能

Free JavaScript Editor 實用的 HTML 及 JavaScript 整合編輯器,具 Intellisense 功能

Free JavaScript Editor 是一套同時具有 HTML 及 Javascript Intellisense 功能的免費網頁整合編輯器,以免費的網頁編輯器來說,是相當難得的,不過 Intellisense 的功能在 Free JavaScript Editor 的版本中只能使用 21天,這是唯一的限制,其他來說還是相當好用,在 Javascript 程式碼中,也內建了相當多實用型的程式碼,像是 Buttons and Links Effects、Dates and Clocks、Document Effects...等等,只要稍微編修改下就能應用,就算不拿來編輯網頁,用來參考這些實用性的 Javascript 程式碼及應用都相當值得。

Free PopUp Maker 建立彈出網頁的 JavaScript 程式碼產生器

Free PopUp Maker 建立彈出網頁的 JavaScript 程式碼產生器

要建立網頁內的點擊連結後,可以彈出新網頁頁面時,通常都是使用 HTML 內的 <a> 標籤並設定其屬性即可,但若是要做到較進階的功能,例如設定彈出頁面的外觀、大小或彈出時機,例如 Link Click、onMouseOver、onBlur、onError 或 onload...等等,使用 HTML 內的 <a> 標籤似乎比較難以達成,而需要靠 JavaScript。Free PopUp Maker 是一個可協助網頁在建立彈出新 URL 頁面時的 JavaScript 程式碼產生器,透過參數的選擇就可以將頁面的外觀、大小或彈出時機加以設定,並產生 JavaScript 程式碼,複製後貼到網頁內應用。