创建花哨的盒子
CSS 盒子是任何使用 CSS 样式化的网页的构建块。使它们看起来漂亮既有趣又具有挑战性。它很有趣,因为这完全是关于将设计理念转化为有效代码;它具有挑战性,因为 CSS 存在限制。让我们做一些花哨的盒子。
在我们开始实际操作之前,请确保您熟悉CSS 盒模型。此外,熟悉一些CSS 布局基础知识也是一个好主意,但不是先决条件。
从技术角度来看,创建花哨的盒子完全取决于掌握 CSS 边框和背景属性,以及如何将它们应用于给定的盒子。但除了技术之外,它也关乎释放你的创造力。这并非一蹴而就,一些 Web 开发人员终其一生都在享受其中。
我们将看到很多示例,但我们始终会在尽可能简单的 HTML 片段上进行操作,即一个简单的元素。
<div class="fancy">Hi! I want to be fancy.</div>
好的,这是一个非常小的 HTML 片段,我们可以在这个元素上调整什么?以下所有内容
- 它的盒模型属性:
width
、height
、padding
、border
等。 - 它的背景属性:
background
、background-color
、background-image
、background-position
、background-size
等。 - 它的伪元素:
::before
和::after
- 以及一些其他属性,例如:
box-shadow
、rotate
、outline
等。
所以我们有一个非常广阔的游乐场。让我们开始玩吧。
盒子模型调整
仅盒模型就允许我们做一些基本的事情,例如添加简单的边框、创建正方形等。当您通过使用负padding
和/或margin
以及使border-radius
大于盒子的实际大小来将属性推向极限时,它就开始变得有趣了。
创建圆形
这是一件既简单又有趣的事情。border-radius
属性用于创建应用于盒子的圆角,但是如果半径大小等于或大于盒子的实际宽度会发生什么情况呢?
.fancy {
/* Within a circle, centered text looks prettier. */
text-align: center;
/* Let's avoid our text touching the border. As
our text will still flow in a square, it looks
nicer that way, giving the feeling that it's a "real"
circle. */
padding: 1em;
/* The border will make the circle visible.
You could also use a background, as
backgrounds are clipped by border radius */
border: 0.5em solid black;
/* Let's make sure we have a square.
If it's not a square, we'll get an
ellipsis rather than a circle */
width: 4em;
height: 4em;
/* and let's turn the square into a circle */
border-radius: 100%;
}
是的,我们得到了一个圆形。
背景
当我们谈论花哨的盒子时,处理它的核心属性是background-* 属性。当您开始摆弄背景时,就像您的 CSS 盒子变成了一个您将填充的空白画布。
在我们跳转到一些实际示例之前,让我们退一步,因为您应该了解有关背景的两件事。
- 可以在单个盒子上设置多个背景。它们像图层一样彼此叠加。
- 背景可以是纯色或图像:纯色始终填充整个表面,但图像可以缩放和定位。
好的,让我们来玩玩背景吧。
.fancy {
padding: 1em;
width: 100%;
height: 200px;
box-sizing: border-box;
/* At the bottom of our background stack,
let's have a misty grey solid color */
background-color: #e4e4d9;
/* We stack linear gradients on top of each
other to create our color strip effect.
As you will notice, color gradients are
considered to be images and can be
manipulated as such */
background-image: linear-gradient(175deg, rgb(0 0 0 / 0%) 95%, #8da389 95%),
linear-gradient( 85deg, rgb(0 0 0 / 0%) 95%, #8da389 95%),
linear-gradient(175deg, rgb(0 0 0 / 0%) 90%, #b4b07f 90%),
linear-gradient( 85deg, rgb(0 0 0 / 0%) 92%, #b4b07f 92%),
linear-gradient(175deg, rgb(0 0 0 / 0%) 85%, #c5a68e 85%),
linear-gradient( 85deg, rgb(0 0 0 / 0%) 89%, #c5a68e 89%),
linear-gradient(175deg, rgb(0 0 0 / 0%) 80%, #ba9499 80%),
linear-gradient( 85deg, rgb(0 0 0 / 0%) 86%, #ba9499 86%),
linear-gradient(175deg, rgb(0 0 0 / 0%) 75%, #9f8fa4 75%),
linear-gradient( 85deg, rgb(0 0 0 / 0%) 83%, #9f8fa4 83%),
linear-gradient(175deg, rgb(0 0 0 / 0%) 70%, #74a6ae 70%),
linear-gradient( 85deg, rgb(0 0 0 / 0%) 80%, #74a6ae 80%);
}
注意:渐变可以以一些非常有创意的方式使用。如果您想查看一些创意示例,请查看Lea Verou 的 CSS 图案。如果您想了解更多关于渐变的信息,请随时查阅我们专门的文章。
伪元素
在为单个盒子设置样式时,您可能会发现自己受到限制,并且可能希望拥有更多盒子来创建更令人惊叹的样式。大多数情况下,这会导致通过添加额外的 HTML 元素来污染 DOM,其唯一目的是样式。即使有必要,这在某种程度上也被认为是不好的做法。避免此类陷阱的一种解决方案是使用CSS 伪元素。
云彩
让我们举一个例子,将我们的盒子变成云彩。
.fancy {
text-align: center;
/* Same trick as previously used to make circles */
box-sizing: border-box;
width: 150px;
height: 150px;
padding: 80px 1em 0 1em;
/* We make room for the "ears" of our cloud */
margin: 0 100px;
position: relative;
background-color: #a4c9cf;
/* Well, actually we are not making a full circle
as we want the bottom of our cloud to be flat.
Feel free to tweak this example to make a cloud
that isn't flat at the bottom ;) */
border-radius: 100% 100% 0 0;
}
/* Those are common style that apply to both our ::before
and ::after pseudo elements. */
.fancy::before,
.fancy::after {
/* This is required to be allowed to display the
pseudo-elements, event if the value is an empty
string */
content: "";
/* We position our pseudo-elements on the left and
right sides of the box, but always at the bottom */
position: absolute;
bottom: 0;
/* This makes sure our pseudo-elements will be below
the box content whatever happens. */
z-index: -1;
background-color: #a4c9cf;
border-radius: 100%;
}
.fancy::before {
/* This is the size of the clouds left ear */
width: 125px;
height: 125px;
/* We slightly move it to the left */
left: -80px;
/* To make sure that the bottom of the cloud
remains flat, we must make the bottom right
corner of the left ear square. */
border-bottom-right-radius: 0;
}
.fancy::after {
/* This is the size of the clouds left ear */
width: 100px;
height: 100px;
/* We slightly move it to the right */
right: -60px;
/* To make sure that the bottom of the cloud
remains flat, we must make the bottom left
corner of the right ear square. */
border-bottom-left-radius: 0;
}
块引用
使用伪元素的一个更实用的例子是为 HTML <blockquote>
元素构建良好的格式。因此,让我们来看一个使用略微不同的 HTML 代码片段的示例(这使我们有机会了解如何处理设计本地化)。
<blockquote>
People who think they know everything are a great annoyance to those of us who
do. <i>Isaac Asimov</i>
</blockquote>
<blockquote lang="fr">
L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase.
<i>Pierre Desproges</i>
</blockquote>
所以这里就是我们的样式。
blockquote {
min-height: 5em;
padding: 1em 4em;
font: 1em/150% sans-serif;
position: relative;
background-color: lightgoldenrodyellow;
}
blockquote::before,
blockquote::after {
position: absolute;
height: 3rem;
font:
6rem/100% Georgia,
"Times New Roman",
Times,
serif;
}
blockquote::before {
content: "“";
top: 0.3rem;
left: 0.9rem;
}
blockquote::after {
content: "”";
bottom: 0.3rem;
right: 0.8rem;
}
blockquote:lang(fr)::before {
content: "«";
top: -1.5rem;
left: 0.5rem;
}
blockquote:lang(fr)::after {
content: "»";
bottom: 2.6rem;
right: 0.5rem;
}
blockquote i {
display: block;
font-size: 0.8em;
margin-top: 1rem;
text-align: right;
}
全部合在一起以及更多
因此,当我们将所有这些混合在一起时,可以创建出奇妙的效果。在某些时候,实现这种盒子装饰是设计和 CSS 属性技术使用的创造力问题。通过这样做,可以创建视觉错觉,使您的盒子栩栩如生,例如在此示例中。
让我们创建一些部分阴影效果。box-shadow
属性允许我们创建内部光和扁平的阴影效果,但通过一些额外的工作,通过使用伪元素和rotate
属性(三个单独的transform
属性之一),可以创建更自然的几何形状。
.fancy {
position: relative;
background-color: #ffc;
padding: 2rem;
text-align: center;
max-width: 200px;
}
.fancy::before {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 5px;
width: 50%;
top: 80%;
max-width: 200px;
box-shadow: 0px 13px 10px black;
rotate: 4deg;
}