文簡介

點(diǎn)贊 + 收藏 + 關(guān)注=學(xué)會(huì)了

先上圖看看效果再介紹

我把這個(gè)想過設(shè)置在 body 標(biāo)簽上了，所以整個(gè)網(wǎng)頁的背景都變成了紅磚效果。

在很多很多年前，我購買了《CSS揭秘》這本書，在里面發(fā)現(xiàn)了作者 Lea Verou 的網(wǎng)站。我必須推薦大家閱讀《CSS揭秘》，里面的每個(gè)例子都讓我拍案叫絕。

在我個(gè)人看來，這本書是每個(gè)打算從初升高的前端必讀的css書籍，它是一本進(jìn)階級(jí)的書，不會(huì)跟你講過多的css基礎(chǔ)。

我在 《這18個(gè)網(wǎng)站能讓你的頁面背景炫酷起來》 里也推薦過她的網(wǎng)站，大家有興趣可以去看看~ https://juejin.cn/post/7044397764368662559

本文所講的內(nèi)容是 Lea Verou 網(wǎng)站中的 bricks 例子 里的代碼，因?yàn)榫W(wǎng)站上沒有解釋這個(gè)實(shí)現(xiàn)原理，所以我打算簡單講兩句。

如果你想直接獲取完整代碼，可以滑動(dòng)到文章底部直接復(fù)制走人；你也可以先看看完整代碼，然后自己分析一下，再和我的分析做對比~

動(dòng)手實(shí)現(xiàn)

直接給答案：

用 background-image 的漸變來實(shí)現(xiàn)； 用2個(gè)直角三角形可以組合成1個(gè)矩形，而這兩個(gè)三角形又有點(diǎn)色差的話，就能做出類似磚塊的效果~

其實(shí)本例和 《純CSS 實(shí)現(xiàn)格子背景（國際象棋棋盤）》 有點(diǎn)像，如果你讀過格子背景那篇文章會(huì)更容易理解本文。 https://juejin.cn/post/7102784102637502478

主要是通過兩個(gè)不同顏色的三角形，合成一個(gè)長方形。再通過做2層這種長方形，調(diào)整好相應(yīng)的位置，就形成以上效果。

畫2個(gè)不同顏色的三角形，把下面三角形分別往上和往左移動(dòng)一點(diǎn)點(diǎn)。

