你應該嘗試的 7 種很棒的 CSS3 技術

CSS（層疊樣式表）與 HTML 的發展令人難以置信。 最近引入了許多功能，例如 Flexbox、CSS Grid 和 CSS 自定義屬性。

它的不斷進步和巨大的潛力是吸引開發人員嘗試新的 CSS 技術並超越它所能做的界限的原因。 HTML 5 和 CSS3 技術的結合無疑是一個閃存殺手。

難怪一個執行良好的 CSS 計劃幾乎可以控制設計的任何方面並帶來更好的用戶體驗，這是非常必要的。 畢竟，當訪問者通過筆記本電腦、台式機、平板電腦或任何其他媒體查看您的網站時，他們會有一定的期望。

但是流行的 CSS 技術是什麼？ 當我們談論設計一個有吸引力的用戶友好型網站時，這不是一個明顯的問題嗎？

這就是為什麼我們提出了一些新的 CSS 技術和技巧來掌握你的網頁設計技能。 每一個都包含一些解釋和示例代碼片段。

所以讓我們直接開始吧！

1. 與 Flexbox 垂直對齊

早期的開發人員在將文本或任何其他元素垂直居中對齊時會遇到很多困難。 但是現在，在引入了新的 CSS3 規範Flexbox 之後，事情變得容易多了。

屬性display: flex為用戶提供了一種在中心對齊任何文本或元素的輕鬆方式。 這是示例代碼！

HTML：

[xhtml]
<div class="align-vertically">
垂直居中！
</div>
[/xhtml]

CSS：

[CSS]
.align-垂直{
背景：#FFA500；
顏色：#hhh;
顯示：彎曲；
對齊項目：居中；
高度：200px；
}
[/css]

在上面的 CSS 代碼中， display: flex 描述了元素的 Flexbox 佈局，而 align-items: center; 負責文本的垂直居中。

結果：

2. 響應式 CSS 網格

不要讓您的網格成為例外，使其也像您設計中的其他所有內容一樣響應。

有很多方法可以讓你的網格響應 CSS Grid。 使用它的最佳部分是，無論設備尺寸如何，您都可以創建更靈活的網格，為您提供所需的外觀。

除此之外，CSS 網格還允許您使用不等和相等的列大小。 這是一項很棒的技術，包含多種選項，讓用戶可以自由控制他們的設計。

您可以使用各種斷點、多個維度的高度以及做其他放置​​，如下例所示。

HTML：

[xhtml]
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
[/xhtml]

CSS：

[CSS]
。網格
{
顯示：網格；
網格模板行：重複（5、1fr）；
網格自動列：計算（（100vh - 3em）/ 4）；
網格自動流：列；
網格間隙：1em；
高度：100vh；
}
.grid-item:nth-child(3n)
{
背景顏色：紫色；
}
.grid-item:nth-child(3n + 2)
{
背景顏色：粉紅色；
}
[/css]

上述 CSS 代碼中使用的分數單位 (fr) 是根據您的指南分隔開放空間的靈活單位。 每個 fr 語句都針對列，然後您可以將間隙相加並準備好網格。

結果：

3.文字動畫

您可能已經使用 CSS 創建了背景動畫，但現在它也會影響用戶如何與網站的文本元素進行交互和互動。 從懸停調整到讓文字漂浮在空中，CCS3 讓這一切成為可能。

沒有很多吸引用戶的元素的網站可以充分利用這一特點。 這是一個小例子。

HTML：

[xhtml]
<div class="菜單">
<ul class="菜單列表" data-offset="10">
<li class="Menu-list-item" data-offset="20" onclick>
居住
<span class="Mask"><span>直播</span></span>
<span class="Mask"><span>直播</span></span>
</li>
<li class="Menu-list-item" data-offset="16" onclick>
笑
<span class="Mask"><span>笑</span></span>
<span class="Mask"><span>笑</span></span>
</li>
<li class="Menu-list-item" data-offset="12" onclick>
愛
<span class="面具"><span>愛</span></span>
<span class="面具"><span>愛</span></span>
</ul>
</div>
[/xhtml]

CSS：

