【佈局進階】巧用 :has & drop-shadow 實現複雜佈局效果

来源:https://www.cnblogs.com/coco1s/p/18142894
-Advertisement-
Play Games

最近,群里聊到了一個很有意思的佈局效果。大致效果如下所示,希望使用 CSS 實現如下所示的佈局效果: 正常而言,我們的 HTML 結構大致是如下所示: <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab ...


最近,群里聊到了一個很有意思的佈局效果。大致效果如下所示,希望使用 CSS 實現如下所示的佈局效果:

正常而言,我們的 HTML 結構大致是如下所示:

<div class="g-container">
    <div class="g-nav">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
        </ul>
    </div>
    <div class="g-main">
        <ul class="g-content">
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
</div>

對於 Hover 導航 Tab 時候的內容切換,暫且不談。本文,我們核心想探討的是兩個點:

  1. 一是對於如下所示的不規則佈局,應該如何實現:

並且,這裡我們可能還需要給它加上陰影效果:

  1. 如何配合 Hover 動作,實現整個切換效果

帶著這兩個問題,我們一起來嘗試慢慢把這個效果實現。

藉助偽元素實現不規則按鈕

首先,我們需要實現這個效果:

這個,其實在很多篇文章都有提及過:

想一想,這裡其實就是豎向的 Chrome 分 Tab 的效果:

像是這樣:

我們對這個按鈕形狀拆解一下,這裡其實是 3 塊的疊加:

只需要想清楚如何實現兩側的弧形三角即可。這裡還是藉助了漸變 -- 徑向漸變,其實他是這樣,如下圖所示,我們只需要把黑色部分替換為透明即可,使用兩個偽元素即可:

代碼如下:

<div class="outside-circle"></div>
.outside-circle {
    position: relative;
    background: #e91e63;
    border-radius: 10px 10px 0 0;

    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
    }
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
    }
}

即可得到:

我們照葫蘆畫瓢,即可非常輕鬆的實現豎向的相同的效果,示意圖如下:

利用 drop-shadow 實現按鈕陰影

好,接下來,我們需要給按鈕添加上陰影效果,像是這樣:

因為使用了兩個偽元素,當前單個按鈕在 Hover 狀態下的大致代碼如下:


