Alvaro Montoro 展示：使用 CSS 享受旗幟樂趣-css教學-PHP中文網

首頁

web前端

css教學

Alvaro Montoro 展示：使用 CSS 享受旗幟樂趣

Susan Sarandon

Nov 25, 2024 am 11:52 AM

在本文中，我們將透過使用單一 HTML 元素為每個標誌建立不同的標誌來回顧 CSS 漸層。作為體驗的一部分，我們還將檢查 ::before 和 ::after 偽元素以及 Clip-path 屬性。

我們將編寫簡單的標誌並避免編寫徽章，因為它們在 CSS 中會很困難。這並非不可能，但這也不值得做。為此使用 SVG。

我使用不同標誌的維基百科頁面來取得尺寸、大小、位置和顏色。如果其中有任何錯誤，我提前表示歉意。

搭建舞台

讓我們先加入標誌的 HTML 程式碼以及一些常見的樣式：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

以下是他們所做工作的簡短說明：

display: inline-grid：這將將元素（幾乎）視為圖像並與文字對齊顯示。使用 inline-flex 或 inline-grid 將提供更強大的對齊可能性。
height: 1em: 不同的旗幟有不同的尺寸。 透過設定固定高度，我們可以加入寬高比屬性來產生適當的寬度，同時保持所有標誌具有一致的高度。
位置：相對：如果我們需要偽元素，它們可能需要絕對位置，並且我們希望使我們的標誌成為該絕對定位的參考點。
溢位：隱藏：如果偽元素因任何原因溢出容器，我們希望從視圖中隱藏溢位。
垂直對齊：頂部：將標誌與文字對齊將使它們看起來更好，因為它們的對齊方式將「更自然」。

其中一些是過度設計的——是的，你可以過度設計 CSS——因為大多數標誌不需要它們。尤其是我們將在本文中編寫的程式碼…但最終您會發現一些需要這些屬性的程式碼，為什麼不直接將它們放在類別中，而不是多次單獨添加它們？

線性漸變

線性漸進建立在單一方向上漸進的顏色過渡（沿著一條線，因此得名）。 預設情況下，方向是從上到下垂直，這使得創建標誌變得簡單。

波蘭

讓我們從波蘭國旗開始。它有兩種佔據相同高度的顏色：頂部是白色，底部是紅色。這是您會發現的最簡單的漸變之一。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

此漸層將白色設定為從頂部開始的顏色，直到達到 50%（標誌的一半），然後變為紅色，也從 50% 開始。

我們也加入了縱橫比：8 / 5；因為這是波蘭國旗的官方比例 (5:8)。請隨意忽略以下範例中的該屬性，但請記住要添加它，否則標誌將沒有寬度並且將不可見！

Alvaro Montoro Presents: Fun with Flags… with CSS

德國

CSS 漸層不限於兩種顏色，可以有任意數量的顏色 - 但請注意，如果顏色太多，某些瀏覽器可能無法正確顯示漸層。

德國國旗就是一個例子，我們從上到下有三種顏色：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

我們刻意將這個範例的符號設定為多行且特別冗長。請注意我們如何在該值後面新增兩個值。它們分別是每種顏色的起點和終點。在上面的範例中，黑色將從頂部(0%) 開始，到達旗幟的三分之一(33.33%)，紅色將從頂部(33.33%) 開始，到達旗幟的三分之二(66.66%) ），最後，黃色將在66.66% 之後直接開始，一直到旗子底部（100%）。在標誌的情況下，結束值和隨後的起始值將匹配，但如果不匹配，瀏覽器將逐漸過渡顏色。

考慮到第一個顏色預設從 0 開始，最後一個顏色預設以 100% 結束，我們可以從線性漸變中消除這些值。此外，任何低於前一個結束值的起始值都會導致顏色之間出現急劇停止。我們希望我們的標誌也是如此，並且不想輸入太多，所以我們可以為起始值設定最低的值：0% 或只是 0。這樣，上面的 CSS 將被簡化為產生的結果類似的結果，但要短得多：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

Alvaro Montoro Presents: Fun with Flags… with CSS

比利時

如果我們只能產生垂直線性漸變，那就太無聊了，而且沒用。有多種方法可以改變漸層繪製的方向。讓我們檢查其中幾個：

