Animate.css 介紹

Animate.css    Animate.css GitHub

直接看影片教學是最快的了~~

CSS 效果範例

25+ Examples of Material Design With Awesome Effects

bootstrap範例網站

範例網址：bootply    jsfiddle

Template & Theme：Start Bootstrap

這兩個網站有很多的範例可以參考，包含 java script程式碼，css，html的語法，最重要的是可以直接就看到執行結果，非常方便，有興趣的人可以來這邊找到你想要的答案

CSS 色彩配置 for fullcalendar event

因為要找 fullcalendar event的顏色配色，下面這些可以提供參考，像我這種沒有美學的工程師，要試著開始了解怎麼排版、配色，讓自己的專案能有加分的效果

25 Examples of Perfect Color Combinations in Web Design


Best Color Tools And Articles For Designers

wufoo gallerydesign

看起來不會太亂，配色也不錯

好用的 CSShake - 製造晃動的動畫效果

有時候希望在使用 ajax捉資料時可以跟使用者互動，一般是將滑鼠的狀態作改變

但是也可以用一些動畫來顯示，像 CSShake就可以達到我的要求

只要套用 csshake.min.css，然後再要套用的 element上 class加上比如 shake shake-little (小震動)

就可以囉，真是方便。



CSShake

CSShake Github

$(window).scrollTop() 的值都為 0

因為之前為了要解決一個問題 開啟 bootstrap modal會造成首頁內容左移 (shit to left)，css 設定如下

html {
  overflow: hidden;
  height: 100%;}

因為把 height設為 100%，所以捉取到的值永遠都是 0，但為了作到動畫效果  CSS Animation - 以小米為師   ，所以只好又把它修改回來。

CSS Animation - 以小米為師

參考網站
优秀网站看前端 —— 小米Note介绍页面
小米電源官網

ASP.Net MVC 5使用 bootstrap 3 typeahead和 modal實作電話查詢

如何在 ASP.NET MVC 4 使用 CDN上的 java script 和 css

一般在 app_start的 BundleClass 會如下的程式碼，以讀取自己下載下來的 java script & css

 bundles.Add(new StyleBundle("~/Content/sweetalsertforbs_css").Include(
                       "~/Content/sweet-alert.css"
                       ));

 bundles.Add(new ScriptBundle("~/bundles/sweetalsertforbs_js").Include(
                       "~/Scripts/sweet-alert.js"));

如果 ASP.NET MVC要用 CDN上的資源呢，可以參考如下的作法

// BundleTable.EnableOptimizations = true;  表示在 debug mode也要使用 cnd的資源
 BundleTable.EnableOptimizations = true;

//bundles.UseCdn = true;  要存取 cdn的資源
 bundles.UseCdn = true;

//要加上 CDN的來源，一般如果 release mode使用 CDN，debug mode就使用 local的
 bundles.Add(new StyleBundle("~/Content/sweetalsertforbs_css", "//cdn.jsdelivr.net/sweetalert/0.1.2/sweet-alert.min.css").Include(
                       "~/Content/sweet-alert.css"
                       ));

bundles.Add(new ScriptBundle("~/bundles/sweetalsertforbs_js", "//cdn.jsdelivr.net/sweetalert/0.1.2/sweet-alert.min.js").Include(
                       "~/Scripts/sweet-alert.js"));

jsDeliver

參考文件

MVC 4 Part 4 - Bundles and Optimisation

CSS 應用分享 -- 排版

最近公司的網頁要改版，對於之前都在使用 Flex 開發程式的我來說，CSS是不怎麼熟悉的，

把美編給的圖片排成其想要的畫面真是讓我花了很多時間

有一個部份可以分享的是 div 的應用

div style="position:relative"
      div  style="position:absolute"
      /div
/div

第一個 div position設為 relative 

內部的 div 再設為 absolute，這樣的話，畫面放大、縮小，圖就不會亂跑了

這是最近學到的。