CSS奇思妙想 -- 使用 CSS 創造藝術

本文屬於 CSS 繪圖技巧其中一篇。以前有過一篇：在 CSS 中使用三角函數繪製曲線圖形及展現動畫

想寫一篇關於 CSS 創造藝術的文章已久，本文主要介紹如何藉助 CSS-doodle ，利用 CSS 快速創造美妙的 CSS 圖形。

中心佈局

本文的全部技巧都會圍繞這個佈局展開，屬於一類技巧。

首先，咱們須要這樣一種中心佈局。簡單的 HTML 結構以下：

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

.g-container {
    position: relative;
    width: 300px;
    height: 300px;
}
.g-box {
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

利用絕對定位和 margin，將元素所有水平垂直居中疊在一塊兒（由於後面會用到 transform，因此選取了這種水平垂直居中的方式），結果以下：

好吧，看着平平無奇，可是基於這種佈局，咱們能夠衍生出很是多有意思的圖案。

改變元素大小

最簡單的，就是咱們能夠改變元素的大小。

CSS 代碼寫着太累，因此咱們簡單的藉助 pug HTML 模板引擎和 SASS。

div.g-container
    -for(var i=0; i<10; i++)
        div.g-box

$count: 10;
@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
        --width: #{$i * 30}px;
        width: var(--width);
        height: var(--width);
        margin-left: calc(var(--width) / -2);
        margin-top: calc(var(--width) / -2);
    }
}

容器下包含 10 個子元素，每一個子元素大小逐漸遞增，很容易獲得以下結果：

改變元素顏色

接着，咱們繼續改變元素的顏色，讓它呈現漸變顏色逐級遞進，能夠是邊框顏色：

@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
         ...
         border-color: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
    }
}

獲得這樣的效果：

也能夠是改變背景 background 的顏色：

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ...
        background: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
        z-index: #{$count - $i};
    }
}

改變元素角度

好，接下來，就能夠開始變換角度了，咱們利用 transform，將元素旋轉不一樣的角度：

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ....
        transform: rotate(#{$i * 7}deg);
    }
}

效果以下：

CodePen Demo -- CSS Pattern

OK，到這裏，基本的一些概念就引入的差很少了，總而言之，利用多元素居中佈局，改變元素的大小、顏色、透明度、角度、陰影、濾鏡、混合模式等等等等，只要你能想到的，均可以。

接下來，咱們再引入本文的另一個主角 -- CSS-doodle 。

CSS-doodle 是一個基於 Web-Component 的庫。容許咱們快速的建立基於 CSS Grid 佈局的頁面，以實現各類 CSS 效果（或許能夠稱之爲 CSS 藝術）。

其最終效果的代碼，本質是都仍是 CSS。具體的一些概念能夠點擊主頁看看，一看就懂。

使用 CSS-doole 實現多元素水平垂直居中佈局

咱們將上面的佈局利用 CSS-doodle 再實現一次，要實現 50個元素的居中對齊，只須要以下簡單的聲明便可：

<css-doodle>
    :doodle {
        @grid: 1x50 / 100vmin;
    }
    @place-cell: center;
</css-doodle>

上面的意思大概是，在 100vmin x 100vmin 大小的容器下，聲明一個 1x50 的 grid 網格佈局，利用 @place-cell: center 將它們所有水平垂直居中，也就是會疊加在一塊兒。

這樣可能看不出效果，咱們再給每一個元素設置不一樣的大小，給它們都加上一個簡單的 border：

<css-doodle>
    :doodle {
        @grid: 1x50 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 2%);
    border: 1px solid #000;
</css-doodle>

• @size: calc(100% - @calc(@index() - 1) * 2%) 表示每一個子元素寬高的大小（也能夠單獨設置高寬），@index 是個變量，表示當前元素的序號，從 1 - 50，表示沒個元素分別爲容器的 2% 高寬、4% 高寬一直到 100% 高寬。
• border: 1px solid #000 就是正常的 CSS 代碼，裏面沒有變量，做用於每個元素

效果以下：

Oh No，眼睛開始花了。這樣，咱們就快速的實現了前面鋪墊時候利用 HTML 代碼和繁瑣的 CSS 生成的圖形效果。

CSS 藝術

接下來，就開始美妙的 CSS 藝術。

改變元素的旋轉角度及邊框顏色

咱們利用上述代碼繼續往下，爲了更好的展現效果，首先總體容器的底色改成黑色，接着改變元素的旋轉角度。每一個元素旋轉 30deg x @index。

代碼很是的短，大概是這樣：

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 30deg));
    border: 1px solid #fff;
</css-doodle>

不太好看，接着，咱們試着給每一個元素，漸進的設置不一樣的 border 顏色，而且透明度 opacity 逐漸下降,，這裏咱們會用到 hsla 顏色表示法：

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 30deg));
    border: 1px solid hsla(
        calc(calc(100 - @index()) * 2.55), 
        calc(@index() * 1%), 
        50%,
        calc(@index() / 100)
    );
</css-doodle>

再看看效果：

全部貼圖都存在必定色差，能夠點進 Demo 裏看看~

Wow，第一幅看上去還不錯的做品出現了。

固然，每個不一樣的角度，都能產生不同的效果，經過 CSS-doodle，能夠快速生成不一樣隨機值，隨機產生不一樣的效果。咱們稍微改變一下上述代碼，將 transform 那一行改一下，引入了一個隨機值：

<css-doodle>
    :doodle {
        --rotate: @r(0, 360)deg;
    }
    transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>

