纯css 阴影文字_带有纯CSS的“弯曲”阴影

最新推荐文章于 2023-03-17 11:25:44 发布

cungui5726

最新推荐文章于 2023-03-17 11:25:44 发布

阅读量320

点赞数

文章标签： css html java css3 js ViewUI

原文链接：https://thenewcode.com/503/Curved-Dropshadows-with-pure-CSS

版权

纯css 阴影文字

Previously I have demonstrated how to place curved dropshadows on HTML elements using a PNG shadow image generated with PhotoShop. Being forced to make the shadows with an application is a little irritating when we know that CSS has box-shadow. Surely there’s a way of creating curved shadows with just that property?

以前，我已经演示了如何使用由PhotoShop生成的PNG阴影图像在HTML元素上放置弯曲的阴影。当我们知道CSS具有box-shadow时，被迫使用应用程序进行阴影处理会box-shadow 。当然有一种方法可以仅通过该属性创建弯曲阴影？

Right now, the answer is… “kinda”. As I’ll show you, we can get awfully close, especially if the effect you’re after is subtle, and we can add a few visual tricks… but at the moment the shadows can’t be bent into actual curves with just CSS. (That will have to wait for the advent of CSS shaders.)

现在，答案是……“有点”。正如我将向您展示的，我们可以非常接近，尤其是当您追求的效果微妙时，并且可以添加一些视觉技巧……但是目前，仅靠CSS无法将阴影弯曲成实际曲线。 (这必须等待CSS着色器的出现。)

I’ll use much the same method as the previous article. In that lesson, I used ::before and ::after pseudo-elements with their content properties set to an image. But there’s nothing that says that we must have any content defined in ::before or ::after … and those invisible pieces of content can still have their own shadows.

我将使用与上一篇文章几乎相同的方法。在该课程中，我使用::before和::after 伪元素，并将它们的content属性设置为image 。但是，没有什么可以说：必须在::before或::after定义任何内容，而那些看不见的内容仍然可以拥有自己的阴影。

In this case I’ll wrap the image with a <div>, just to make things slightly easier:

在这种情况下，我将使用<div>包裹图像，只是使事情变得简单一些：

<div class="shadowed">
	<img src="perhentian-island-malaysia.jpg" alt="Dawn at Perhentian Island">
</div>

Then, I apply much the same technique as before: this time, the <div> has position: relative, so our ::before and ::after effects will be positioned relative to it and not the <body>:

然后，我使用与以前相同的技术：这次， <div>具有position: relative ，因此我们的::before和::after效果将相对于它而不是<body> ：

div#island-dawn {
	margin-bottom: 2rem;
	position: relative;
}

We have to have some content for the pseudo-elements, but there’s no rule it has to be anything visible. In this case, I’ll make it a single space:

我们必须为伪元素提供一些内容，但是没有规则必须包含任何可见内容。在这种情况下，我将其放在一个空格中：

div#island-dawn:before,  div#island-dawn:after {
	content: " ";
	width: 80px;
	height: 8px;
}

Then we’ll apply a box-shadow to these pseudo-elements, with a 15 pixel spread specified.

然后，我们将对这些伪元素应用box-shadow ，并指定15像素的spread 。

div#island-dawn:before, div#island-dawn:after { 
	  content: " ";
	  width: 80px; height: 8px;
	  box-shadow: rgba(0,0,0,0.6) 0px 0px 15px 8px;
	  position: absolute; bottom: 7px;
}

We’ll also push in the shadows from the left and right, and rotate each pseudo-element, after specifying where the element is rotated from. (The top left and right corners of the left and right shadows, respectively). Here, I’ll show the transforms sans vendor prefixes:

在指定元素从何处旋转之后，我们还将从左侧和右侧推入阴影，并旋转每个伪元素。 (分别是左右阴影的左上角和右上角)。在这里，我将显示无供应商前缀的转换：

div#island-dawn:before {
	left: 22px;
	transform-origin: 0 left;
	transform: rotate(-4deg);
}
div#island-dawn:after {
	right: 11px;
	transform-origin: 0 right;
	transform: rotate(4deg);
}

While the shadows remain “straight”, the effect is close enough to fool the eye of most casual observers. Possible enhancements include the possibility of rotating the shadows in depth with CSS3 3D.

当阴影保持“笔直”时，效果足够接近，足以使大多数休闲观察者的眼睛蒙蔽。可能的增强功能包括使用CSS3 3D深度旋转阴影的可能性。