用關鍵字指定方向：你想要顏色從右到左嗎？用顏色清單前的左側關鍵字表示。從下到上？到頂部。從左下角到右上角對角線？使用到右上角。真的就是這麼簡單！
指定動作角度：可能很棘手，但它比以前的選項提供了更多的可能性。您可以透過指示動作角度來選擇任何方向，而不是僅限於八個。在這種情況下，0deg 為從下到上，90deg 為從左到右，180deg 為從上到下，270deg（或 -90deg）為從右到左。

我們以比利時國旗為例。顏色不是垂直堆疊而是水平堆疊：從左到右分別為黑色、黃色和紅色。我們至少可以透過兩種不同的方式來實現這一目標：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

Alvaro Montoro Presents: Fun with Flags… with CSS

徑向漸變

徑向漸進建立從一個原點到所有方向的漸進顏色過渡，產生看起來像顏色橢圓的徑向效果（如果邊相等，則為圓形）。 預設情況下，該點是元素的絕對中心 –水平和垂直。

需要考慮的一些重要事項：

它產生一個橢圓，而不是圓形。如果容器是矩形的，它看起來就像一個橢圓形。如果容器是方形的，它看起來像圓形。有關鍵字（circle）來保證產生的形狀是圓形而不是橢圓形。
橢圓的大小隨容器及其位置的不同而變化（稍後將詳細介紹）。 0% 將是原點，100% 將是距該原點最遠的角。我們可以使用關鍵字（closest-side、farthest-side、nearest-corner 等）來更改此設定。

記住這些初步想法（和關鍵字），讓我們創建一些標誌！

日本

日本國旗是白旗中央的一個大紅圓圈。這是我們能找到的最簡單的徑向漸層之一，我們將使用先前回顧過的circle關鍵字，因為標誌是矩形的，如果我們不使用它，我們將得到一個橢圓形。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

我們將最接近邊尺寸關鍵字與圓形關鍵字結合起來，產生高度為 60% 的圓形（因為頂部和底部邊比左側和右側更近）。

Alvaro Montoro Presents: Fun with Flags… with CSS

孟加拉

如果我們只能從元素的中心創建圓形和橢圓形，我們可以使用 CSS 複製一些標誌（例如寮國或蒲隆地）。儘管如此，我們還是無法發展其他偏離中心的圈子（例如哥斯大黎加或衣索比亞）。

radial-gradient() 方法允許我們指示漸變的原點。我們透過在 size 和 shape 關鍵字（如果有）之後使用 at posX posY 來實現。讓我們試著用它來創造孟加拉的國旗：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

當我們開始移動漸層的中心時會發生什麼事？到最遠角的距離發生了變化！這將導致三角計算來相應地調整大小……或者相反，我們可以識別不是最遠角的不同參考點（如本例中的最近側）。

為了避免這種情況，我們可以指定寬度和高度的絕對大小。如果我們這樣做，我們將無法識別它是圓形還是橢圓形，因為這些絕對值將決定形狀。

Alvaro Montoro Presents: Fun with Flags… with CSS

圓錐曲線漸變

圓錐漸進創建從一個原點繞其順時針旋轉的漸進顏色過渡。這樣的視覺化聽起來可能很複雜，所以當我向人們解釋它時，我更喜歡使用一個例子：想像一個規則的線性漸變打印在紙上（到目前為止，還不錯）；現在你拿起紙張，折疊一側並將其捲成圓錐形（因此得名！）所得的圖形從上方看起來像圓錐漸變。我希望這對您有幫助。

與徑向漸變一樣，圓錐曲線漸變的預設原點是元素的絕對中心。同樣作為徑向漸變，我們可以透過使用 at posX posY 來更改該點。

貝南

這是一個使用圓錐漸層創建的相當簡單的標誌。首先，我們需要將中心定位在水平 40%、垂直 50% 的位置，然後指定停止點。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

正如我所說，小菜一碟！由於內容不多，關於貝南國旗，有一個你可能不知道的事實：黃色代表國家的瑰寶，紅色代表祖先的勇氣，綠色代表民主的希望。

Alvaro Montoro Presents: Fun with Flags… with CSS

