Quantcast
Channel: CSS –梅問題．教學網
Viewing all 68 articles
Browse latest View live
↧

CSS3動畫hover套件，各種常用的互動特效直接套用

May 24, 2016, 3:00 pm
$
0
0
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
　　CSS3提供了許多實用的屬性，像是動畫特效，讓網頁整個動起來，同時又不會影響到電腦的效能，有別於以往使用Flash所作的動畫，但想使用CSS3的動畫屬性，就得花時間學習CSS3的動畫語法，同時CSS3的動畫語法也相當的繁索，因此得花上些許時間才能上手，因此梅干最近發現一款hover的動態特效套件，即便完全不會CSS3語法也沒關係，只需將此套件引用到自己的專案中，接著再要套用的特效效果的類別名稱，加到DIV或連結標籤中，立即就會產生動態特效，相當的方便好用，因此想讓網頁動起來的朋友，現在也一塊來看看囉!
Hover.css
套件名稱：Hover.css
套件下載：ianlunn.github.io/Hover
Step1
進到套件網站後，在下方可看到有各式各樣常用的滑入動態特效。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
Step2
接著點上方的藍色Donwload鈕。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
Step3
進入GitHub後，點一下右上的Download鈕。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
Step4
下載完畢，解壓縮會看到一堆的資料夾與檔案，而所有的核心檔案就在CSS的資料夾中。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
Step5
進入css資料夾後，將hover-min.css這隻複雜到自己的專案下。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
Step6
那要怎麼使用呢?方法很簡單，先用瀏覽器的網頁開發工具，對著要套用特效的按鈕，點一下就會秀出該特效的類別名稱。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
Step7
接著只需把剛的css引用進來，再把要套用的特效類別名稱，加到要呈現的標籤中。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
Step8
這時當滑鼠滑入時，就會有動態的效果啦!是不是超方便又簡單的，同時完全無需學習任何CSS3的動畫語法。
梅問題－CSS3 hover套件，各種常用的動態特效直接套用
[範例預覽] | [範例下載]
↧
Search

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

June 2, 2016, 3:00 pm
$
0
0
梅問題－ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)
　　在製作網頁時，都會使用一些小圖示來作裝飾，隨著瀏覽器支援度愈來愈高下，讓以前的小圖示變向量化，同時還可改變圖示的大小、顏色都很方便，再加上目前也有許多免費的向量圖示字型的資源可使用，也大幅降低設計的製作時間，且還可任意的縮放不失真，更方便隨時調整，但在使用這些向量圖示文字時，得將圖示以html的標籤加入後，並指定CSS的樣式才能顯示，雖然說已相當方便使用。 　　　除此之外在設計網頁時，也常會指定特定的html標籤，出現時前方就出現一個小圖示，但這得在背景的屬性中加入圖片，因此這時就無法將ICON Font的樣式指定到CSS的樣式中，就得將ICON Font的文字轉成圖片後，再引用到CSS中，其實不用這麼麻煩，換個方式就能將ICON Font中的向量圖示，直接引用到CSS中，至於要怎麼作，現在就一塊來看看吧!
Step1
這邊以fontawesome為例，首先到fontawesome的圖示清單，就會看到所有圖示的名稱外，在後方還會看到淺灰色的字，並將後方文字複製起來，而這就是該圖示的編號。
梅問題－ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)
Step2
當要使用時，一樣要先將fontawesome的css給連結到網頁中後，接著將剛複製的圖示名稱，貼到content中，並要指定font-family，這需與fontawesome.css裡所設定的名稱相同才可以。
梅問題－ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)
Step3
之後只要是h3的標籤，前方就會自動加入剛所設定的圖示，如此一來是不是超方便的，同時還可改變圖示的大小、位置與顏色。
梅問題－ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)
↧
↧

CSS教學－hover滑入圖片時，加入CSS3動畫特效「淡入淡出」變換圖片

