跳至正文

9个工作日常中非常实用的CSS技巧

一、文本选择颜色

当你访问网站或阅读博客时,你经常使用鼠标选择文本,它只是蓝色选择白色文本。你可以通过自定义文本颜色选择使你的网站脱颖而出。

使用选择伪元素为你网站上的文本提供个人风格。

::selection{
  background-color: #616161;
  color: #e0e0e0;
}

二、首字下沉

在一些专业的文章/报纸上,我们经常会看见首字母下沉这样的样式外观,一般都是在文本的第一个字母上使用首字下沉。首字下沉是那个大写字母,文字环绕在它周围。

使用 first-letter 伪元素来装饰你的第一个字母,不需要使用 span 和 .dropcap 类名。

article p:first-of-type::first-letter{
  color: #616161;
  float: left;
  font-family: Georgia;
  font-size: 4rem;
  line-height: 4vw;
  padding-right: 8px;
}

三、平滑滚动

你访问一些网站并尝试转到不同的部分,它会平滑地滚动到该部分。这不是高级编码,但在你的 CSS 中只需要一行代码,你就可以实现这一点。

你可以将 CSS scroll-behavior 属性与 html一起用作选择器,以启用整个 HTML 页面的平滑滚动。

html {
  scroll-behavior: smooth !important;
}

四、输入插入符号颜色

你可以更改输入字段插入符号的颜色以使其更加个性化。

你只需要为这个效果使用 caret-color 属性!

.form__input{
  width: 80%;
  height: 4vw;
  outline: 0;
  border: 0;
  border-radius: 4vw;
  background-color: #e0e0e0;
  box-shadow: inset 4px 4px 6px #757575, inset -6px -6px 6px #f5f5f5;
  padding: 0 0 0 1vw;
  font: 400 1vw "Roboto", sans-serif;
  color: #212121;
  /* Set Input Caret Color */
  caret-color: #d32f2f;
}

五、投影

使用投影为透明图像提供更好的阴影效果,这会使你的作品看起来更棒。

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(30px 10px 4px #757575);
}

六、文本居中显示

有时将 div 元素居中可能令人生畏,但你只需几行 CSS 即可将任何 div 居中。

不要忘记设置 display:grid; 对于父元素,然后使用 place-items 属性。

main {
  width: 100%;
  height: 80vh;
  display: grid;
  place-items: center center;
}

七、自定义滚动条

我们只用 CSS 就能做到这一点,如果你想在跨浏览器上获得全面支持,最好使用 JavaScript 库来制作滚动条。

.content-wrapper {
  width: 100%;
  height: 400px;
  overflow: auto;
}
.content-wrapper::-webkit-scrollbar {
  width: 12px;
  background-color: #bdbdbd;
  border-radius: 1vw;
}
.content-wrapper::-webkit-scrollbar-thumb {
  background-color: #9e9e9e;
  border-radius: 1vw;
}
.content-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #757575;
}
.content-wrapper::-webkit-scrollbar-thumb:active {
  background: #616161;
}

八、禁用用户选择

有时,你不想让用户选择复制你网页上面的某些内容,此时,你可以选择使用禁止用户选择复制内容的功能。就算用户选中了内容,但是依然不能复制所选的内容。

.content-header h2{
  user-select: none;
}

九、竖排文字

有时候,你可能会在网页上或者报纸上看到一些竖排的文字,就像下图中的标题文字这样,从底部到顶部这样竖排。

.sidebar h2 {
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}

《9个工作日常中非常实用的CSS技巧》有3个想法

  1. Avatar photo

    Excellent post. I was checking continuously this
    blog and I’m impressed! Extremely useful info specially the
    last part 🙂 I care for such information much. I was looking for this certain information for a very long time.

    Thank you and best of luck.

  2. Avatar photo

    hello there and thank you for your information ? I have definitely picked up something new from right here. I did however expertise a few technical issues using this site, since I experienced to reload the website a lot of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I am complaining, but sluggish loading instances times will often affect your placement in google and could damage your high-quality score if ads and marketing with Adwords. Well I?m adding this RSS to my email and could look out for a lot more of your respective fascinating content. Ensure that you update this again soon
    Visit my website : Сравните

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注