Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

CSS形狀進階

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)

前一個教程中,我們了解瞭如何生成CSS形狀,從此我們就可以定義一個元素的真正形狀了。 我們接觸了一些基礎知識;生成一個圓,並讓幾行文字環繞於它。 現在,我們可以探索更複雜的形狀了,讓我們的頁面佈局更加豐富,讓呆板的盒子更少一些。

生成一個多邊形

除了圓和矩形之類的簡單形狀,我們也可以生成多邊形:一種由多個邊(一般至少有五個邊)構成的形狀,比如五邊形和六邊形。 要生成一個多邊形,我們使用CSS的polygon()函數,它授受多個逗號分隔的值,它們定義了此形狀的坐標:

在上面的代碼中,我們添加了五對坐標,因此得到了一個五邊形。 給這個函數再加一對坐標會得到六邊形,再加一對得到七邊形,然後是八邊形,依此類推。

手動生成一個多邊形沒有圓或橢圓那麼簡單,特別是當多邊形比較複雜且涉及到幾十個坐標時尤其如此。 幸運的是,我們有一個好用的工具,可以讓生成CSS形狀過程更加直觀。

使用CSS形狀編輯器

CSS形狀編輯器是一個Chrome擴展。 裝上它賓,DevTools的Elements標籤頁下會多一個名為Shapes的標籤,再下面有一些其它子標籤(比如StylesComputer等)。

Shapes標籤包含一個shape-outside屬性和一個+號,以便我們添加CSS形狀函數。 選擇polygon(),以及頁面上的元素,然後我們就可以開始在瀏覽器中繪製形狀了,就像一個圖形應用一樣。

在我們畫的同時,此瀏覽器擴展會根據正在繪製的形狀坐標來更新多邊形函數,並將它們添加到元素的內聯屬性中去。 完成之後,我們就可以將生成的代碼複製拷貝到樣式表中。

generated polygon coordinates
生成的多邊形坐標

利用同樣的技術,我們可以在網頁中畫出和應用任意形狀,比如:

圖來自於:如何用Adobe的Photoshop將劇本台詞添加到雨中場景上

提取圖片中的形狀

Shape-outside屬性中可利用的另一個值是url()函數;在CSS其它場合中我們用它來添加一個背景圖片。 在此例中,url()函數讓shape-outside屬性基於圖片來定義一個元素形狀。

當你有一個複雜的圖形,比如有許多曲線和拐角,你想讓文字內容平滑地環繞在它周圍,此時你可能會選擇url()函數,而不是polygon()。 又或者,在用戶生成的內容中定義形狀比較難辦時。

我們將使用來自於Unsplash的金剛鸚鵡。 首先,你需要生成一個帶透明度的版本,比如:

the shape of our macaw
金剛鸚鵡的形狀

原始的parrot圖像被作為背景圖片加入到容器中:

透明度閾值

對於形狀本身,我們將添加其到容器中的另一個元素上,這一次,我們要用另外一個稱為shape-image-threshold的CSS形狀屬性。

這種特殊屬性設置了定義圖片形狀時的最小透明度的閾值;它在01之間取值。 所以,如果你有稍微透明一點的圖片,不妨將透明度設置為0.80.5。 我們將其設置為0,因為環繞在鸚鵡形狀周圍的區域是完全透明的。

結果應該如下圖所示:

提供回退 (fallback)

瀏覽器對CSS形狀的支持是最近才有的;所以不要對Firefox,Internet Explore或Edge期望太高。 另外,關於Stephen在前一個教程中所提的問題,我們可有幾個選擇。

“這很炫,但問題是:IE/FF的回退措施是什麼? 對於很多用戶來說,你在形狀佈局上的孤注一擲只會導致奇怪的結局。” -- Stephan Bateman

首先,我們可使用Modernizr。 Modernizr是用於瀏覽器功能測試的一個可靠的JavaScript庫。 下載這個庫時,確保你已經包括了CSS形狀Add CSS類選項。 然後,如果CSS形狀不被支持,你可以指定佈局樣式如下:

如果覺得加載Modernizr太麻煩,因為你只需要測試一下瀏覽器是不是啟用了CSS,你可以加入以下JavaScript代碼:

CSS中每個屬性都對應一個JavaScript樣式對象,於是我們可以通過JavaScript動態添加樣式。 這個代碼檢測瀏覽器是否有shapeOutside方法,如果沒有,則添加一個no-css-shape類,用於回退樣式。

最後,我們可在樣式表中使用CSS@support語法,比如:

至於哪種方法最適合於你的項目,則完全取決於你。

總結

在本教程中,我們介紹瞭如何使用CSS形狀的polygon()函數,學習瞭如何用一個Chrome擴展來更輕鬆地繪製多邊形。 我們還學會瞭如何利用一張圖片來幫助我們繪製形狀:這對於非常複雜的形狀尤其有用。 最後,儘管CSS形狀本就應該得到瀏覽器支持,我們還談到了對於瀏覽器不支持的情況下如何優雅地回退的方法。

演示

有用的鏈接

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.