5个小巧的CSS技巧
本周，我将进一步了解CSS魔术，以显示改变您的网站是多么容易。坐下来，放松，让我带你走过九个简单的（我真的是这个意思！）CSS技巧真正提升你的网页。
这是一个简单的网站。它非常好 - 简单，信息丰富，可读。它甚至还有一些漂亮的照片。
【5个小巧的CSS技巧】通过几个简单的技巧，我们将把简单的Jane简化为网页设计师的梦想：
现在看起来很酷，不是吗？从最初的网站到这里真的很容易，所以让我们快速开始第一步吧！
1.文字选择颜色 
文章图片
这可以在很少的代码行中改变，但经常被忽视！最细微的细节计数，如果您将默认的选择/突出显示颜色更改为适合您要使用的主题的颜色，您的访问者将会选择并更好地浏览您的网站。
要更改选择/突出显示颜色和文本颜色，只需指定它们，如下所示：
::selection {
background-color: #013896;
color: #f1f1f1;
}
2.首字下沉
文章图片
要获得专业的文章/报纸外观，您可以在文本的第一个字母上使用首字下沉。首字母是大写字母，您可以根据自己喜欢的任何方式设置风格，以适应您网页的主题。有几种方法可以在CSS中实现drop cap。我正在做的事情非常简单。
我将第一个字母放在span标签中，如下所示：
The places I dream of
然后使用CSS，我装饰了drop cap类。
.dropcap {
float: left;
font-size: 400%;
color: #cf142b;
margin: -13px 7px -13px 0;
}
主要是，我需要确保将其设置为浮动对象。尺寸和颜色完全取决于你，并在这里包装，只需调整边距使其看起来完美。
一封信真的有所作为！
3.图像叠加
文章图片
当鼠标悬停在图像上时，图像叠加是一种视觉对待。它可以用于许多目的，从装饰到显示隐藏的元素，如按钮。您可以在互联网上找到很多样式，在这里我选择使用原始出版商徽标的图像替换原始文章的URLlink。当鼠标悬停在该图像上时，一个简单的文本就会淡入。
文章图片
这是我的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）。
最后一步。将图像和文本包装在标题标记中，否则也会在主文章后面看到“柬埔寨”。
// all those mask tricks// 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
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量