CSS 創意構想

時間 2020-05-31

標籤 css 創意構想欄目 CSS 简体版

原文原文鏈接

背景

本人一直對 CSS 很感興趣，恰好咱們團隊有一位擅長CSS的大佬：COCO。css

因而我找到他，建議作一期關於CSS的分享，因而就有了《CSS創意構想》。html

分享的內容很棒，裏面有不少技巧，有的很實用，有的很華麗。聽完以後，我以爲十分受用，就想結合本身的一些理解，再次整理一番， 加深印象，二次吸取，因此就有了今天的文章。git

滿滿的乾貨，也分享給你們，但願對你們有所啓發。github

PS: 文章內示例均來自coco的博客，感興趣的能夠移步到這裏。ide

佈局

平行四邊形

先拋一個問題，如何實現平行四邊形佈局效果?
佈局

transform ？
疊加三角形 ？

僅僅實現形狀的話，上面兩種方式都是能夠的。flex

可是，若是圖形內部還有文字，須要正常排布，transform 、疊加三角形都不可行。動畫

那怎麼辦呢？答案就是： shape-outside.spa

shape-outside定義了一個能夠是非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行排版
clip-pathCSS 屬性能夠建立一個只有元素的部分區域能夠顯示的剪切區域

clip-path 語法：3d

{ 
    clip-path: circle(50px at 0  100px); 
    clip-path: ellipse(); 
    clip-path: inset(10px  10px  10px  10px); 
    clip-path: polygon(10px  10px, 20px  20px, 30px  30px);
}

圖文混排 Demo:

https://codepen.io/Chokcoco/p...

CSS Shapes Demo：

https://codepen.io/Chokcoco/p...

一個適用的場景：適配 iPhone X劉海頭

鏤空

使用陰影，能夠很是簡單的模擬遮罩效果，而且，圓角也是沒有問題的。

box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);

垂直居中

拋出個問題： 最快的水平垂直居中方法是什麼？

你首先想到的是否是： flex, center, center ?

其實margin也能夠：

<div class="g-container">  
    <div class="g-box"></div>  
</div>

.g-container { display: flex; } 
.g-box { margin: auto; }

原理：

在 flex 格式化上下文中，設置了 margin: auto 的元素，在經過 justify-content 和 align-self 進行對齊以前，任何正處於空閒的空間都會分配到該方向的自動 margin 中去。

Live Demo:

https://codepen.io/Chokcoco/p...

還有這種常見的左右佈局，也能夠巧用margin來實現：

<ul class="g-nav">
    <li>導航A</li>
    <li>導航B</li>
    <li>導航C</li>
    <li>導航D</li>
    <li class="g-login">登錄</li>
    <li>註冊</li>
</ul>

.g-nav { display: flex; } 
.g-login { margin-left: auto; }

自動頁腳

咱們常常會遇到須要放置在頁腳的元素，高度超過一屏時，自動頂下去：

這種效果也有不少種實現方式，巧用margin能夠快速實現：

<div class="g-container">
    <div class="g-real-box">
        ...
    </div>
    <div class="g-footer"></div>
</div>
.g-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 30px;
    background: deeppink;
}

陰影

陰影分爲外陰影和內陰影（inset）
陰影能夠是多重陰影
陰影能夠進行動畫

使用陰影能夠輕鬆獲得圖片自己，而且任意改變顏色及大小.

好比, 把發散半徑設置爲0:

code:

div {
    width: 80px;
    height: 80px;
    background: #fff;
    box-shadow: 
        80px 80px 0 0 yellow, 
        -80px 80px 0 10px green;
}

使用陰影模擬多重邊框

代碼實現：

{
  background: #fff;
  box-shadow:  
    0 0 0 2px red,
    0 0 0 4px orange,
    0 0 0 6px yellow,
    0 0 0 8px green,
    0 0 0 10px cyan;
}

使用陰影畫出一朵雲：

實際上是用不一樣的陰影疊加而成：

.bgShadowCloud {
    width: 100px;
    height: 100px;
    margin: 50px auto!important;
    background: #fff;
    border-radius: 50%;
    box-shadow: 120px 0px 0 -10px #795548, 95px 20px 0 0px #607D8B, 30px 30px 0 -10px green, 90px -20px 0 0px #FFC107, 40px -40px 0 0px #2196F3;
    animation: change 6s infinite;
}

內陰影

模擬圓月變月牙：

代碼實現：

動態效果：
https://codepen.io/Chokcoco/p...

特殊陰影

有的時候，CSS 的 box-shadow 沒法很好去實現一些特殊陰影，能夠利用一些小技巧進行模擬。

長陰影

藉助兩個僞元素的 transform: skew() 變換
僞元素背景從實色到透明色的背景色變化

實現代碼：

<div class="bgLongShadow"></div>

.bgLongShadow {
    position: relative;
    width: 268px;
    height: 269px;
    background: #fff;
    margin: 20px auto!important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.bgLongShadow::before {
    transform-origin: 0 50%;
    transform: translate(100%, 0) skewY(45deg) scaleX(.3);
    background: linear-gradient(90deg, rgba(255, 255, 255, .3), transparent);
    animation: shadowMoveY 5s infinite linear alternate;
}

.bgLongShadow::before, .bgLongShadow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

立體投影

以第一個爲例，實際上是用了一點障眼法：

代碼實現：

<div class="bgSolidShadow"></div>

div.bgSolidShadow {
    position: relative;
    width: 600px;
    height: 100px;
    margin: 50px auto;
    background: hsl(48, 100%, 50%);
    border-radius: 20px;
    box-shadow: 0 0 5px 2px hsl(48, 100%, 45%);
    cursor: pointer;
}

.bgSolidShadow::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 5%;
    right: 5%;
    bottom: 0;
    border-radius: 10px;
    transform: translate(0, -15%) rotate(-2deg);
    transform-origin: center center;
    box-shadow: 0 0 10px 12px hsl(0, 0%, 0%);
    z-index: -1;
}

彩色陰影

實際上是藉助了高斯模糊濾鏡

{
    filter: blur(10px) brightness(90%) opacity(.85);
}

總體陰影

看下圖：

這個的陰影如何實現？ box-shadow ?

先看一下DOM結構：

<div class="flecha"></div>

// 三角
.flecha {
    position: relative;
    margin: 50px auto!important;
    width: 0;
    height: 0;
    border-top: 90px solid transparent!important;
    border-right: 90px solid #FFC000!important;
    transform: rotate(10deg);
    box-shadow: 0px 0px 10px rgba(255, 220, 0, .8);
}

// 尾巴

.flecha:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 30px solid #FFC000!important;
    border-radius: 200px 0 0 0!important;
    top: -119px;
    left: -98px;
    width: 120px;
    height: 120px;
    transform: rotate(45deg);
}

此時的效果：

加上box-shadow:

{
    box-shadow: 0px 0px 10px rgba(255, 220, 0, .8);
}

可見是不行的，那該怎麼辦呢？

答案是: 使用 drop-shadow

{ 
  filter: drop-shadow(0px  0px  10px  rgba(255, 220, 0, .8)); 
}

完美～

利用drop-shadow單標籤實現抖音 LOGO

代碼實現：

div {
    position: relative;
    width: 37px;
    height: 218px;
    background: #fff;
    filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);
    box-shadow: 11.6px 10px 0 0 #fe2d52;
    
    &::before {
        ....
        filter: drop-shadow(16px 0px 0 #fe2d52);
    }
    
    &::after {
        ....
        filter:drop-shadow(14px 0 0 #fe2d52);
    }
}

Live demo：

https://codepen.io/Chokcoco/p...

十分酷炫～