html元素阴影_将弯曲的阴影阴影应用于HTML元素

html元素阴影

In a previous article I stepped through the process of creating a curved dropshadow image in PhotoShop. Now it’s time to take the 32-bit PNG we exported at the end of that process and apply it to your elements, so you can give the visual impression of a "lifted" dropshadow on a curved background.

在上一篇文章中，我逐步介绍了在PhotoShop中创建弯曲的阴影图像的过程。 现在是时候使用在该过程结束时导出的32位PNG并将其应用于您的元素了，这样您就可以在弯曲的背景上给人一种“提升的”阴影的视觉印象。

I could apply the CSS that follows to any HTML container element. Here, I’ll use an<article> element:

我可以将以下CSS应用于任何HTML容器元素。 在这里，我将使用<article>元素：

<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

What’s interesting is what the CSS is not. You might assume that we would apply the PNG as a background-image, possibly via multiple backgrounds. However, if you tried to do so, you’ll discover that you can only apply a background-image within the extent of the element that it is applied to. Instead, we’ll apply the shadow image using the pseudo-elements ::before and ::after.

You’ll want to take a note of this technique if you proceed to the next article on creating curved dropshadows with CSS, as it uses much the same idea, just without images.

有趣的是CSS 不是 。 您可能会假设我们可能会通过多个background将PNG用作background-image 。 但是，如果您尝试这样做，则会发现您只能在background-image 元素所应用的范围内应用background-image 。 相反，我们将使用伪元素 ::before和::after来应用阴影图像。

如果您继续阅读下一篇关于使用CSS创建弯曲阴影的文章，那么您将需要记下这种技术，因为它使用了几乎相同的想法，只是没有图像。

First, let’s define our base CSS:

首先，让我们定义基本CSS：

article {
	width: 768px;
	margin: 2em auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 2em;
	background: #ffc;
	position: relative;
}

We’re going to position these shadows absolutely. So we use the old trick of defining the <article> elements as being position:relative so that the absolutely positioned shadows will be positioned relative to each article.

我们将绝对定位这些阴影。 因此，我们使用将<article>元素定义为position:relative的旧技巧，以便将绝对定位的阴影相对于每篇文章定位。

For the first shadow we’ll use our 32-bit PNG image from the previous lesson:

对于第一个阴影，我们将使用上一课中的 32位PNG图像：

article:before {
	content: url('shadow.png');
	position: absolute; z-index: -2;
	bottom: -15px; left: 8px;
}

You will need to alter the values for bottom and left depending on the size and shape of your particular shadow image: in my case, the shadow is inset 8 pixels from the left and 15 pixels below the bottom of the article element it is attached to.

您将需要根据特定阴影图像的大小和形状来更改bottom和left的值：在我的情况下，阴影是从其所附着的article元素的底部向左插入8个像素，并从底部向下插入15个像素。

Our :after pseudo-element will have many of the same properties, so we’ll group the selectors together:

我们的:after伪元素将具有许多相同的属性，因此我们将选择器组合在一起：

article:before, article:after {
	content: url('shadow.png');
	position: absolute;
	z-index: -2; bottom: -15px;
}

There’s only two things that are different about the right-hand shadow. First, it will be positioned from the right, not the left, and second, it will be reversed (flipped horizontally). Rather than making and loading a separate shadow image, we’ll use the CSS method for flipping images:

右侧阴影只有两点不同。 首先，它将从右侧而不是左侧放置，其次，它将被反转(水平翻转)。 我们将使用CSS方法翻转图像，而不是制作和加载单独的阴影图像：

article:left { left: 3%;  }
article:after {
	transform: scaleX(-1);
	right: 3%;
}

That’s it! You’ll now find that every article has a subtle, curved, lifted drop shadow underneath it. Neat, huh? Unlike other solutions you might find, it’s also fluid: if you decided to specify the width of your articles in percentages, the shadows would move appropriately as the articles became thinner and wider due to browser window or device resizing.

而已！ 现在，您会发现每篇文章的下方都有一个微妙的，弯曲的，可提升的阴影。 整洁吧？ 与您可能会发现的其他解决方案不同，它也很灵活：如果决定以百分比指定文章的宽度，则由于浏览器窗口或设备尺寸的调整，文章变得越来越薄时，阴影会适当地移动。

翻译自: https://thenewcode.com/498/Applying-Curved-Dropshadows-To-HTML-Elements

html元素阴影