<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    background-image:
      linear-gradient(335deg, #b00 23px, transparent 0),
      linear-gradient(155deg, #d00 23px, transparent 0);
    background-position: 0px 0px, 4px 33px;
    background-size: 58px 58px;
  }
</style>

從上圖的效果可以看到行距比較大。所以需要再畫一層同樣的紅磚，調(diào)整“新紅磚層”的位置。

<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    background-image:
      linear-gradient(335deg, #b00 23px, transparent 0),
      linear-gradient(155deg, #d00 23px, transparent 0),
      /* 新層 */
      linear-gradient(335deg, #b00 23px, transparent 0),
      linear-gradient(155deg, #d00 23px, transparent 0);
    /* 最后的 30px 29px, 34px 4px 是對新層的定位 */
    background-position: 0px 0px, 4px 33px, 30px 29px, 34px 4px;
    background-size: 58px 58px;
  }
</style>

如果你愿意再寫點(diǎn)小漸變，這個(gè)磚塊的立體效果會(huì)更加明顯~

了新的 <dialog> 標(biāo)記，前端開發(fā)將從此不同...

?之前：

看看我創(chuàng)建一個(gè)對話框要花費(fèi)多少功夫。僅 CSS 就有近 20 行：

這還只是用于對話框功能的 CSS，它看起來仍然非常基本：

但是，使用新的 <dialog> 標(biāo)簽又如何呢？

? 現(xiàn)在：

<button id="open">Open</button>
<dialog id="dialog">
  ? Lighting strikes the earth 44 times every second!
  ? 閃電每秒擊中地球44次！
</dialog>

JS:

const dialog=document.getElementById('dialog');
const open=document.getElementById('open');

open.addEventListener('click', ()=> {
  dialog.showModal();
});

我們甚至可以使用 show() 方法來顯示非模式對話框--沒有背景，干擾較少：

const dialog=document.getElementById('dialog');
const open=document.getElementById('open');

open.addEventListener('click', ()=> {
  // ? show() 方法
  dialog.show();
});

對話框一直是強(qiáng)力吸引用戶注意力并向其傳遞信息的有力方式。

從 Material Design 到 Fluent Design，它一直是每個(gè)用戶界面設(shè)計(jì)系統(tǒng)的主打功能。

但是，即使它們再常見，我們也不得不借助第三方庫或創(chuàng)建自定義組件來使用它們。

其中許多圖書館甚至沒有遵循關(guān)于可用性和可訪問性的官方建議......

例如：按 Escape 鍵應(yīng)該可以解除頁面上的對話框，但許多自定義對話框都不會(huì)這樣做。

因此， <dialog> 改變了這一切。

自動(dòng)打開對話框

open 屬性使對話框從打開頁面的那一刻起就一直處于打開狀態(tài)：

<dialog id="dialog" open>
  長頸鹿比人類更有可能被閃電擊中。事實(shí)上，它們的可能性是人類的30倍。
</dialog>

自動(dòng)關(guān)閉按鈕

是的，可以使用標(biāo)準(zhǔn)事件偵聽器和 close() 方法添加關(guān)閉功能：

const close=document.querySelector('#dialog .close');

close.addEventListener('click', ()=> {
  dialog.close();
});

但是內(nèi)置的 <dialog> 可以讓這一切變得更加簡單--無需 JavaScript：

<dialog id="dialog">
  ? 在 codingbeautydev.com 獲取基本的編碼技能和知識(shí)
  <br />
  <form method="dialog">
    <button class="close">關(guān)閉</button>
  </form>
</dialog>

如何正確設(shè)計(jì)

<dialog> 樣式

<dialog> 有一個(gè)特殊的 ::backdrop 偽元素，用于設(shè)計(jì)背景墻的樣式：

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

主要元素的樣式簡單明了：

dialog {
  background-color: black;
  color: white;
}

最后

有了新的 HTML <dialog> 標(biāo)記，在我們的網(wǎng)絡(luò)應(yīng)用程序中創(chuàng)建模式和對話框變得前所未有的簡單和快捷。

著我們國家的文化建設(shè)發(fā)展得越來越好，黨建文化也越來越被提倡，各個(gè)地方的黨建文化墻設(shè)計(jì)得不僅有藝術(shù)氣息，而且還有深意。在新媒體全速發(fā)展得時(shí)代，我們獲取信息越來越方便，黨建文化墻最主要的目的也是讓黨員、干部及職工在短時(shí)間內(nèi)了解黨制定的方針政策和黨政文化，從而跟著黨更好地為人民服務(wù)。

因此文化墻要怎么設(shè)計(jì)，才能既莊嚴(yán)又完美，更有效地走進(jìn)人民心里呢？今天小編這里有一份黨建文化墻設(shè)計(jì)攻略分享給大家，希望能給你們帶來靈感。

1、首先確定主題，黨建文化墻當(dāng)然就是以黨建工作為主要內(nèi)容，比如黨史、黨建、廉政、核心價(jià)值觀和，然后圍繞特定的主題，對相關(guān)內(nèi)容進(jìn)行學(xué)習(xí)，并總結(jié)歸納出宣傳要點(diǎn)。

2、黨建文化墻的色調(diào)大部分以紅色為主，白色、金色、黃色等都可以用作輔色，鮮艷奪目的色彩也比較容易吸引別人的目光，更有利于黨建文化的宣傳。

3、在黨建工作中具有代表性的標(biāo)志，都是可以延伸為黨建文化墻中的設(shè)計(jì)元素，比如黨徽、紅旗、天安門、五角星、祥云、紅絲帶等。

建設(shè)黨建文化墻，不僅可以裝點(diǎn)工作環(huán)境，還可以通過接地氣的方式，宣傳黨的宗旨和精神，提供黨的宣傳力度。