Advanced box effects

框陰影

回到我們的造型文字模塊中，我們查看了 / text-shadow"> text-shadow 屬性，它允許您將一個(gè)或多個(gè)陰影應(yīng)用于元素的文本。 嗯，對于框，存在一個(gè)等效屬性 - box-shadow / a>允許您將一個(gè)或多個(gè)陰影應(yīng)用于實(shí)際元素框。 像文本陰影，箱子陰影在瀏覽器中支持相當(dāng)好，但只在IE9 +。 您的老IE版本的用戶可能只需要處理沒有陰影，所以只要測試您的設(shè)計(jì)，以確保您的內(nèi)容沒有他們清晰。

您可以在框中找到本部分中的示例， shadow.html (請參閱 外部">源代碼)。

一個(gè)簡單的盒子陰影

讓我們來看一個(gè)簡單的例子來開始。 首先，一些HTML:

<article class="simple">
  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>

現(xiàn)在的CSS:

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.simple {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

這給我們以下結(jié)果:

您會(huì)看到我們在 box-shadow 屬性值中有四個(gè)項(xiàng)目:

1. The first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
2. The second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative).
3. The third length value is the blur radius — the amount of blurring applied to the shadow.
4. The color value is the base color of the shadow.

您可以使用任何長度和顏色單位，這樣做有意義，以定義這些值。

多箱陰影

您還可以在單個(gè) box-shadow 聲明中指定多個(gè)框陰影，用逗號(hào)分隔它們:

<article class="multiple">
  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.multiple {
? box-shadow: 1px 1px 1px black,
????????????? 2px 2px 1px black,
????????????? 3px 3px 1px red,
????????????? 4px 4px 1px red,
????????????? 5px 5px 1px black,
????????????? 6px 6px 1px black;
}

現(xiàn)在我們得到這個(gè)結(jié)果:

我們在這里做了一些有趣的事情，通過創(chuàng)建一個(gè)帶有多個(gè)彩色圖層的凸起框，但是你可以以任何你想要的方式使用它，例如使用基于多個(gè)光源的陰影創(chuàng)建一個(gè)更逼真的外觀。

其他箱陰影特征

與 text-shadow 不同， "https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow"> box-shadow 有一個(gè)插入 關(guān)鍵字可用 - 將其放在陰影聲明的開頭，使其成為內(nèi)部陰影，而不是外部陰影。 讓我們來看看我們的意思。

首先，我們將為這個(gè)例子使用一些不同的HTML:

<button>Press me!</button>

button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

button:focus, button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow: inset 2px 2px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

這給我們以下結(jié)果:

在這里，我們設(shè)置了一些按鈕樣式以及焦點(diǎn)/懸停/活動(dòng)狀態(tài)。 默認(rèn)情況下，按鈕上有一個(gè)簡單的黑盒陰影，加上幾個(gè)陰影，一個(gè)光和一個(gè)黑暗，放置在按鈕的對角，給它一個(gè)很好的陰影效果。

當(dāng)按下按鈕時(shí)，活動(dòng)狀態(tài)導(dǎo)致第一框陰影被交換為非常暗的陰影，給出被按壓的按鈕的外觀。

過濾器

CSS過濾器提供了一種將過濾器應(yīng)用到元素的方式，就像您可以將過濾器應(yīng)用于圖形包中的圖層一樣，如Photoshop。 有多種不同的選項(xiàng)可供使用，您可以在 代碼>過濾器 參考頁。 在本節(jié)中，我們將向您解釋語法，并告訴您結(jié)果有多有趣。

基本上，一個(gè)過濾器可以應(yīng)用于任何元素，塊或內(nèi)聯(lián) - 你只需使用 filter 屬性，并給它一個(gè)特定的過濾器函數(shù)的值。 一些過濾器選項(xiàng)可以與其他CSS功能做類似的事情，例如 drop-shadow()以非常相似的方式工作，并給出類似的效果 developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow"> box-shadow 或 / zh-CN / docs / Web / CSS / text-shadow"> text-shadow 。 然而，過濾器的真正好處在于，它們處理框內(nèi)的內(nèi)容的確切形狀，而不僅僅是框的本身作為一個(gè)大塊，它可以看起來更好，雖然它可能不總是你想要的。 讓我們用一個(gè)簡單的例子來說明我們的意思:

首先，一些簡單的HTML:

<p class="filter">Filter</p>

<p class="box-shadow">Box shadow</p>

現(xiàn)在一些CSS為每個(gè)應(yīng)用一個(gè)陰影:

p {
  margin: 1rem auto;
  padding: 20px;
  width: 100px;
  border: 5px dashed red;
}

.filter {
  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
}

.box-shadow {
  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
}

這給我們以下結(jié)果:

如您所見，過濾器陰影跟隨文本和邊框破折號(hào)的確切形狀。 箱子陰影只是跟隨箱子的正方形。

還有一些要注意的事情:

• Filters are very new — they are supported in most modern browsers, including Microsoft Edge, but they are not supported in Internet Explorer at all. If you use filters in your designs, you should therefore make sure your content is usable without the filters.
• You'll see that we've included a version of the filter property with -webkit- prefixed. This is called a Vendor Prefix, and is used sometimes by a browser before it finalizes its implementation of a new feature, to support that feature and experiment with it while not clashing with the non-prefixed version. Vendor prefixes were never intended to be used by web developers, but they do get used sometimes on production pages if experimental features are really desired. In this case, the -webkit- version of the property is currently required for Chrome/Safari/Opera support, while Edge and Firefox use the final, non-prefixed version.

您可以在 filters.html 上查看其他過濾器示例， a>(另請參閱源代碼 / a>)。

混合模式

CSS混合模式允許我們在兩個(gè)元素重疊時(shí)為混合效果添加混合模式 - 每個(gè)像素顯示的最終顏色將是原始像素顏色和下面圖層中像素的組合的結(jié)果 它。 混合模式對于諸如Photoshop的圖形應(yīng)用程序的用戶也是非常熟悉的。

在CSS中有兩種使用混合模式的屬性: background-blend- mode ，它將在單個(gè)元素上設(shè)置的多個(gè)背景圖片和顏色混合在一起， mix-blend-mode"> mix-blend-mode ，它將它所設(shè)置的元素與它重疊的元素(包括背景和內(nèi)容)混合在一起。

您可以在我們的 "> blend-modes.html 示例頁面(請參閱 html"class ="external">源代碼)，并在 代碼>< blend-mode> 參考頁。