li {
    position: relative;
    width: 160px;
    height: 36px;
    border-radius: 10px 0 0 10px;
    background: #ddd;

    &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        border-radius: unset;
    }

    &::before {
        width: 20px;
        height: 20px;
        top: -20px;
        background: radial-gradient(circle at 0 0, transparent, transparent 19.5px, #ddd 20px, #ddd);
    }
    &::after {
        width: 20px;
        height: 20px;
        bottom: -20px;
        background: radial-gradient(circle at 0 100%, transparent, transparent 19.5px, #ddd 20px, #ddd);
    }
}

如果使用 box-shadow 肯定是不行的,整個效果就會露餡:

嘗試給按鈕添加一個 box-shadow: 0 0 5px 0 #333

彎曲的連接處,明顯沒有陰影效果,怎麼解決呢?

嗯哼,老讀者一定也知道,這裡我們需要對整個可見部分添加陰影,需要使用 filter:drop-shadow()

drop-shadow() 濾鏡的作用用於創建一個符合元素(圖像)本身形狀(alpha 通道)的陰影。其中,最為常見的技巧,就是利用它生成不規則圖形的陰影。

因此,我們把上述的 box-shadow 替換成:filter: drop-shadow(0 0 5px #ddd)

這樣,我們就實現了基於單個不規則按鈕的陰影效果。

但是,顯然事情還沒有結束。

修改佈局結構,再藉助利用 drop-shadow 實現統一陰影

記得我們上面提到過的 HTML 的佈局嗎?正常而言,右側的主體內容和左側的導航,結構是分離的:

<div class="g-container">
    <div class="g-nav">
        <ul>
            <li>Tab 1</li>
            // ...
        </ul>
    </div>
    <div class="g-main">
        <ul class="g-content">
            <li>...</li>
            // ...
        </ul>
    </div>
</div>

因此,這裡最為麻煩的地方在於,左側按鈕的陰影,需要和右側的主體內容連在一起!,所以當我們給右側的 .g-main 也添加上相同的 filter:drop-shadow() 時,整個效果會變得非常奇怪:

// 當前被 Hover 的 li
.g-nav li {
    filter: drop-shadow(0 0 5px #ddd)
}
// 右側的主體
.g-main {
    filter: drop-shadow(0 0 5px #ddd)
}

無論層級誰在上,整體陰影的展示都會瑕疵:

所以,如果想要實現整個元素的陰影是一整個的整體的效果,我們就不得不另闢蹊徑。

這裡,我們的思路如下:

  1. 可以嘗試在 .g-main 中,添加一組與 .g-nav 相同的結構,負責樣式層面的展示
  2. 把新增的結構,利用絕對定位,讓其與實際的導航位置重疊
  3. 在原本的 .g-nav 中,通過 :has() 偽類,傳遞實時的 Hover 狀態

基於此,我們需要改造一下我們的結構:

<div class="g-container">
    <div class="g-nav">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
        </ul>
    </div>
    <div class="g-main">
        <ul class="g-status">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="g-content">
            <li>...</li>
            // ...
        </ul>
    </div>
</div>

仔細看上面的結構,我們多了一組 .g-stauts 結構,放置在了 .g-main 之下。其 li 個數與實際的導航 .g-nav 保持一致,並且高寬大小都是一模一樣的。

並且,可以利用絕對定位,讓其完全疊加在 .g-nav 的位置上。

然後,我們把上述類 Chrome Tab 樣式的不規則按鈕結構的 CSS 代碼結構,都賦給 .g-status 下的 li。

此時,由於不規則按鈕結構和右側的主體內容結構,其實是在一個父 div 之下,所以,我們只需要給 .g-main 元素添加 filter: drop-shadow(),就可以實現一整個整體的陰影效果:

最後,我們利用 :has() 偽類,傳遞實時的 Hover 狀態,把內外的結構連接起來。

最為核心的代碼如下:

.g-main {
    background: #ddd;
    filter: drop-shadow(0 0 3px #999);
}
.g-status {
    position:absolute;
    left: -160px;
    top: 0;
    width: 160px;

    li {
        width: 160px;
        height: 36px;
        position: relative;
        background: #ddd;
        opacity:0;

        &::before,
        &::after {
            content: "";
            position: absolute;
            right: 0;
            border-radius: unset;
        }
        &::before {
            width: 20px;
            height: 20px;
            top: -20px;
            background: radial-gradient(circle at 0 0, transparent, transparent 19.5px, #ddd 20px, #ddd);
        }
        &::after {
            width: 20px;
            height: 20px;
            bottom: -20px;
            background: radial-gradient(circle at 0 100%, transparent, transparent 19.5px, #ddd 20px, #ddd);
        }
    }
}
.g-status li {
    opacity: 0;
}
.g-nav:has(li:nth-child(1):hover) + .g-main {
    .g-status li:nth-child(1) {
        opacity: 1;
    }
}
.g-nav:has(li:nth-child(2):hover) + .g-main {
    .g-status li:nth-child(2) {
        opacity: 1;
    }
}
.g-nav:has(li:nth-child(3):hover) + .g-main {
    .g-status li:nth-child(3) {
        opacity: 1;
    }
}
.g-nav:has(li:nth-child(4):hover) + .g-main {
    .g-status li:nth-child(4) {
        opacity: 1;
    }
}

什麼意思呢?解釋一下:

  1. 事先把每一個 Tab 被 Hover 時的樣式,都寫在了 .g-stauts 中,並且再提醒一下,這個結構是在 .g-main 之下的。然後,預設設置隱藏即可;
  2. 實際觸發 Hover 動畫效果,是正常的 .g-nav 下的一個一個的 li 結構;
  3. .g-nav 下的一個一個的 li 被 Hover 時,我們通過 :has() 偽類,能夠拿到此事件,並且根據當前是第幾個元素被 hover,對應的控制實際在 .g-main 下的結構進行樣式的展示;

不太瞭解的 :has() 偽類的小伙伴,可以先讀一讀這篇文章 -- 淺談邏輯選擇器 is、where、not、has,此偽類的誕生,填補了在之前 CSS 選擇器中,沒有父選擇器的空缺。讓我們能夠在父元素節點上,根據子元素的狀態變化,做出樣式的調整。

這樣,我們就最終實現了我們文章一開始的效果:

文章可能有部分內容沒有闡述的很清晰,完整的代碼其實行數非常之少,對文章內容還不太理解的建議戳進 DEMO 中看看。

完整的 DEMO 效果:CodePen Demo -- Tab Hover Effect

有小伙伴會有疑問,為什麼不直接在 .g-nav 導航結構和 .g-main 結構的父節點直接添加 drop-shadow(),不是也可以實現一樣的效果嗎?

是的,對於本文貼出的代碼效果,是可以實現一樣的效果。但是,實際業務中,.g-nav 會更複雜,它們的共同父元素下也可能還有其他元素,實際情況遠比本文貼出來的結構複雜,因此藉助多一層虛擬 ul,實際上是更好的解法。

最後

好了,本文到此結束,希望本文對你有所幫助

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 有的時候,我們可能需要多次執行同一塊代碼。一般情況下,語句是按順序執行的:函數中的第一個語句先執行,接著是第二個語句,依此類推。 編程語言提供了更為複雜執行路徑的多種控制結構。 迴圈語句允許我們多次執行一個語句或語句組,下麵是大多數編程語言中迴圈語句的流程圖: for 迴圈 TypeScript ...
  • 一、Shape Shape組件是用於創建2D形狀和粒子效果的組件。它可以創建包括圓形、正方形、三角形和多邊形等基本形狀,同時還可以自定義形狀。Shape組件創建各種不同的效果,例如火花、煙霧、雨滴等。在使用Shape組件時,可以通過編輯頂點、路徑和大小等屬性來控制形狀的外觀和行為。 1.創建 ...
  • 介紹 本示例主要介紹在TaskPool子線程中使用 dlopen 預載入 so 庫並使用句柄調用庫函數的方法,以及在Native中使用 pread 系統函數讀取Rawfile文件的部分文本內容,並添加 HiLog 日誌。 效果圖預覽 使用說明 rawfile路徑下存在一個有內容的文本文件rawfil ...
  • 介紹 MpChart是一個包含各種類型圖表的圖表庫,主要用於業務數據彙總,例如銷售數據走勢圖,股價走勢圖等場景中使用,方便開發者快速實現圖表UI。本示例主要介紹如何使用三方庫MpChart實現柱狀圖UI效果。如堆疊數據類型顯示,Y軸是否顯示,左Y軸位置,右Y軸位置,是否顯示X軸,是否繪製背景色,是否 ...
  • 條件語句用於基於不同的條件來執行不同的動作。 TypeScript 條件語句是通過一條或多條語句的執行結果(True 或 False)來決定執行的代碼塊。 可以通過下圖來簡單瞭解條件語句的執行過程: 條件語句 通常在寫代碼時,您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該 ...
  • 一、Image 在HarmonyOS中,Image組件是用於顯示圖像文件的UI組件。它可以顯示本地圖像文件或遠程URL地址的圖像文件。Image組件的實現方式比較簡單,只需提供圖像文件路徑或URL地址即可。 Image通過調用介面來創建,介面調用形式如下: Image(src: string | ...
  • 介紹 本示例介紹用過使用ListItem組件屬性swipeAction實現列表左滑編輯效果的功能。 該場景多用於待辦事項管理、文件管理、備忘錄的記錄管理等。 效果圖預覽 使用說明: 點擊添加按鈕,選擇需要添加的待辦事項。 長按待辦事項,點擊刪除後,被勾選待辦事項被刪除。 左滑單個待辦事項,點擊刪除按 ...
  • 前言 最近有粉絲找到我,說被面試官給問懵了。 粉絲:面試官上來就問“一個vue文件是如何渲染成瀏覽器上面的真實DOM?”,當時還挺竊喜這題真簡單。就簡單說了一下先是編譯成render函數、然後根據render函數生成虛擬DOM,最後就是根據虛擬DOM生成真實DOM。按照正常套路面試官接著會問vue響 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...