June 8, 2016, 3:00 pm
$
0
0
梅問題－CSS hover滑入圖片時，加入CSS3動畫特效淡出淡入變換圖片
　　Dreamweaver在很早之前，內建就可製作出，二張圖片互換的效果，當滑鼠滑到圖片上方時，就可切換成另一張圖片，但用過的朋友應該都知道，當使用圖片切換的效果時，除了會產生出一堆的javascript碼以外，當今天中途再刪減時，就常會出問題，而這個效果，其員並需要使用到javascript，只需透過CSS就可實現出，兩個img相互變換的效果，同時還可加入CSS3的動畫效果，讓圖片在變換時，產生出淡入淡出的效果。
Step1
#css
.hover {position:relative;}

.hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/
}
Step2
由於剛將img設為圖層，因此這時02.jpg會蓋在01.jpg上方，當滑鼠滑入02.jpg將它的透明度設為0後，就會看到01.jpg，是不是既簡單又方便呀!
#html
<div class="hover">
  <img src="images/01.jpg" />
  <img src="images/02.jpg" />
</div>
Step3
這時看到的圖片是02.jpg。
梅問題－CSS hover滑入圖片時，加入CSS3動畫特效淡出淡入變換圖片
Step4
當滑鼠滑入時，就變成顯示01.jpg。
梅問題－CSS hover滑入圖片時，加入CSS3動畫特效淡出淡入變換圖片
[範例預覽] [範例下載]
↧

CSS3－clip-path繪製不規則形遮色片線上產生器

July 3, 2016, 3:00 pm
$
0
0
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
　　現在CSS3愈來愈強大，也提供許多的新屬性，減少以前做圖的時間，甚至還可製作動畫，與透過偽元素來繪圖，但說真的在繪製上，並不像使用繪圖軟體來的那麼好上手， 需具備一些基本的數理邏輯結構，才能繪製出來，而除了透過偽元素可繪圖外，還有另一個CSS3的新屬性也可繪圖，同時搭配線上的圖形化界面，就能輕易的繪製出自己所要的圖形來，而該屬性目前只支援Chrome、Safari、Oprea....等瀏覽器，有了這屬性讓CSS繪圖變得更容易啦!
CSS clip-path maker:
網站名稱：CSS clip-path maker
網站連結：http://bennettfeely.com/clippy/
Step1
進入網站後，將滑鼠移到右上角的灰色區塊，就可將所有已內建的幾合圖形展開來。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step2
展開後，就會看到各式各樣的圖形，只需點一下立即就套用。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step3
當套用完畢後，可從右邊的控制鈕，再自行的調整，且在調整的過程中，下方的原來碼也會立即更新，當都調整完畢後，再按下方右邊的圖示。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step4
接著再把CSS全選並複製起來。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step5
再將剛所複製的原殆碼貼到style的樣式中，以及在body中加入一個div。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step6
儲存預覽時，就會看到剛所繪製的圖形。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step7
接者就可自行的運用啦!
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step8
就可讓它滿版或把背景變形圖片，這樣就有很多的變化。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step9
甚至也可以變成星星，完全不用透過繪圖軟體來製作，是不是超方便的呀!也期待日後所有的瀏覽器全面支援。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step10
除了使用內建的圖形外，也可自行設定，點一下左下的自定圖示。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step11
接著就可在圖片中自行的新增控制鈕，當設定完畢後，再按右上的Finish鈕。
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
Step12
結束節點的建立後，就可針對剛所建立的節點，再進行調整，是不是很方便呀!
梅問題-CSS3工具－CSS clip-path maker不規則遮色片產生器
↧

「Lazy Load CSS」非同步載入CSS，當網頁使用雲端字型更順暢

