Clik here to view.
「Lazy Load CSS」非同步載入CSS，當網頁使用雲端字型更順暢
自從CSS3支援字型載入後，讓網頁從此不再只有新細體，同時就目前免費的雲端字型，只有Google與Adobe這二間公司，但Adobe則是有流量的限制，雖然說Google不但完全不限制，甚至也不用綁定網域與註冊為會員，大家都能盡情的享用Google所提供的雲端字型，看起來相當的不錯，但有使用過的朋友，應該會發現到，當載入Google的端字型時，一開始畫面會全白，當字型載入完成後，才會一次出現。...
View Article利用CSS3偽類選擇器:checked，實作出Toggle開合選單效果
而這個:checked的功能，是CSS3所新增的偽類選擇器，最主要的功能，就是用來判斷當前的核許框，是呈現勾選還是取消，再分別設定它的樣式效果，如此一來就可實現像Toggle般的開合效果啦！至於怎麼做，現在也一塊來看看吧！
View Article「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換
在網頁中頁籤式的內容切換，是一個相當實用的功能，但這頁籤的切換則需透過Javascript，才能實現出頁籤的切換，因此這需具備程式的基礎才行，但最近梅干突然想到在CSS3的選擇器中，有個:target的選擇器，可針對目前所點選到ID進行樣式的設定，因此正好可運用:target與~，就可實現出，免程式透過純CSS就可實現出，頁籤的互動式切換。
View ArticleRetina高解析網頁圖片怎麼透過CSS3 media設定，讓Apple官網告訴你
先前曾分享過「Retina.js」這外掛，來解決Retina高解析螢幕在瀏覽網頁時，圖片自動切換成高解析，讓圖片看起來是細緻，而不會因此感到模糊或鋸齒，由於Retina螢幕的Device Pixel...
View ArticleCSS教學－CSS選擇器套用樣式的優先權順序
使用CSS設定網頁版型樣式，應該是許多網頁設計師共同語言，透過CSS所提供的選擇器，來設定網頁版型中的樣式，但是否常會遇到，明明已設定了新樣式，卻偏偏怎麼也無法套用，其實這跟優先權有關，雖然在CSS提供了許多不同的選擇器類型，當使用不用的選擇器時，它的優先套用順序也不同，因此梅干今天就來分享一下，CSS中選擇器的優先套用順序，讓你更容易掌控CSS的樣式設定，而不再每次傻傻抓不著頭緒。
View Article[CSS3] CSS Animate免費線上視覺化CSS3動畫產生器
說CSS3的動畫屬性不難，但真的純手工打造時，相當的耗時，且需不斷的進行測試，因此今天要來分享一個線上的CSS3動畫產生器，讓你也能輕鬆的設計出自己專屬的動畫，且這個CSS3的動畫產生器，操作相當的簡單，甚至還可即時的預覽，因此想作CSS3動畫的朋友，現在也一塊來看看吧！
View ArticleCSS3選擇器 :not() 讓CSS也支援判斷的機制
自從CCS3新增了許多屬性了，從圓角、陰影、半透明....一直到動畫，讓網頁變得更加多元，同時再加上一些新的選擇器，大幅的減少在DIV區塊的類別命名，直接透過CSS3的選擇器，就可針對那個DIV要套用什麼樣式，雖然說CSS3的選擇器很方便，可針對n個區塊進行套用，但今天若希望除了第N的DIV不套用，其它的都套用時，這下就只能用javascript輔助來完成了。
View ArticleCSS教學－font-weight 屬性讓網頁內建的繁中字型也有極細黑、中黑、粗黑，九種不一樣的粗細變化
透過CSS來指定字型外，其實在CSS的文字屬性中，還有一個相當重要的屬性，那就是font-weight，透過font-weight可設定文字的粗細變化，讓繁中字型也有極細黑、中黑以及粗黑，而一般大家往往都會乎略這個屬性，以為只有正常跟粗體，其實font-weight中共有九組不同的粗細變化，因此要如何來設定，現在也一塊來看看囉！
View Article解決新款iPhone X上方畸零空間蓋版與網頁滿版CSS3設定
這個新屬性，早在兩年前時，就已被定義出來，而當初在定義這新屬性時，主要是為了圓形智慧型手錶的螢幕上呈現網頁所需的，但沒想到現在卻是運用在iPhone的新機X上，當把網頁設為滿版時，另一個問題就是邊界的部分，由於iPhone...
View ArticleCSS3教學－透過display:flex的order屬性，就可改成DOM元素的順序
其實這時候有個更簡易的方法，那就是可透過CSS3中的flex中的order屬性，就可透過CSS來修改HTML的DOM的順序，且設定絕對比float或position還簡單，更重要的是，這對於RWD自適網頁，區塊的排序更加的方便，雖然說flex在排版上，已相當的方便，現在再透過order屬性，會讓排版更加的有彈性，因此想要改變DOM的順序，現在就一塊來看看order這屬性的用法吧！
View Article免寫程式！透過CSS3將多行文字自動省略，並出現….
因此為了解決這問題，除了透過後端程式語來解決外，就是透過Javascript，但現在終於可以完全不用再透過，任何的前後端的程式語言，直接使用CSS3，就可以設定多行文字，自動省略文字，並出現....，一來可解決截取字數的問題，二來則可解決長短腳問題，同時透過CSS在顯示的速度更快，因此想知道多行要如何省略文字，現在就一塊來看看吧！
View Article[素材] Instagram.css濾鏡包，讓網站照片免Photoshop也有Instagram的相片風格
Instagram.css的網頁一開啟就可以看到Instagram的各種濾鏡效果，雖然一般是要透過Instagram才能將照片加上這些濾鏡效果，不過現在呢，只要到Instagram.css網站，將這些濾鏡效果的CSS樣式下載，並套用到自已的網站上，就可以讓自己網站中的照片，自由運用這些濾鏡效果喔！
View Article[CSS3] drop-shadow與box-shado大不同，讓CSS也可為透明圖片加上陰影
今天要來介紹的，一樣是CSS3的Fliter濾鏡中的drop-shadow，而什麼是drop-shadow，或許有些朋友，可能會感到陌生，但提到box-shadow，各位應該就很熟悉了，而drop-shadow與box-shadow，都是用來將元素加入陰影，但比較不同的是box-shadow加入的陰影只有矩形，因此當使用的是去背影像，套用box-shadow並不會因為透明背景，而沿著元素的四周加入陰影
View Article[教學] 利用CSS3動畫，實作圖片輪播效果(免用JS！)
這對於許多網頁設計師而言，總是套的一把眼淚一把鼻涕，一來是對於套件不熟悉，二來是對於javascript完全沒概念，因此當出錯時，也完全無感，不知到底那邊出錯，因此梅干今天要來分享一個，網頁設計絕對的方法，那就是透過CSS3的動畫屬性，就能實現在圖片輪播效果，甚至還可以滑鼠滑入時，停止播放，而這些完全無需使用到javascript，單純的CSS就可以完成囉！因此有需要的朋友，現在也一塊來看看囉
View Article[教學]利用CSS3動畫，實作出Flickr的載入動畫
雖然說用jQuery製作動畫，較沒有瀏覽器相容的問題，但在製作上得花不少時間，同時還得寫一些邏輯運算式，這對於數學不好的梅干，總是在那算半天，但現在透過CSS3的動畫屬性，不但可快速的製作出動畫效果，同時完全不用再寫程式碼，只需設定動畫的移動規則，立即就可將網頁中的區塊給動起來
View Article[教學] CSS3 Grid 原生網格系統，讓版面編排更靈活
除了flex外，CSS3原生也有網格系統Grid，但一直未被廣為使用的原因就在於，當初支援Grid的屬性瀏覽器並不多，但時已至今幾乎所有新一代的瀏覽器都支援了，甚至就連IE 11版也支援Grid的語法，因此就引起梅干的興趣，玩了一下發現CSS3 Grid真是一個好物，讓網頁編排變得更簡易，同時也讓版面編排更靈活，因此想了解CSS3 Grid這屬性對網頁編排有多方便，現在就一塊來看看吧
View Article[教學] CSS3新屬性「pointer-events」讓你可隔山打牛，不再被上層元件給遮住
現在不用這麼麻煩啦！直接透過CSS3的新層性pointer-events，就可讓滑鼠穿牆，直接點選到下層的區塊，如此一來就可點到下層的區塊，無論是換色或加特效，還是加入連結都沒問題，且設定超簡單，只要將這語法加入，立即就可讓滑鼠穿牆啦！且該語法目前也支援所有的瀏覽器，因此實用性相當的高喔！
View Article[教學] 透過CSS讓文字支援RWD隨著裝置自行縮放文字大小
在網頁的元素中，文字的部分則無法隨著裝置，自行的調整文字大小，而需要依照裝置，依續的來設定，文字的尺寸，才能讓文字的字級隨著裝置自行縮放，且有時若沒設定好時，當文字不在設定的範圍內，就會突然的變大或縮小，雖然說目前CSS3針對文字的部分，有提供了一組新單位為vmin，雖然可解決部分的問題，但在梅干實測後，還是有些落差，因此梅干上網爬了些文字後，再作了些調整，讓文字能隨著裝置，調整文字的字級比例，讓文...
View Article[教學] CSS3新屬性，讓多行文字超出時自動隱藏，並出現….
雖然說CSS3的新的屬性，可將文字超出指定的範圍後，自動隱藏但那只限用於標題，若遇到內文有多行時就失效，而現在有另一個新屬性，可解決多行隱藏的問題，甚至還可控制只顯示多少行，當超出時就自動隱藏，並出現...，因此現在就來看看這個好用的屬性吧！
View Article