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

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

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

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

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 也提供轉換器,讓初學過程大幅減短,兼顧工作效率。

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

Cyotek Spriter 自動產出圖片型網頁的 CSS 及 HTML程式碼

如果不熟悉 HTML 與 CSS ,卻想要將自己所拍攝或蒐集來的圖片,放到網頁上,該如何做呢?Cyotek Spriter 這套免費的應用程式應該可以幫到你,從網頁布局、圖片挑選、CSS 套用、特效等,都可以透過圖形化的介面來操作,完成後,可預覽,並自動產生 HTML 及 CSS 程式碼,省去學習門檻,專注在攝影領域。

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

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

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

Duplicate Code Finder 找出重複的程式碼(免安裝)

Duplicate Code Finder 找出重複的程式碼(免安裝)

程式設計師通常會有寫完就忘記的困擾,常常寫程式碼會有似曾相識的感覺,可能在某個版本裡寫過,卻又找不到,這時候趕快來試試 Duplicate Code Finder 這套幫你找出重複程式碼的免費工具,重複的程式碼應該可以寫成 Function 以便在其他設計單元裡可以方便應用與除錯,精簡程式碼亦可保持良好的閱讀性與維護程式碼的容易性。

email me ! 輕鬆製作網頁內電子郵件聯絡功能,避免垃圾郵件!

email me ! 輕鬆製作網頁內電子郵件聯絡功能,避免垃圾郵件!

常看到網站內都有使用電子郵件連絡的功能,若是點擊後通常會啟用 Windows 預設的電子郵件收發程式來對應,不過這種做法常會遭專門收集電子郵件地址的系統所掃描而造成日後該郵件地址會有較多的廣告信件,若想改變這種作法,可以試試 email me ! 這個免費的電子郵件聯絡功能產生器,只要輸入電子郵件地址及使用名稱,便可產生相對應內嵌到網頁內任何位置的程式碼,當有訪客想要跟你聯絡時,便可直接透過 email me ! 所產生的視窗來發郵件給你。

EmbedPlus 讓 Youtube 影片播放時,加入慢動作播放、重新播放、在原框架影片放大播放等功能

EmbedPlus 讓 Youtube 影片播放時,加入慢動作播放、重新播放、在原框架影片放大播放等功能

若喜歡將 Youtube 的精彩影片嵌入到自己的網頁或部落格內,現在可以透過 EmbedPlus 將該影片,在保有原本的 Youtube 播放功能之外,另外加入更多像是慢動作播放、重新播放、設定播放的開始時間、段落或是在原播放框架內加入影片放大播放等功能,提供造訪網站的訪客,更優質、貼心的播放功能。EmbedPlus 的操作相當簡單,只需將要嵌入的 YouTube 網址複製後,貼到 EmbedPlus 便會產生一段內嵌程式碼,並將該段程式碼,貼到網頁影片要呈現的位置即可。

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

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

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

Flag Counter 免費計數器,可統計訪客來源的地區

Flag Counter 免費計數器,可統計訪客來源的地區

常看到網站上有擺放計數器,來統計訪客數,不過若你還是還是使用傳統的數字來顯示時,可以改換試試這個這個由「flagcounter.com」網站所免費提供的計數器,Flag Counter 會依照訪客的來源 IP 來判斷是來自哪個地區,在顯示時,則以該國國旗來顯示所統計的訪客數,要使用 Flag Counter 相當簡單,無須註冊,只要調整好要顯示的樣式,複製所產生的程式碼,貼到網頁要顯示的位置即可。

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 程式碼及應用都相當值得。