September 7, 2016, 3:00 pm
$
0
0
梅問題－Lazy Load CSS非同步載入CSS，當網頁使用雲端字型更順暢
　　自從CSS3支援字型載入後，讓網頁從此不再只有新細體，同時就目前免費的雲端字型，只有Google與Adobe這二間公司，但Adobe則是有流量的限制，雖然說Google不但完全不限制，甚至也不用綁定網域與註冊為會員，大家都能盡情的享用Google所提供的雲端字型，看起來相當的不錯，但有使用過的朋友，應該會發現到，當載入Google的端字型時，一開始畫面會全白，當字型載入完成後，才會一次出現。 　　會造成這樣的原因，最主要在於Google是以自家的頻寬優勢，讓使用者直接一次載入完整的字型檔，因此當在載入的過程中，畫面會呈現全白的狀態，直到將字型載入完成，這對於使用者來說，會誤以網站是不是掛了而跳出，因此今日要分享一個CSS非同步載入的方式，來解決雲端字型載入的問題，讓一開始是以預設的字型，像是新細明或微軟中黑，當字型載入完畢後，再一併的套入到網頁中，如此一來就不會像造成先前的問題。
以往當網頁要套用CSS時，都會將css以link的方式，寫在網頁的head間。
梅問題－Lazy Load CSS延遲載入CSS，當網頁使用雲端字型更順暢
這時會看到，一開始畫面是全白，直到雲端字型全部載入完畢後，畫面才會一次顯示出來。
梅問題－Lazy Load CSS延遲載入CSS，當網頁使用雲端字型更順暢
因此這時將下方的語法加入後，當要載入CSS時，將css放到a.href，當有多組多，就自行建立多個，最後再z.parentNode.insertBefore依序的加入即可。
<script>
    var cb = function() {
        var a = document.createElement('link');
        a.rel = 'stylesheet';
        a.href = 'fonts/general-j/mplus_webfonts.css';

        var b = document.createElement('link');
        b.rel = 'stylesheet';
        b.href = 'fonts/basic_latin/mplus_webfonts.css';

        var z = document.getElementsByTagName('head')[0];
        z.parentNode.insertBefore(a,z);
        z.parentNode.insertBefore(b,z);
    };
        var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>
梅問題－Lazy Load CSS延遲載入CSS，當網頁使用雲端字型更順暢
完成後，立馬來看一下，一開始會先顯示預設的字型，當字型檔全部下載完成後，再套入並顯示。
梅問題－Lazy Load CSS延遲載入CSS，當網頁使用雲端字型更順暢
[範例預覽－同步載入] [範例預覽－非同步載入]
↧
↧

利用CSS3偽類選擇器:checked，實作出Toggle開合選單效果

December 29, 2016, 2:00 pm
$
0
0
而這個:checked的功能，是CSS3所新增的偽類選擇器，最主要的功能，就是用來判斷當前的核許框，是呈現勾選還是取消，再分別設定它的樣式效果，如此一來就可實現像Toggle般的開合效果啦！至於怎麼做，現在也一塊來看看吧！
↧

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

January 15, 2017, 2:00 pm
$
0
0
在網頁中頁籤式的內容切換，是一個相當實用的功能，但這頁籤的切換則需透過Javascript，才能實現出頁籤的切換，因此這需具備程式的基礎才行，但最近梅干突然想到在CSS3的選擇器中，有個:target的選擇器，可針對目前所點選到ID進行樣式的設定，因此正好可運用:target與~，就可實現出，免程式透過純CSS就可實現出，頁籤的互動式切換。
↧

Retina高解析網頁圖片怎麼透過CSS3 media設定，讓Apple官網告訴你

January 25, 2017, 2:00 pm
$
0
0
先前曾分享過「Retina.js」這外掛，來解決Retina高解析螢幕在瀏覽網頁時，圖片自動切換成高解析，讓圖片看起來是細緻，而不會因此感到模糊或鋸齒，由於Retina螢幕的Device Pixel Ratio大於1，意思就是說在Retina的螢幕中所顯示的每個像素，與對應到的實際像素是超過1倍以上，因此除了透過「Retina.js」來作設定外，也可透過CSS3的media屬性，而各位最常使用到media這屬性，則是用來設定RWD的網頁，透過media來設定螢幕的大小，進而變換版型的顯示大小，而media除了可設定螢幕的大小外，也可用來設定螢幕的解析，透過螢幕解析來切換高解析度的圖片，至於要如何使用，現在也一塊來看看！
↧
Search

