[CSS] Blend 線上漸層產生器，簡易好操控又能即時預覽並產生CSS碼
有了CSS3後，讓從前搞剛的事，變得更加簡單，以漸層背景就好，就得製作1像素的漸層，再利用背景的圖片層性，將1像素充滿整個畫面，但現在透過CSS3的漸層屬性，讓漸層背景變得更容易，雖然說CSS3的漸層語法並不難，但要使用時，還得去翻一下小抄，以及開啟影像工具進行選色，為了讓CSS3漸層選色更簡單，最近梅干發現一個既簡易又好用的CSS3漸層產生器Blend，不但即時選色、即時預覽結果外，還會直接產生出...
View Article[教學] 利用CSS3混合模式，實現SVG檔也可更改顏色
雖然說SVG方便使用，但比較可惜的是，無法透過CSS來改變它的色彩，但現在這個問題有解啦！只需透過CSS3的混合模式，立即就能實現將SVG更換顏色，甚至還可以套用漸層色，因此當使用SVG的朋友，又想更改SVG圖檔顏色的朋友，現在就一塊來看看，要如何透過CSS3的background-blend-mode來實現吧！
View Article[教學] CSS3新屬性font-display優化雲端字型的載入方式
因此Google與Adobe也紛紛的推出免費的雲端字型，雖然都是免費，但二者有所不同，Adobe的雲端字型雖然好用，但卻有流量限制，雖然Google無流量限制，但每當使用者在瀏覽網頁時，就得先將字型給下載後，文字才會顯示，因此當剛載入時，像是網站掛掉一樣，但現在CSS3提供了一組新屬性font-display，可以設定雲端字型的載入方式，如此一來就可解決一開始噴白畫面的問題啦！至於這屬性要怎來使用，...
View ArticleCSS 專家密技! 所有CSS大招都在這 (繁中版)
雖然說CSS很強大，但雷也不少，因此要如何強化自己的CSS，現在有本電子書覺不容錯過，CSS專家密技! 裡面的內容相當的精彩，同時也是大家在寫作CSS常會遇到的問題，因此想變成CSS高手，這本CSS 專家密技! 絕不容錯過囉！
View Article[教學] CSS3新屬性，讓多行文字超出時自動隱藏，並出現….
雖然說CSS3的新的屬性，可將文字超出指定的範圍後，自動隱藏但那只限用於標題，若遇到內文有多行時就失效，而現在有另一個新屬性，可解決多行隱藏的問題，甚至還可控制只顯示多少行，當超出時就自動隱藏，並出現...，因此現在就來看看這個好用的屬性吧！
View Article[教學] 透過CSS讓文字支援RWD隨著裝置自行縮放文字大小
在網頁的元素中，文字的部分則無法隨著裝置，自行的調整文字大小，而需要依照裝置，依續的來設定，文字的尺寸，才能讓文字的字級隨著裝置自行縮放，且有時若沒設定好時，當文字不在設定的範圍內，就會突然的變大或縮小，雖然說目前CSS3針對文字的部分，有提供了一組新單位為vmin，雖然可解決部分的問題，但在梅干實測後，還是有些落差，因此梅干上網爬了些文字後，再作了些調整，讓文字能隨著裝置，調整文字的字級比例，讓文...
View Article[教學] CSS3新屬性「pointer-events」讓你可隔山打牛，不再被上層元件給遮住
現在不用這麼麻煩啦！直接透過CSS3的新層性pointer-events，就可讓滑鼠穿牆，直接點選到下層的區塊，如此一來就可點到下層的區塊，無論是換色或加特效，還是加入連結都沒問題，且設定超簡單，只要將這語法加入，立即就可讓滑鼠穿牆啦！且該語法目前也支援所有的瀏覽器，因此實用性相當的高喔！
View Article[教學] CSS3 Grid 原生網格系統，讓版面編排更靈活
除了flex外，CSS3原生也有網格系統Grid，但一直未被廣為使用的原因就在於，當初支援Grid的屬性瀏覽器並不多，但時已至今幾乎所有新一代的瀏覽器都支援了，甚至就連IE 11版也支援Grid的語法，因此就引起梅干的興趣，玩了一下發現CSS3 Grid真是一個好物，讓網頁編排變得更簡易，同時也讓版面編排更靈活，因此想了解CSS3 Grid這屬性對網頁編排有多方便，現在就一塊來看看吧
View Article[教學]利用CSS3動畫，實作出Flickr的載入動畫
雖然說用jQuery製作動畫，較沒有瀏覽器相容的問題，但在製作上得花不少時間，同時還得寫一些邏輯運算式，這對於數學不好的梅干，總是在那算半天，但現在透過CSS3的動畫屬性，不但可快速的製作出動畫效果，同時完全不用再寫程式碼，只需設定動畫的移動規則，立即就可將網頁中的區塊給動起來
View Article[教學] 利用CSS3動畫，實作圖片輪播效果(免用JS！)
這對於許多網頁設計師而言，總是套的一把眼淚一把鼻涕，一來是對於套件不熟悉，二來是對於javascript完全沒概念，因此當出錯時，也完全無感，不知到底那邊出錯，因此梅干今天要來分享一個，網頁設計絕對的方法，那就是透過CSS3的動畫屬性，就能實現在圖片輪播效果，甚至還可以滑鼠滑入時，停止播放，而這些完全無需使用到javascript，單純的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[素材] Instagram.css濾鏡包，讓網站照片免Photoshop也有Instagram的相片風格
Instagram.css的網頁一開啟就可以看到Instagram的各種濾鏡效果，雖然一般是要透過Instagram才能將照片加上這些濾鏡效果，不過現在呢，只要到Instagram.css網站，將這些濾鏡效果的CSS樣式下載，並套用到自已的網站上，就可以讓自己網站中的照片，自由運用這些濾鏡效果喔！
View Article免寫程式！透過CSS3將多行文字自動省略，並出現….
因此為了解決這問題，除了透過後端程式語來解決外，就是透過Javascript，但現在終於可以完全不用再透過，任何的前後端的程式語言，直接使用CSS3，就可以設定多行文字，自動省略文字，並出現....，一來可解決截取字數的問題，二來則可解決長短腳問題，同時透過CSS在顯示的速度更快，因此想知道多行要如何省略文字，現在就一塊來看看吧！
View ArticleCSS3教學－透過display:flex的order屬性，就可改成DOM元素的順序
其實這時候有個更簡易的方法，那就是可透過CSS3中的flex中的order屬性，就可透過CSS來修改HTML的DOM的順序，且設定絕對比float或position還簡單，更重要的是，這對於RWD自適網頁，區塊的排序更加的方便，雖然說flex在排版上，已相當的方便，現在再透過order屬性，會讓排版更加的有彈性，因此想要改變DOM的順序，現在就一塊來看看order這屬性的用法吧！
View Article解決新款iPhone X上方畸零空間蓋版與網頁滿版CSS3設定
這個新屬性，早在兩年前時，就已被定義出來，而當初在定義這新屬性時，主要是為了圓形智慧型手錶的螢幕上呈現網頁所需的，但沒想到現在卻是運用在iPhone的新機X上，當把網頁設為滿版時，另一個問題就是邊界的部分，由於iPhone...
View ArticleCSS教學－font-weight 屬性讓網頁內建的繁中字型也有極細黑、中黑、粗黑，九種不一樣的粗細變化
透過CSS來指定字型外，其實在CSS的文字屬性中，還有一個相當重要的屬性，那就是font-weight，透過font-weight可設定文字的粗細變化，讓繁中字型也有極細黑、中黑以及粗黑，而一般大家往往都會乎略這個屬性，以為只有正常跟粗體，其實font-weight中共有九組不同的粗細變化，因此要如何來設定，現在也一塊來看看囉！
View ArticleCSS3選擇器 :not() 讓CSS也支援判斷的機制
自從CCS3新增了許多屬性了，從圓角、陰影、半透明....一直到動畫，讓網頁變得更加多元，同時再加上一些新的選擇器，大幅的減少在DIV區塊的類別命名，直接透過CSS3的選擇器，就可針對那個DIV要套用什麼樣式，雖然說CSS3的選擇器很方便，可針對n個區塊進行套用，但今天若希望除了第N的DIV不套用，其它的都套用時，這下就只能用javascript輔助來完成了。
View Article[CSS3] CSS Animate免費線上視覺化CSS3動畫產生器
說CSS3的動畫屬性不難，但真的純手工打造時，相當的耗時，且需不斷的進行測試，因此今天要來分享一個線上的CSS3動畫產生器，讓你也能輕鬆的設計出自己專屬的動畫，且這個CSS3的動畫產生器，操作相當的簡單，甚至還可即時的預覽，因此想作CSS3動畫的朋友，現在也一塊來看看吧！
View ArticleCSS教學－CSS選擇器套用樣式的優先權順序
使用CSS設定網頁版型樣式，應該是許多網頁設計師共同語言，透過CSS所提供的選擇器，來設定網頁版型中的樣式，但是否常會遇到，明明已設定了新樣式，卻偏偏怎麼也無法套用，其實這跟優先權有關，雖然在CSS提供了許多不同的選擇器類型，當使用不用的選擇器時，它的優先套用順序也不同，因此梅干今天就來分享一下，CSS中選擇器的優先套用順序，讓你更容易掌控CSS的樣式設定，而不再每次傻傻抓不著頭緒。
View Article
![[JMAX] [2026.09.24] 学園アイドルマスター 十王星南 - Roar [FLAC 96kHz/24bit]](http://i.ibb.co/Jw0qVHR2/Cover.jpg)
