使用 CSS 形狀打造有趣的使用者控制和導航

使用者控制項通常以直線或垂直方式排列在螢幕上，就像菜單項目列表一樣。但如果我們將其改為更 *流暢* 的佈局，帶有彎曲、曲線和角落呢？只需幾行程式碼即可實現。在現代極簡主義設計的時代，使用者控制項的曲線佈局為網頁設計增添了恰到好處的活力。

而且，多虧了 CSS 形狀，編寫它們變得更加容易。

CSS 形狀（特別是 shape-outside 屬性）是一個標準，它將幾何形狀分配給浮動元素。然後內容會沿著這些形狀的邊界環繞浮動元素。

這個標準的用例通常被展示為文字、編輯內容的設計 - 其中純文字沿著浮動在它們旁邊的形狀流動。但是，在這篇文章中，我們使用使用者控制項代替純文字，看看這些形狀如何為其佈局注入一些流暢的輪廓。

對於第一個演示，這是一個可以在產品頁面上使用的設計，其中任何與產品相關的動作控制項都可以沿著產品本身的形狀對齊。

<form>
  <img src="./img/bottle.png" alt="A tall refreshing and unopened bottle of Coca-Cola, complete with red bottle cap and the classic Coke logo in white.">
    <div>
      <input type="radio" id="one" name="coke" checked>
      <label for="one">One Bottle</label>
    </div>
    <div>
      <input type="radio" id="six" name="coke">
      <label for="six">Six Pack</label>
    </div>
    <div>
      <input type="radio" id="twelve" name="coke">
      <label for="twelve">Twelve Pack</label>
    </div>
    <div>
      <input type="radio" id="crate" name="coke">
      <label for="crate">Entire Crate</label>
    </div>
  </form>

img {
  height: 600px;
  float: left;
  shape-outside: url("bottle.png");
  filter: brightness(1.5);
}
input {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  margin-left: 20px;
  box-sizing: content-box;
  border: 10px solid #231714;
  border-radius: 50%;
  background: linear-gradient(45deg, pink, beige);
  cursor: pointer;
}

瓶子的圖像被浮動到左側，並使用 shape-outside 屬性賦予形狀邊界。圖像本身用於引用形狀。

注意：只有具有透明背景的圖像才能根據圖像的輪廓產生形狀。

單選按鈕的預設樣式被替換為自定義樣式。一旦瀏覽器將形狀應用於浮動圖像，單選按鈕就會自動沿著瓶子的形狀對齊。

這樣，我們不必費心為每個單選按鈕單獨分配位置來創建這種設計。之後添加的任何按鈕都會根據瓶子的形狀，自動與之前的按鈕對齊。

這是另一個示例，靈感來自維基百科首頁。這是我們正在探討的非傳統主菜單佈局的完美示例。

使用 shape-outside 輕鬆實現

<div>
  <img src="earth.png">
  <div class="left">
    <a href="#">Formation</a><br>
    <a href="#">Atmosphere</a><br>
    <a href="#">Heat</a><br>
    <a href="#">Gravitation</a>
  </div>
</div>
<div>
  <img src="earth.png">
  <div class="right">
    <a href="#">Moon</a><br>
    <a href="#">Climate</a><br>
    <a href="#">Rotation</a><br>
    <a href="#">Orbit</a>
  </div>
</div>

img {
  height: 250px;
  float: left;
  shape-outside: circle(40%);
}

/* stack both sets of menus on the same grid cell */
main > div { grid-area: 1/1; } 

/* one set of menus is flipped and moved sideways over the other */
.right { transform: rotatey(180deg) translatex(250px); }

/* links inside the flipped set of menus are rotated back */
.right > a { 
  display: inline-block; 
  transform: rotateY(180deg) translateX(-40px); 
}

/* hide one of the images */
main > div:nth-of-type(2) img { visibility: hidden; }

元素始終浮動在左側或右側。沒有內容環繞兩側的中心浮動元素。為了實現連結環繞圖像兩側的設計，我製作了兩組連結，並將其中一組水平翻轉。我在兩組中都使用了具有 circle() CSS 形狀值的相同圖像，因此形狀在旋轉後仍然匹配。翻轉組的連結文字將以顛倒的側面顯示，因此它被旋轉回來。

雖然兩個圖像可以彼此重疊，沒有任何可見的溢出，但最好使用不透明度或可見性屬性隱藏其中一個。

第三個示例由於使用了動態 HTML 元素 <details> 而更加生動。此演示是顯示產品等額外資訊的設計的良好示例，這些資訊默認對使用者隱藏。

<img src="diamond.png">
<details>
  <summary>Click to know more!</summary>
  <ul>
    <li>The diamond is now known as the Sancy
    <li>It comprises two back-to-back crowns
    <li>It's likely of Indian origin
  </ul>
</details>

img {
  height: 200px;
  float: left;
  shape-outside: url("diamond.png");
  shape-margin: 20px;
}
summary {
  background: red;
  color: white;
  cursor: pointer;
  font-weight: bold;
  width: 80%; 
  height: 30px;
  line-height: 30px;
}

圖像被浮動到左側，並被賦予與圖像相同的 CSS 形狀。 shape-margin 屬性在分配給浮動元素的形狀周圍添加邊距空間。點擊 <summary> 元素時，父 <details> 元素會顯示其內容，這些內容會自動沿著浮動的菱形圖像的形狀環繞。

<details> 元素的內容不必像演示中那樣是一個列表。任何內聯內容都會沿著浮動圖像的形狀環繞。

最後一個示例使用多邊形形狀，而不是圖像或圓形和橢圓形等簡單形狀。多邊形為我們提供了更多角幾何形狀，只需添加另一個座標就可以輕鬆彎曲。

<img src="nasa.png">
<div><!-- triangle --></div>
<ul>
  <li><a href="#">Home</a>
  <li><a href="#">Projects</a>
  <li><a href="#">Shop</a>
  <li><a href="#">Contact</a>
  <li><a href="#">Media</a>
</ul>

div {
  width: 0;
  height: 0;
  --d:  200px;
  /* red triangle */
  border-right: var(--d) solid transparent;
  border-bottom: var(--d) solid transparent;
  border-left: var(--d) solid red;
  float: left;
  /* triangle CSS shape */
  shape-outside: polygon(0 0, var(--d) 0, 0 var(--d));
}
ul {
  list-style: none;
  padding-top: 25px;
}

使用邊界屬性創建一個左側浮動的紅色三角形。為了創建與紅色三角形匹配的三角形 CSS 形狀，我們使用多邊形函數作為 shape-outside 屬性的值。 polygon() 函數的值是三角形的三個座標，用逗號分隔。連結會自動沿著浮動的三角形對齊，形成沿著三角形斜邊的傾斜菜單佈局。

正如您所見，即使對於使用者控制項的簡單對角佈局，CSS 形狀也能很好地為設計增添一些活力。使用 CSS 形狀比旋轉一行使用者控制項要好得多 - 單個控制項和文字的對齊方式也會旋轉，產生佈局怪異。相比之下，CSS 形狀只會沿著提供的形狀邊界佈置單個控制項。

評論

發表回覆 取消回覆

發表回覆取消回覆