• 利用 @r(0, 360)deg，能隨機生成一個介於 0 到 360 之間的隨機數，後面能夠直接跟上單位，也就變成了一個隨機角度值
• transform: rotate(calc(@index() * var(--rotate)))，利用 calc 規則引入隨機生成的 CSS 變量，固然，再不刷新頁面的前提下，每一次這個值都是固定的

這樣，咱們每次刷新頁面，就能夠獲得不一樣的效果了（固然，CSS-doodle 作了優化，添加短短几行代碼就能夠經過點擊頁面刷新效果），改造後的效果，咱們每次點擊均可以獲得一個新的效果：

CodePen Demo -- CSS Doodle - CSS Magic Pattern

強烈建議你點進 Demo，本身點點鼠標感覺一下 :)

background 顏色奇偶不一樣

好，咱們再換個思路，此次不改變 border 的顏色，而是經過選擇器控制奇數序號的元素和偶數序號的元素，分別給予它們不同的背景色：

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 60deg));

    background: rgba(0, 0, 0, calc((@index * 0.01)));
    @even {
        background: rgba(255, 255, 255, calc((@index * 0.01)));
    }
</css-doodle>

利用 @even {} 能夠快速選中偶數序號的元素，而後給他賦予白色底色，而奇數元素則賦予黑色底色，看看效果：

仍是同樣的思路，咱們能夠將隨機值賦予 transform 的旋轉角度，利用黑白疊加，看看再不一樣角度下，都會有什麼效果：

CodePen Demo -- CSS Doodle - CSS Magic Pattern

固然，在隨機的過程當中，你也能夠選取本身喜歡的，將它們保留下來。

CSS-doodle 支持多種方式的引入，在一頁中展現多個圖形，不在話下，像是這樣：

CodePen Demo -- CSS-doodle Pure CSS Pattern

規律總結

小小總結一下，想要生成不一樣的圖案，其實只須要找到可以生成不一樣線條，或者造型圖案圖形，將它們按照不一樣的大小，不一樣的旋轉角度，不一樣顏色及透明度疊加在一塊兒便可。

這樣的話，一些可能的 idea：

• 只利用單向的 border 會是怎麼樣的呢？
• 出現的 border 都是 solid，若是換成是虛線 dashed 呢？或許能夠再加上 border-radius
• text-decoration 也支持一些各式的下劃線，咱們也能夠利用它們試試

OK，將上述想法付諸實踐，咱們就能夠獲得利用各式線條繪製出來的各式圖形。它們多是這樣：

固然，每次的效果均可以作到隨機，只要咱們合理利用好隨機的參數便可，你能夠戳進下面的 Demo 感覺一下：

CodePen Demo -- CSS-doodle Pure CSS Pattern

Clip-path 與 drop-shadow

嘿，說到創造不一樣的線條與圖案，就不得不提 CSS 裏另外兩個有意思是屬性。Clip-path 與 fitler: drop-shadow()。

嗯哼？什麼意思呢。咱們來個簡單的 Demo，利用 Clip-path ，咱們能夠裁剪出不一樣的元素造型。譬如實現一個簡單的多邊形：

div {
    width: 300px;
    height: 300px;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    background: #333;
}

效果以下：

那麼利用這個思路，咱們就能夠嘗試利用 clip-path 裁剪出各類不一樣的造型進行疊加。

在 CSS-doodle Shapes 中，內置了很是多的 clip-path 圖形供咱們選擇：

咱們隨機選取一個：

套用上述的規則，嘗試着實現一個圖形：

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    background: hsla(
        calc(calc(100 - @index()) * 2.55), 
        calc(@index() * 1%), 
        65%,
        calc(@index() / 100)
    );
    clip-path: @shape(
        fill-rule: evenodd;
        split: 200;
        scale: .45;
        x: cos(2t) + cos(π - 5t);
        y: sin(2t) + sin(π - 5t);
    );
</css-doodle>

此次沒有旋轉不一樣的角度，只是給每一層賦予不一樣的背景底色，可以獲得這樣的效果：

CodePen Demo -- CSS Doodle - CSS Magic Pattern

Clip-path 與 drop-shadow 創造不一樣線條

OK，上述是利用 Clip-path 創造了不一樣的圖案，那不一樣的線條怎麼得來呢？

別急。這就須要請出咱們另一個屬性 drop-shadow，利用 drop-shadow，能夠給 Clip-path 裁剪出來的圖形創造不一樣的陰影，固然有一些結構上的限制，大概的僞代碼以下：

div {
    position: relative;
    width: 300px;
    height: 300px;
    filter: drop-shadow(0px 0px 1px black);

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        background: #fff;
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }
}

咱們須要將 filter: drop-shadow(0px 0px 2px black) 做用在利用了 clip-path 的元素的父元素之上，而且，利用了 clip-path: 的元素必須帶有 background，才能給裁剪元素附上陰影效果。

上述的代碼以下：

OK，完美，這樣一來，咱們就極大極大的豐富了咱們的線條庫，再運用會上述的線條規則，一大波新的圖案應運而生。

CodePen Demo -- CSS-doodle Pure CSS Pattern - clip-path - drop-shadow

OK，限於篇幅，就不一一展開了，感興趣能夠點進上述 Demo Fork 一份本身嘗試。還有很是多有意思的圖案等待挖掘生成。

最後，再來欣賞一下 CSS-doodle 做者，袁川袁老師利用上述技巧的做品：

CodePen Demo -- css doodle art

最後

本文到此結束，但願對你有幫助 :)，想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。