CSS教學－CSS選擇器套用樣式的優先權順序

February 7, 2017, 2:00 pm
$
0
0
　使用CSS設定網頁版型樣式，應該是許多網頁設計師共同語言，透過CSS所提供的選擇器，來設定網頁版型中的樣式，但是否常會遇到，明明已設定了新樣式，卻偏偏怎麼也無法套用，其實這跟優先權有關，雖然在CSS提供了許多不同的選擇器類型，當使用不用的選擇器時，它的優先套用順序也不同，因此梅干今天就來分享一下，CSS中選擇器的優先套用順序，讓你更容易掌控CSS的樣式設定，而不再每次傻傻抓不著頭緒。
↧
↧

CSS教學－三招將DIV內的浮動貼齊區塊，父容器的高度自動撐開

March 5, 2017, 11:30 am
$
0
0
　當在設計網頁版型時，時常會使用到浮動靠齊這屬性，就可讓DIV的區塊任意的齊左、齊右，是一個相當方便且實用的CSS屬性，而有用過的朋友都知道，當div內的區塊，使用了浮動靠齊的屬性後，父層的div區塊高度，則不依照子層內的元素，將div高度給自動撐高，因此這時梅干最常用的方法就是將父層的div加入overflow:hidden，就能將div的父層區塊給自動撐高，而除了使用溢位這屬性外，還有其它二種方式，也能達到將父層的div區塊撐開的方法
↧

[CSS3] CSS Animate免費線上視覺化CSS3動畫產生器

March 21, 2017, 12:00 pm
$
0
0
說CSS3的動畫屬性不難，但真的純手工打造時，相當的耗時，且需不斷的進行測試，因此今天要來分享一個線上的CSS3動畫產生器，讓你也能輕鬆的設計出自己專屬的動畫，且這個CSS3的動畫產生器，操作相當的簡單，甚至還可即時的預覽，因此想作CSS3動畫的朋友，現在也一塊來看看吧！
↧

CSS3選擇器 :not() 讓CSS也支援判斷的機制

June 24, 2017, 12:00 pm
$
0
0
自從CCS3新增了許多屬性了，從圓角、陰影、半透明....一直到動畫，讓網頁變得更加多元，同時再加上一些新的選擇器，大幅的減少在DIV區塊的類別命名，直接透過CSS3的選擇器，就可針對那個DIV要套用什麼樣式，雖然說CSS3的選擇器很方便，可針對n個區塊進行套用，但今天若希望除了第N的DIV不套用，其它的都套用時，這下就只能用javascript輔助來完成了。
↧

CSS教學－font-weight 屬性讓網頁內建的繁中字型也有極細黑、中黑、粗黑，九種不一樣的粗細變化

August 30, 2017, 3:00 pm
$
0
0
透過CSS來指定字型外，其實在CSS的文字屬性中，還有一個相當重要的屬性，那就是font-weight，透過font-weight可設定文字的粗細變化，讓繁中字型也有極細黑、中黑以及粗黑，而一般大家往往都會乎略這個屬性，以為只有正常跟粗體，其實font-weight中共有九組不同的粗細變化，因此要如何來設定，現在也一塊來看看囉！
↧
↧

解決新款iPhone X上方畸零空間蓋版與網頁滿版CSS3設定

September 18, 2017, 11:00 pm
$
0
0
這個新屬性，早在兩年前時，就已被定義出來，而當初在定義這新屬性時，主要是為了圓形智慧型手錶的螢幕上呈現網頁所需的，但沒想到現在卻是運用在iPhone的新機X上，當把網頁設為滿版時，另一個問題就是邊界的部分，由於iPhone X上方的畸零空間會蓋住下方的畫面，為了解決這個問題，Apple也提供了一組新的CSS屬性，來自動抓取螢幕的邊界，雖然目前還沒拿到實機，但可透過早上梅干所分享的Xcode中的iPhone X模擬器來進行測試，因此在還沒拿到iPhone X時，可先提前來了解一下，未來iPhone X的手機網頁要如何來設定
↧