背景混合模式

再次，讓我們看一些例子，這樣我們可以更好地理解這一點(diǎn)。 首先， background-blend-mode - 在這里，我們將展示一些簡單的 < div> > s，因此您可以將原始版本與混合版本進(jìn)行比較:

<div>
</div>
<div class="multiply">
</div>

現(xiàn)在一些CSS - 我們添加了兩個(gè)背景圖片到< div> s:線性漸變和png:

div {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
              linear-gradient(to bottom right, #f33, #a33);
}

.multiply {
  background-blend-mode: multiply;
}

我們得到的結(jié)果是 - 你可以看到右邊的乘法混合模式:

混合混合模式

現(xiàn)在，讓我們來看看 mix-blend-mode a>。 這里我們將展示相同的兩個(gè)< div> ，但每個(gè)都位于一個(gè)淺藍(lán)色背景的簡單< div> 顯示元素如何混合在一起:

<article>
  No mix blend mode
  <div>
        
  </div>
  <div>
  </div>
</article>

<article>
  Multiply mix
  <div class="multiply-mix">
        
  </div>
  <div>
  </div>
</article>

下面是我們將使用的CSS樣式:

article {
  width: 300px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
                  linear-gradient(to bottom right, #f33, #a33);
}

article div:last-child {
  background-color: aqua;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}

這給了我們以下結(jié)果:

你可以看到這里的多重混合混合不僅混合在一起的兩個(gè)背景圖像，而且從底部< div> 下面的顏色混合。

-webkit-background-clip:文本

在繼續(xù)之前(目前在Chrome，Safari和Opera中支持，并在Firefox中實(shí)現(xiàn))，另一個(gè)我們認(rèn)為我們會(huì)簡要提到的新特性是 text /developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip"> background-clip 。 當(dāng)與 -webkit-text-fill-color:transparent; 特性一起使用時(shí)，這允許您將背景圖像剪切到元素文本的形狀，從而獲得一些不錯(cuò)的效果。 這不是一個(gè)官方標(biāo)準(zhǔn)，但已經(jīng)在多個(gè)瀏覽器上實(shí)現(xiàn)，因?yàn)樗鞘軞g迎的，開發(fā)人員使用相當(dāng)廣泛。 在此上下文中使用時(shí)，即使對于非Webkit / Chrome瀏覽器，這兩個(gè)屬性都需要 -webkit - 供應(yīng)商前綴:

.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

那么為什么其他瀏覽器實(shí)現(xiàn)一個(gè) -webkit - 前綴？ 主要是為了瀏覽器兼容性 - 所以許多web開發(fā)人員已經(jīng)開始用 -webkit - 前綴實(shí)現(xiàn)網(wǎng)站，它開始看起來像其他瀏覽器被打破，而實(shí)際上他們遵循標(biāo)準(zhǔn)。 所以他們被迫實(shí)現(xiàn)一些這樣的功能。 這突出了在您的工作中使用非標(biāo)準(zhǔn)和/或前綴CSS功能的危險(xiǎn) - 不僅會(huì)導(dǎo)致瀏覽器兼容性問題，但它們也可能更改，因此您的代碼可能隨時(shí)中斷。 堅(jiān)持標(biāo)準(zhǔn)是更好的。

如果您確實(shí)希望在生產(chǎn)工作中使用這些功能，請確保徹底地跨瀏覽器進(jìn)行測試，并檢查在這些功能不起作用的情況下，該網(wǎng)站仍然可用。

主動(dòng)學(xué)習(xí):實(shí)驗(yàn)一些效果

現(xiàn)在輪到你了。 對于這種主動(dòng)學(xué)習(xí)，我們希望您使用下面提供的代碼來實(shí)驗(yàn)?zāi)厦骈喿x的一些效果。

如果出錯(cuò)，您可以隨時(shí)使用重置按鈕重置示例。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me">
</div></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
              linear-gradient(to bottom right, #f33, #a33);
} </textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
  <div class="controls">
?   <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
? htmlInput.value = htmlCode;
? cssInput.value = cssCode;
? drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

概要

我們希望這篇文章被證明是有趣的玩玩玩具通常是閃亮的玩具，總是很有趣，看看什么樣的工具，正在變得可用在尖端的瀏覽器。 您已到達(dá)樣式框文章的末尾，因此接下來您將使用我們的評(píng)估測試您的盒子樣式技能。