本周，我将进一步了解CSS魔术，以显示改变您的网站是多么容易。坐下来，放松，让我带你走过九个简单的（我真的是这个意思！）CSS技巧真正提升你的网页。

这是一个简单的网站。它非常好 - 简单，信息丰富，可读。它甚至还有一些漂亮的照片。

通过几个简单的技巧，我们将把简单的Jane简化为网页设计师的梦想：

现在看起来很酷，不是吗？从最初的网站到这里真的很容易，所以让我们快速开始第一步吧！

1.文字选择颜色

这可以在很少的代码行中改变，但经常被忽视！最细微的细节计数，如果您将默认的选择/突出显示颜色更改为适合您要使用的主题的颜色，您的访问者将会选择并更好地浏览您的网站。

要更改选择/突出显示颜色和文本颜色，只需指定它们，如下所示：

::selection {
background-color: #013896;
color: #f1f1f1;
}

2.首字下沉

要获得专业的文章/报纸外观，您可以在文本的第一个字母上使用首字下沉。首字母是大写字母，您可以根据自己喜欢的任何方式设置风格，以适应您网页的主题。有几种方法可以在CSS中实现drop cap。我正在做的事情非常简单。

我将第一个字母放在span标签中，如下所示：

<span class=”dropcap”>T</span>he places I dream of

然后使用CSS，我装饰了drop cap类。

.dropcap {
 float: left;
 font-size: 400%;
 color: #cf142b;
 margin: -13px 7px -13px 0;
}

主要是，我需要确保将其设置为浮动对象。尺寸和颜色完全取决于你，并在这里包装，只需调整边距使其看起来完美。

一封信真的有所作为！

3.图像叠加

当鼠标悬停在图像上时，图像叠加是一种视觉对待。它可以用于许多目的，从装饰到显示隐藏的元素，如按钮。您可以在互联网上找到很多样式，在这里我选择使用原始出版商徽标的图像替换原始文章的URLlink。当鼠标悬停在该图像上时，一个简单的文本就会淡入。

<div class=”container”>
<a href=”https://luxurylondon.co.uk/travel/international/cambodia-luxury-hotels-review/"><img src=”https://luxurylondon.co.uk/images/frontend/logos/luxury-london-logo.png" alt=”Avatar” class=”image”></a>
<div class=”overlay”>
<div class=”text”>Go to site.</div>
</div>
</div>

我们的想法是将图像和叠加（无论它可能是什么）放在彼此之上。除非鼠标悬停在叠加上，否则使叠加层不可见。这可以在opacity属性中更改。为了使事情顺利进行，也要指定过渡时间。请注意以下代码中的过渡和不透明度：

.overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100%;
 opacity: 0;
 transition: 0.5s ease;
 background-color: #cf142b;
}
.container:hover .overlay {
 opacity: 0.8;
 cursor: pointer;
}

4.在悬停时着色并放大图像

这是我最喜欢的技巧之一。它将图像从枯燥和静态变为交互式。首先，您需要将图像包装在容器中。让容器给出类名“image image-colorize”。必须将容器的overflow属性设置为隐藏才能使效果生效。

诀窍实际上是图像叠加技巧。默认情况下将图像设置为灰度，然后在鼠标悬停在图像上时取出该滤镜。可以使用transform：scale（your_ratio）;来调整缩放。

.image {
width: 100%;
overflow: hidden;
}
.image-colorize img {
transition: transform .5s, filter 0.5s ease-in-out;
filter: grayscale(100%);
}
.image-colorize:hover img {
filter: grayscale(0);
transform: scale(1.1);
}

除了简单的棕褐色和灰色规模之外，还有更多内容！查看这篇关于您可以使用这个巧妙技巧实现的各种其他样式的优秀博客文章。

5.玩图像遮罩

现在我们正在进入专业领域，但你不需要专业技能来实现这种效果。图像蒙版是一种以特定形式裁剪图像的方法。该形式由第二图像确定，其中该图像仅包含掩模的形状，而其他所有图像都是透明的。使用视觉效果更容易理解。

如果这是我的形象：

这是我的mask（白色部分实际上是透明的）：

那么这将是掩盖图像的结果：

遮盖图像的好处是图像不是一个标准的矩形框，所以这给你提供了很多创意空间（从gif看）（想象一下在吴哥窟后面的太阳落山/升起！） 。当然，除非你背后放置一些东西，否则没有人会知道你的形象被掩盖了！它看起来就像一个普通的白色背景。

正如您所看到的，我所做的就是在向下滚动时隐藏吴哥窟背后的“柬埔寨”文字。在原始版本中，如果向下滚动，“柬埔寨”就会消失在上面。所以我们需要防止这种情况。我们可以做的是粘贴文本，使其始终保持在视图中，直到它消失在我们的图像后面。

这是文本的样式：

div.sticky {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 z-index: -999;
 padding: 50px;
 text-align: center;
 font-size: 150px;
 margin-bottom: -70px;
}

“position：sticky”是使该元素变得粘稠的原因。另一个重要的是z指数。z-index比其他东西更高的东西将在顶部看到。我们希望文本消失在图像后面，因此我们将它的z-index设置为更小。（不必一直到-999）。

最后一步。将图像和文本包装在标题标记中，否则也会在主文章后面看到“柬埔寨”。

<header>
// all those mask tricks
</header>
// rest of document

结束

所有这些美丽的技巧不仅仅是美好的。如果您是刚刚开始的Web开发人员，那么使用CSS是了解CSS可能性和局限性的好方法，并且在此过程中享受设计过程。如果您想为您的企业建立一个网站，这些小细节将大大提升客户体验并吸引他们在您的网站上停留更长时间。我们今天使用的是纯CSS，你可以很好地改进网站。合并Javascript将把它带到一个全新的水平。有大量的在线学习资源，一旦你掌握了基础知识，不要害怕深入了解需要更多技术知识的风格。

在此存储库中获取之前和之后网站的源代码：https://github.com/dalisc/css_tricks

翻译自：https://medium.com/@9cv9official/5-little-css-tricks-to-make-your-website-go-a-long-way-7cda61fcd7d0