首頁 >web前端 >css教學 >幾種純css製作的小功能實例

幾種純css製作的小功能實例

小云云原創: 2017-11-21 10:58:052370瀏覽

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。 CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。現如今在css的基礎上又新出了css3，在前端的工作中css還是很重要的，下面我們就和大家分享一些css製作的小功能的實例。

CSS@supports

在使用一些瀏覽器可能沒有的功能時，每一個優秀的前端開發者都需要進行特性測試。特性測試一直以來都是由JavaScript來做的，許多人使用Modernizr，一個由許多測試良好的案例構成的優秀實用工具，來做特性測試。一個新API：@supports，不管怎樣，已經出現在開發人員面前，它能讓你用CSS來做特性測試。以下是一些@supports如何運作的簡單範例：

程式碼如下:

/* basic usage */@supports(prop:value) {/* more styles */}
/* real usage */@supports (display: flex) {p { display: flex; }}
/* testing prefixes too */@supports (display: -webkit-flex) or(display: -moz-flex) or(display: flex) 
{section {display: -webkit-flex;display: -moz-flex;display: flex;float: none;}}

這個新的@supports特性，同樣有一個對應的JavaScript版本，但已經過期了，我們期待著早點使用它！

CSS濾鏡

　　寫一個服務來修改圖片的色調，然後你可以用數十億美元把它賣給Facebook。當然，那是一件很簡單的事，但寫影像濾鏡並不是一門科學。我到Mozilla 的第一個星期寫的一個小程式（得了獎，額，我只是隨便說說而已）用了一些基於JS的數學用canvas來創建圖像濾鏡，但現在我們用CSS就能創建圖像濾鏡了。

程式碼如下:

/* simple filter */.myElement {-webkit-filter: blur(2px);}
/* advanced filter */.myElement {-webkit-filter: blur(2px) 
grayscale (.5) opacity(0.8) hue-rotate(120deg);}

這個類型的濾鏡只是改變了下方影像的原來樣子而已，儲存或匯出影像時並沒有用所說的濾鏡，但當你需要給照片美化或處理海報時很好用。

Pointr Events和Bricking Clicks

CSS的Pointr Events屬性提供了一個方法來有效的禁用一個元素，正因為如此，透過JavaScript，點擊一個連結不會觸發一個點選事件：

程式碼如下:

/* do nothing when clicked or activated */.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {alert("Clicked!");});

在上面的範例中，由於CSS pointer-events值的原因，點擊事件將不會觸發。我發現了它的巨大作用，你不需要每處都檢查className或屬性來確保一些元素是否已經停用了。

折疊、展開選單

CSS讓我們可以建立過渡效果和動畫，但很多時候我們需要JavaScript庫來幫助我們修改一些東西和控制動畫。一個很流行的動畫就是折疊、展開選單效果，很多人都不知道只用CSS就可以實現！

程式碼如下:

/* slider in open state */.slider {overflow-y: hidden;max-height: 500px; /* approximate max height */
transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
/* close it with the "closed" class */.slider.closed {max-height: 0;}

Max-height的一個巧妙使用能讓元素按想要的效果來折疊和展開。

CSS計數器

「計數器」這個術語在網路上表示的意思經常讓我們傻笑，但CSS 計數器是另一個更讓我們傻笑的事。 CSS計數器允許開發人員在指定的元素上用:before和:after來增加一個計數器：

代碼如下:

/* initialize the counter */ol.slides {counter-reset: slideNum;}
/* increment the counter */ol.slides > li {counter-increment: slideNum;}
/* display the counter value */ol.slides li:after {content: "[" counter(slideNum) "]";}

你經常見到CSS計數器被用在幻燈片效果上，和像表單內容的列表上。

Unicode CSS樣式名稱

有許多CSS最好的實作文檔，它們都是由如何為CSS樣式命名開始的。你永遠不會見到有個文件說的用unicode符號來命名你的樣式：

程式碼如下:

.ಠ_ಠ {border: 1px solid #f00;background: pink;}
.❤ {background: lightgreen;border: 1px solid green;}

請別用這些符號。除非你做得到！

CSS圓

CSS三角形是一個技術活，CSS圓也是如此。透過濫用CSS border-radius，你能創造出很完美的圓！

程式碼如下:

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they&#39;re equal */
}

你可以為你的圓增加漸變，你甚至可以使用CSS動畫來讓你的圓動起來！ CSS即將有更多統一的API提供給這些圖形，但現在你可以用這個方法來創建圓了。

以上就是幾種純css製作的小功能實例，希望能幫助大家。

幾種純css製作的小功能實例

相關文章