[CSS]
$透視：60rem；
$字體大小：5.25rem；
$分倉：50%；
$split-thickness: 3px;
$分色：#FF2C75；
%字體設置{
font-family: "Comic Sans MS", system-ui, sans-serif;
字體樣式：正常；
字體粗細：正常；
-webkit-font-smoothing：抗鋸齒；
-webkit-font-kerning：正常；
-webkit-文本大小調整：100%；
}
html,
身體 {
寬度：100vw；
高度：100vh；
}
身體 {
@extend %字體設置；
背景：線性漸變（45度，#02001F，#008080）；
變換樣式：preserve-3d；
變換：透視（$透視）；
位置：固定；
顯示：彎曲；
對齊項目：居中；
證明內容：中心；
}
.菜單列表{
字體大小：$字體大小；
行高：1.2；
文本轉換：大寫；
文本對齊：居中；
顯示：彎曲；
彈性方向：列；
對齊項目：居中；
變換：旋轉X（-10度）旋轉Y（20度）； // 被JS覆蓋
}
.菜單列表項{
位置：相對；
顏色：透明；
光標：指針；
＆：：前 {
內容： ”;
顯示：塊；
位置：絕對；
頂部：$拆分位置；
左：-10%；
對：-10%；
高度：$split-thickness；
邊界半徑：$split-thickness；
邊距頂部：-($split-thickness / 2);
背景：$分色；
變換：比例（0）；
過渡：變換 .8s 三次貝塞爾曲線（.16,1.08,.38,.98）；
z-index：1；
}
}
。面具 {
顯示：塊；
位置：絕對；
溢出：隱藏；
顏色：$分色；
頂部：0；
高度：$拆分位置；
過渡：所有 .8s 三次貝塞爾曲線（.16,1.08,.38,.98）；
跨度{顯示：塊； }
}
.Mask + .Mask {
頂部：$split-position – 0.1；
高度：100 – $split-position + 0.1；
跨度 { 變換： translateY(-$split-position); }
}
.菜單列表項：懸停，
.菜單列表項：活動{
.面具{顏色：#FFF; 變換：skewX(12deg) translateX(5px); }
.Mask + .Mask { 變換：skewX(12deg) translateX(-5px); }
&::before { 變換：比例（1）； }
}
[/css]

像這樣，您還可以為您的網站創建多個動態文本元素。 不是很有趣嗎？

結果：

4.列佈局

通常，基於列的佈局是使用 Javascript 創建的，這非常複雜且耗時。 但是 CSS 帶來了一種方法來減輕開發人員和網頁設計師的任務。

以下是 CSS 列規則，您可以通過它為您的網站製作基於列的佈局。

HTML：

[xhtml]
<div class="容器">
放置一個容器組件以開始構建格式。 有時您可能稍後可以擺脫容器，但獲取容器組件可以更輕鬆地處理大多數固定寬度佈局的不同 Web 瀏覽器。 它定義了網頁內容的寬度，以及任何外部邊距和內部填充。
</div>
[/xhtml]

CSS：

[CSS]
。容器 {
/* 舊版 Chrome、Safari 和 Opera */
-webkit 列數：3；
-webkit-column-gap：40px；
-webkit-column-rule-style：實心；
-webkit-column-rule-width：4px；
-webkit-column-rule-color：橙色；
/* 舊版火狐 */
-moz 列數：3；
-moz-column-gap：40px；
-moz-column-rule-style：實心；
-moz-column-rule-width: 4px;
-moz-column-rule-color：橙色；
/* 標準語法 */
列數：3；
列間距：40px；
列規則樣式：實心；
列規則寬度：4px；
列規則顏色：橙色；
}
[/css]

結果：

5. 屏幕方向

許多人認為屏幕方向和設備方向都是出於相同的目的。 但事實並非如此。 屏幕的方向與設備有點不同。

即使設備無法檢測其方向，屏幕也始終可以。 如果設備也有能力，那麼最好控制屏幕方向，以便您可以維護或更改網站的界面。

有兩種方法可以處理屏幕方向； CSS 或 Javascript。 但是，當您使用 CSS Orientation Media Query 時，這很容易。 因為它使內容能夠調整其格式，無論瀏覽器窗口是處於橫向模式還是縱向模式。 為了更好地理解，讓我們看下面的例子。

HTML：

[xhtml]
<ul id="工具欄">
<li>一個</li>
<li>B</li>
<li>C</li>
</ul>
<p>如果您希望按鈕欄沿設備的最長顯示尺寸拉伸。 您可以使用媒體查詢快速自動地做到這一點。</p>
[/xhtml]

zzzzz

CSS：

[CSS]
/* 首先讓我們定義一些常見的樣式 */

html，正文 {
寬度：100%；
高度：100%；
}

身體 {
邊框：1px純黑色；

-moz-box-sizing：邊框框；
box-sizing：邊框框；
}

p {
字體：1em sans-serif；
邊距：0；
填充：0.5em；
}

ul {
列表樣式：無；

字體：1em 等寬；
邊距：0；
填充：0.5em；

-moz-box-sizing：邊框框；
box-sizing：邊框框；

背景：黑色；
}

李{
顯示：內聯塊；
邊距：0；
填充：0.5em；
背景：白色；
}
/* 對於縱向，我們希望工具欄在頂部 */

@媒體屏幕和（方向：縱向）{
#工具欄{
寬度：100%；
}
}