CSS3教學－透過display:flex的order屬性，就可改成DOM元素的順序

September 20, 2017, 3:00 pm
$
0
0
其實這時候有個更簡易的方法，那就是可透過CSS3中的flex中的order屬性，就可透過CSS來修改HTML的DOM的順序，且設定絕對比float或position還簡單，更重要的是，這對於RWD自適網頁，區塊的排序更加的方便，雖然說flex在排版上，已相當的方便，現在再透過order屬性，會讓排版更加的有彈性，因此想要改變DOM的順序，現在就一塊來看看order這屬性的用法吧！
↧
Search

免寫程式！透過CSS3將多行文字自動省略，並出現….

October 10, 2017, 11:00 pm
$
0
0
因此為了解決這問題，除了透過後端程式語來解決外，就是透過Javascript，但現在終於可以完全不用再透過，任何的前後端的程式語言，直接使用CSS3，就可以設定多行文字，自動省略文字，並出現....，一來可解決截取字數的問題，二來則可解決長短腳問題，同時透過CSS在顯示的速度更快，因此想知道多行要如何省略文字，現在就一塊來看看吧！
↧

[素材] Instagram.css濾鏡包，讓網站照片免Photoshop也有Instagram的相片風格

March 7, 2018, 6:00 pm
$
0
0
Instagram.css的網頁一開啟就可以看到Instagram的各種濾鏡效果，雖然一般是要透過Instagram才能將照片加上這些濾鏡效果，不過現在呢，只要到Instagram.css網站，將這些濾鏡效果的CSS樣式下載，並套用到自已的網站上，就可以讓自己網站中的照片，自由運用這些濾鏡效果喔！
↧
↧

[CSS3] drop-shadow與box-shado大不同，讓CSS也可為透明圖片加上陰影

March 12, 2018, 7:00 pm
$
0
0
今天要來介紹的，一樣是CSS3的Fliter濾鏡中的drop-shadow，而什麼是drop-shadow，或許有些朋友，可能會感到陌生，但提到box-shadow，各位應該就很熟悉了，而drop-shadow與box-shadow，都是用來將元素加入陰影，但比較不同的是box-shadow加入的陰影只有矩形，因此當使用的是去背影像，套用box-shadow並不會因為透明背景，而沿著元素的四周加入陰影
↧

[教學] 利用CSS3動畫，實作圖片輪播效果(免用JS！)

March 18, 2018, 11:00 pm
$
0
0
這對於許多網頁設計師而言，總是套的一把眼淚一把鼻涕，一來是對於套件不熟悉，二來是對於javascript完全沒概念，因此當出錯時，也完全無感，不知到底那邊出錯，因此梅干今天要來分享一個，網頁設計絕對的方法，那就是透過CSS3的動畫屬性，就能實現在圖片輪播效果，甚至還可以滑鼠滑入時，停止播放，而這些完全無需使用到javascript，單純的CSS就可以完成囉！因此有需要的朋友，現在也一塊來看看囉
↧

[教學]利用CSS3動畫，實作出Flickr的載入動畫

March 20, 2018, 11:00 pm
$
0
0
雖然說用jQuery製作動畫，較沒有瀏覽器相容的問題，但在製作上得花不少時間，同時還得寫一些邏輯運算式，這對於數學不好的梅干，總是在那算半天，但現在透過CSS3的動畫屬性，不但可快速的製作出動畫效果，同時完全不用再寫程式碼，只需設定動畫的移動規則，立即就可將網頁中的區塊給動起來
↧
Viewing all 68 articles
Browse latest View live
Search