捷克共和國

在此基礎上，我們來看看捷克國旗的繪製方法：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

登入後複製

這工作得很好，但請注意我們如何使用 #fff 兩次。如果我們只能使用它一次不是很好嗎？正如您可能已經猜到的，答案是我們可以！梯度漸變不一定需要從 0 度開始。我們可以使用 from [angle] 來指定起始位置。

例如，假設我們要從紅色開始：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

角度可以是正值或負值，那麼我們將分別順時針或逆時針移動起點。

Alvaro Montoro Presents: Fun with Flags… with CSS

組合漸變

我們已經學習瞭如何使用線性、徑向和圓錐漸變來產生相對簡單的標誌…但有時標誌可能會變得複雜，單一漸變是行不通的。這種情況我們能做什麼？

CSS 允許在一個元素中使用多個背景影像（和漸變）。我們需要用逗號分隔它們的值。因為這可能違反直覺，但要記住的一件重要事情是頂部背景將重疊並隱藏底部背景。

瑞典

瑞典國旗是藍色背景上的黃色十字。我們可以使用線性漸變透明-黃色-透明來產生每個黃色條：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

這個例子的內容遠不止表面上看起來的那樣：

它顯示如何組合多個漸變 -用逗號分隔它們.
它添加了背景顏色。請注意顏色始終位於背景清單中的最後。如果將其放置在清單中的其他位置，它將無效並且不顯示任何背景。
它使用絕對單位。到目前為止，我們一直使用百分比來表示漸變，但沒有理由在方便時不使用其他單位。

Alvaro Montoro Presents: Fun with Flags… with CSS

巴哈馬

雖然先前的標誌顯示了多個漸變效果，但由於使用了透明度，因此無法很好地展示它們如何堆疊。那麼，讓我們來看另一個例子 – 使用不同類型的多個漸變。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

登入後複製

組合背景時，您不僅限於一種漸變類型。您可以使用任何類型。

Alvaro Montoro Presents: Fun with Flags… with CSS

更改尺寸和位置

到目前為止，我們已經了解了線性、徑向和圓錐漸變，以及如何組合它們。但在所有情況下，梯度佔據了整個標誌。有些透明膠片可能不會讓它看起來那樣，但漸變的大小始終是寬度和高度的 100%。

但是有一些方法可以改變漸變的大小以更好地滿足我們的需求。最簡單的一種是指定背景大小。如果尺寸小於容器，背景將重複（除非我們使用諸如background-repeat: none之類的東西。）

卡達

讓我們回顧一下帶有卡達國旗的範例。該標誌重複一個圖案九次，並且可以使用圓錐梯度輕鬆複製。如果我們指定漸變的寬度為flag的100%，高度為flag高度的九分之一，瀏覽器就會重複背景，直到容器被填滿，為我們完成繪圖。

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

Alvaro Montoro Presents: Fun with Flags… with CSS

瑞典……又來了！

當然，一旦我們指定了尺寸，我們也可以指定漸變所在的位置。我們將使用背景位置來做到這一點（這就是背景重複屬性會派上用場的地方）。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

請注意，我們不需要指定最後一種顏色的大小和位置。只能設定一個，會自動佔據整個容器。

我們可以用逗號分隔背景圖像、大小和位置的數值。當只有幾個背景時，這很方便，但如果我們有多個背景，那就很麻煩了。很容易迷失方向並混淆價值觀。

相反，我們可以使用background屬性的縮寫形式一次提供所有值：background：漸變位置/大小重複，如下所示：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

登入後複製

Alvaro Montoro Presents: Fun with Flags… with CSS

重複漸變

我們已經看到了線性、徑向和圓錐漸變，但每種變化都允許我們添加「顏色圖案」。旗幟非常適合此目的：許多旗幟由重複的水平線組成。

我說的是重複漸層。它們的行為與常規漸變相同，它們重複指定的圖案，直到達到 100% 或 360 度。共有三個重複漸層：

重複線性漸層
重複徑向漸層
重複圓錐曲線

希臘

我們以希臘國旗為例。我們可以使用 3 或 4 個大的線性漸變來實現它，或者我們可以使用三個重複的線性漸變：