/* 對於橫向，我們希望工具欄在左邊 */

@媒體屏幕和（方向：橫向）{
#工具欄{
位置：固定；
寬度：2.65em；
高度：100%；
}

p {
左邊距：2em；
}

李+李{
邊距頂部：0.5em；
}
}
[/css]

結果：

6.逗號分隔列表

毫無疑問，項目符號列表在書面形式中非常常用，可以更準確、更清晰地傳達任何信息。 但是大多數人都在努力解決的一件事是在列表的每一點上添加逗號。

使用下面提到的代碼片段，您可以輕鬆地在列表中添加逗號，最後一個除外。

HTML：

[xhtml]
<ul>
<li>蘋果</li>
<li>菠蘿</li>
<li>奶油蘋果</li>
</ul>
[/xhtml]

CSS：

[CSS]
身體{
字體系列：宋體；
字體大小：30px；
}

ul > li:not(:last-child)::after {
內容： ”，”;
}
[/css]

結果：

7.動畫複選框

好吧，大多數人都非常了解 CSS 背景和文本動畫。 但是，沒有多少人知道複選框動畫。

是的，除了背景和文本之外，您還可以使您的複選框部分看起來很吸引人。 不是很棒嗎？

以下是您可以參考的示例：

HTML：

[xhtml]
<h1>使用圖標字體的動畫複選框</h1>
<!– 複選框列表–>
<ul>
<li>
<input type="checkbox" name="one" id="one" />
<label for="one">創建複選框</label>
</li>
<li>
<input type="checkbox" name="two" id="two" />
<label for="two">分配標籤</label>
</li>
<li>
<input type="checkbox" name="three" id="three" />
<label for="three">導入圖標字體</label>
</li>
<li>
<input type="checkbox" name="four" id="four" />
<label for="four">圖標化標籤偽元素</label>
</li>
<li>
<input type="checkbox" name="five" id="five" />
<label for="five">動畫圖標寬度</label>
</li>
<li>
<input type="checkbox" name="six" id="six" />
<label for="six">為圖標著色</label>
</li>
</ul>
[/xhtml]

CSS：

[CSS]
@進口
（為文本導入 2 個字體或標題和其他）
h1 {
字體大小：15；
填充：12px；
文本對齊：居中；
}
ul {
寬度：290 像素；
邊距：0 自動；
}
烏里{
列表樣式類型：無；
填充：10px；
}

/*添加自定義復選框圖標*/
標籤 {
位置：相對；
左邊距：30px；
字體大小：14px；
光標：指針；
}
標籤：之前，標籤：之後{
字體系列：FontAwesome；
字體大小：21px；
/*絕對定位*/
位置：絕對； 頂部：0； 左：0；
}
標籤：之前{
內容：'\f096'; /*未選中*/
}
標籤：在{之後
內容：'\f046'; /*檢查*/
/*選中的圖標將默認隱藏，使用 0 max-width 和溢出隱藏*/
最大寬度：0；
溢出：隱藏；
不透明度：0.5；
/*動畫效果的CSS3過渡*/
過渡：全部 0.35s；
}

/*隱藏原來的複選框*/
輸入[類型=“複選框”] {
顯示：無；
}
/*當用戶選中復選框時，選中的圖標將動畫化*/
輸入[type="checkbox"]:checked + label:after {
最大寬度：25px； /*一個大於圖標寬度的任意數字*/
不透明度：1； /*用於淡入效果*/
}

/*添加一些有趣的顏色*/
#one+label:before, #one+label:after {color: hsl(0, 45%, 40%);}
#two+label:before, #two+label:after {color: hsl(60, 45%, 40%);}
#three+label:before, #three+label:after {color: hsl(120, 45%, 40%);}
#four+label:before, #four+label:after {color: hsl(180, 45%, 40%);}
#five+label:before, #five+label:after {color: hsl(240, 45%, 40%);}
#six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}
[/css]

結果：

包裝詞：

如果我們深入下去，那麼 CSS 和 HTML 的可能性是無窮無盡的。 因此，我們希望上述實現的技術可以幫助您獲得一些知識，並有助於您設計一個出色的網站。