內容營銷

您可能不知道的 CSS3 特性:Flexbox、網格佈局、自定義屬性、過渡、動畫和多背景

級聯樣式表 (的CSS) 不斷發展,最新版本可能有一些您可能不知道的功能。 以下是 CSS3 引入的一些主要改進和方法,以及代碼示例:

  • 靈活的盒子佈局(Flexbox): 一種佈局模式,可讓您為網頁創建靈活且響應迅速的佈局。 使用 flexbox,您可以輕鬆地在容器內對齊和分佈元素。 在這個例子中, .container 課堂使用 display: flex 啟用 flexbox 佈局模式。 這 justify-content 屬性設置為 center 使子元素在容器內水平居中。 這 align-items 屬性設置為 center 使子元素垂直居中。 這 .item 類設置子元素的背景顏色和填充。

HTML

<div class="container">
  <div class="item">Centered Element</div>
</div>

的CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

結果

居中元素
  • 網格佈局: 另一種佈局模式,允許您為網頁創建複雜的基於網格的佈局。 使用網格,您可以指定行和列,然後將元素放置在網格的特定單元格中。 在這個例子中, .grid-container 課堂使用 display: grid 啟用網格佈局模式。 這 grid-template-columns 屬性設置為 repeat(2, 1fr) 創建兩列等寬。 這 gap 屬性設置網格單元格之間的間距。 這 .grid-item 類設置網格項的背景顏色和填充。

HTML

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

的CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

結果

項目1
項目2
項目3
項目4
  • 轉變: CSS3 引入了許多用於在網頁上創建過渡的新屬性和技術。 例如, transition 屬性可用於動畫化 CSS 屬性隨時間的變化。 在這個例子中, .box 類設置元素的寬度、高度和初始背景色。 這 transition 屬性設置為 background-color 0.5s ease 使用 ease-in-out 定時功能在半秒內對背景顏色屬性的變化進行動畫處理。 這 .box:hover 當鼠標指針懸停在元素上時,類會更改元素的背景顏色,從而觸發過渡動畫。

HTML

<div class="box"></div>

的CSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

結果

徘徊
在這裡!
  • 動畫: CSS3 引入了許多用於在網頁上創建動畫的新屬性和技術。 在此示例中,我們使用 animation 財產。 我們定義了一個 @keyframes 動畫規則,它指定框應在 0 秒的持續時間內從 90 度旋轉到 0.5 度。 當框懸停在上方時, spin 應用動畫來旋轉框。 這 animation-fill-mode 屬性設置為 forwards 以確保動畫完成後保留最終狀態。

HTML

<div class="rotate"></div>

的CSS

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

結果

徘徊
在這裡!
  • CSS 自定義屬性: 也被稱為 CSS 變量, CSS3 中引入了自定義屬性。 它們允許您在 CSS 中定義和使用您自己的自定義屬性,這些屬性可用於在整個樣式表中存儲和重用值。 CSS 變量由以兩個破折號開頭的名稱標識,例如
    --my-variable. 在此示例中,我們定義了一個名為 –primary-color 的 CSS 變量,並為其賦值 #007bff,這是一種在許多設計中常用作原色的藍色。 我們使用這個變量來設置 background-color 按鈕元素的屬性,通過使用 var() 函數並傳入變量名。 這將使用變量的值作為按鈕的背景顏色。
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • 多重背景: CSS3 允許您為一個元素指定多個背景圖像,並能夠控制其定位和堆疊順序。 背景由兩張圖片組成, red.pngblue.png,這是使用加載 background-image 財產。 第一張圖, red.png, 位於元素的右下角,而第二張圖片, blue.png, 位於元素的左上角。 這 background-position 屬性用於控制每個圖像的定位。 這 background-repeat 屬性用於控製圖像的重複方式。 第一張圖, red.png, 設置為不重複 (no-repeat), 而第二張圖片, blue.png, 設置為重複 (repeat).

    HTML

    <div id="multibackground"></div>

    的CSS

    #multibackground {
      background-image: url(red.png), url(blue.png);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;
      height: 200px;
      width: 200px;
    }

    結果

    Douglas Karr

    Douglas Karr 是 CMO 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

    相關文章

    返回頂部按鈕
    關閉

    檢測到Adblock

    Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。