一個重複的線性漸變來產生十字的垂直部分（使用透明和白色）
第二個重複線性漸變來產生十字的水平部分（使用藍色和白色）
最後一個重複線性漸變來繪製後面的九個條。

為了實現左上角的十字，我們必須定義前兩個線性漸變的位置和大小。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}

登入後複製

Alvaro Montoro Presents: Fun with Flags… with CSS

烏幹達

烏幹達的國旗上有一隻美麗的灰冠鶴，出於實際原因，我們不會在 CSS 中對其進行編碼。我們將重點放在另外兩個標誌部分：中心的白色圓圈和幾條黑色、黃色和紅色的水平線。

這個組合可以透過兩種不同的方式來實現：

使用佔據旗幟整個高度的重複線性漸變；或
單一線性漸變僅佔據標誌的一半，瀏覽器將自動重複它以填充剩餘空間。

第一個選項是這樣的：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

第二個選項如下：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

但這兩個選項最終看起來都是一樣的。重要的是要記住，在 CSS 中，就像在任何其他程式設計風格中一樣，通常有不只一種方法可以實現我們的目標。

Alvaro Montoro Presents: Fun with Flags… with CSS

使用偽元素

術語「單元素標誌」可能會產生誤導。所有非空 HTML 元素至少包括兩個我們可以用來繪製的偽元素：::before 和 ::after。因此，我們確實擁有三個可以單獨設計樣式並提供多種可能性的元素：

需要一些旋轉的繪圖。在 CSS 中使用背景的一個限制是它們無法旋轉。
複雜的形狀可以受益於使用邊框半徑、剪輯路徑、遮罩的強大功能...
為了讓設計看起來更乾淨：剪切路徑的邊緣比漸層的邊緣更平滑。

巴林

如果您如上所述使用漸層對卡達國旗進行編碼，您可能會注意到漸層的三角形邊緣在某些顯示器上看起來過於鋒利且醜陋。有很多方法可以解決這個問題，但我喜歡的解決方案是使用帶有剪輯路徑的偽元素來使線條更平滑、更清晰。

與使用多個線性漸變和下一節中解釋的像素差異技巧相比，此選項將簡化程式碼。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

登入後複製

Alvaro Montoro Presents: Fun with Flags… with CSS

這種情況下的偽元素不必局限於複雜的模式。以古巴、巴哈馬或約旦的國旗為例。它們的左側有一個我們使用圓錐漸層繪製的三角形。這些漸層有一個問題：邊緣在某些顯示器上看起來太硬或像素化——下一節中有一個使用線性漸層解決這個問題的技巧——。相反，我們可以使用偽元素（三點多邊形路徑）來建立三角形，並且邊緣看起來會更平滑。類似上面的巴林國旗。

巴拿馬

我獲得了五點星形頂點的近似點，並在 ::before 和 ::after 偽元素中使用 Clip-path 應用它們。許多CSS藝術家會考慮使用剪輯路徑作弊，並且可以使用圓錐漸變來繪製星形。但為了簡單起見，我將其保留為剪輯路徑。

加入圓錐漸層作為國旗背景，以及偽元素中的星星，我們很快就可以畫出巴拿馬國旗：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

登入後複製

Alvaro Montoro Presents: Fun with Flags… with CSS

提醒和提示

堆疊漸變

請記住，當您組合背景時，它們將按照列出的順序堆疊。這意味著，第一個將位於頂部並與下面的重疊，然後是。

雖然從設計的角度來看是有意義的，但從 CSS 的角度來看可能是違反直覺的，因為級聯使得屬性或類別的最後一次出現優先於先前定義的屬性或類別。

1px 差異技巧

在文章中，我提到漸層邊緣可能看起來太銳利或像素化。發生這種情況是因為瀏覽器渲染漸變的方式 - 這很煩人，特別是因為 SVG 上的硬停止邊緣不會發生這種情況。

例如，這裡的線條在所有顯示器上看起來可能不太好：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

登入後複製

避免這種情況的一個技巧是在端點和下一個起點之間添加像素差異。可以分別從其中每個減去或添加 0.5px，或更簡單，只需從其中一個減去/添加 1px。這條線在所有顯示器上看起來都很平滑：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

登入後複製