CSS小知识,分享14个你可能还未用上但又实用的CSS属性(下)

开发 前端
大家好,今天分享 14 个实用的CSS属性,你可能还未用上,这些 CSS 属性将帮助你提高开发的效率,CSS Shake Effect 是一种使用 CSS 制作的晃动效果。这种效果通常用于错误提类似的场景。

大家好,在上一篇文章里 CSS小知识,分享14个你可能还未用上但又实用的CSS属性(上)我们一起学习了上半部分,这篇文章我们我们继续学习下半部分。

八、CSS Shake Effect 晃动效果

CSS Shake Effect 是一种使用 CSS 制作的晃动效果。这种效果通常用于错误提类似的场景。

如下段代码所示,当用户输入无效输入时,此“摇动”动画效果会摇动输入字段。它简单而优雅。例如,如果用户在文本字段中输入数字而不是字母,输入字段将会抖动。

HTML部分

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>

CSS部分

input:invalid{
      animation: shake 0.2s ease-in-out 0s 2;
      box-shadow: 0 0 0.4em red;
}
  @keyframes shake {
      0% { margin-left: 0rem; }
      25% { margin-left: 0.5rem; }
      75% { margin-left: -0.5rem; }
      100% { margin-left: 0rem; }
}

九、Text Overflow 文字溢出

您可以使用此属性截断溢出的文本。指在文本超出元素宽度时,自动隐藏超出部分的文本。在 CSS 中,可以使用 text-overflow 属性来实现这种效果。可以使用省略号 (...) 或自定义字符串对其进行截取缩略显示。

下面是一个简单的代码示例:

.overflow-ellipsis {
  width: 100px; /* 定义元素的宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 添加省略号来指示隐藏的文本 */
}

HTML:

<div class="overflow-ellipsis">文本如果超出容器会被截断并添加省略号</div>

上面的代码定义了一个名为 "overflow-ellipsis" 的类,并将其应用于一个元素。这个类使用了 white-space: nowrap; 来防止文本换行,使用了 overflow: hidden; 来隐藏超出部分,并使用了 text-overflow: ellipsis; 来添加省略号(...)来指示隐藏的文本。

十、column-count 内容多列属性

CSS 的 column-count 属性可以用来将一个元素的内容分成多列,以实现报纸或杂志的页面布局效果。

下面是一个简单的代码示例:

.multi-column {
  column-count: 2; /* 将内容分成两列 */
  column-gap: 20px; /* 设置列之间的间隔 */
}

HTML:

<div class="multi-column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, augue non tincidunt eleifend, magna massa varius lorem, at luctus augue tellus in nibh.</p>
  <p>Proin velit orci, pellentesque vel malesuada at, varius vel nibh. Nam eget mauris euismod, feugiat ipsum a, convallis enim. Aenean euismod malesuada orci eget euismod.</p>
  <p>Nunc vitae augue eget nulla tempus aliquet. Integer euismod quam nunc, id rhoncus magna convallis at. Nullam euismod, sem a bibendum malesuada, erat ligula molestie magna.</p>
</div>

上面的代码定义了一个名为 "multi-column" 的类,并将其应用于一个元素。这个类使用了 column-count: 2; 来将内容分成两列,并使用了 column-gap: 20px; 来设置列之间的间隔。

还有 column-width 属性可以用来设置每一列的宽度,若同时设置 column-width 和 column-count 属性,则优先使用 column-width,column-count 会自动调整。

在实际使用中,需要结合其他属性,如 column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width等等来实现多列布局的效果。

十一、CSS Animations 动画

动画逐渐改变元素的样式。只有先指定关键帧才能使用它。关键帧描述动画元素如何出现在动画序列中的等相关特性。

示例代码:

div{
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: square;
  animation-duration: 8s;
}
@keyframes square{
  from {background-color: blue;}
  to {background-color: black;}
}

十二、Shadow Effects 阴影效果

text-shadow 属性可以在文本上添加阴影效果,可以使用它来增强文本的可读性和吸引力。

box-shadow 属性可以在元素上添加阴影效果,可以使用它来增强元素的立体感和吸引力。

下面是 text-shadow 和 box-shadow 的一个简单的代码示例:

.text-shadow {
  text-shadow: 2px 2px 4px #000000; /* x-offset, y-offset, blur-radius, color */
}

.box-shadow {
  box-shadow: 2px 2px 4px #000000; /* x-offset, y-offset, blur-radius, color */
}

HTML代码

<p class="text-shadow">This is text with shadow</p>
<div class="box-shadow">This is a box with shadow</div>

上面的代码定义了一个名为 "text-shadow" 的类和一个名为 "box-shadow" 的类,分别将其应用于一个文本元素和一个盒子元素。这两个类都使用了 x-offset: 2px; y-offset: 2px; blur-radius: 4px; color: #000000; 来定义阴影的样式。

阴影的偏移值(x-offset y-offset)可以正值或负值,正值为阴影在元素的下方右方,负值为阴影在元素的上方左方。阴影的模糊半径和阴影的颜色也可以根据需要调整。

在实际使用中,还可以使用 box-shadow: inset; 属性来改变阴影为内阴影。

十三、CSS Clipping

clip-path 属性可以用来剪切元素的形状。它可以使用一个图形或路径来定义剪切区域。

如下段代码示例:

.bg{
  height: 100%;
  width: 100%;
  background-color: rgba(199, 62, 133, 0.9);
  clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
  position: absolute;
}

https://bennettfeely.com/clippy/ 这个工具网站,是一种通过将元素剪辑为基本形状(圆形、椭圆形、多边形或插图)的可视化在线代码生成工具,大大节省的你的时间。

十四、CSS background-blend-mode 属性

background-blend-mode 属性可以用来控制背景图像与背景颜色的混合模式。它可以使用一系列的混合模式来定义背景的外观,如添加颜色、阴影、高光等。

您可以使用 background-blend-mode 属性制作令人惊叹的背景。

如下段代码所示:

div{
   width: 600px;
   height: 400px;
   background-repeat: no-repeat, repeat;
   background-position: center;
   background-image: url("flower.png"), url("background-image.png");
   background-blend-mode: color;
}

完成后的效果:

background-blend-mode 属性有很多可用的值,如:normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity。

在实际使用中,需要注意浏览器的兼容性问题,需要使用前请查询浏览器对 background-blend-mode 的支持情况。更多相关的用法建议查询
https://www.w3schools.com/cssref/pr_background-blend-mode.php 这个网站。

结束

今天的分享就到这里,14 个关于CSS的属性就分享到这里,希望对你有所帮助。

责任编辑:姜华 来源: 今日头条
相关推荐

2023-12-08 08:45:41

CSS属性颜色变换属性前端

2022-11-01 15:57:44

2023-02-13 15:09:01

开发webCSS技巧

2023-01-09 17:23:14

CSS技巧

2010-08-27 10:12:53

CSS

2020-04-28 14:05:53

CSS网页开发

2020-11-16 16:04:42

CSS设计代码

2023-12-19 13:30:00

JavaScrip原生API函数

2024-05-20 09:27:00

Web 开发CSS

2023-12-19 16:39:18

CSS开发前端

2012-02-07 14:04:53

CSS

2024-03-29 06:32:46

CSSJavaScript前端

2014-11-19 15:08:09

CSS

2020-08-31 11:40:54

VimLinux字符

2023-08-22 10:25:19

CSS动画网页

2024-04-01 07:58:49

Next.js 14ReactWeb应用

2024-02-26 08:20:00

CSS开发

2023-12-19 13:31:00

CSS前端技巧

2010-09-06 15:35:27

2023-07-26 07:51:30

CSSgap 属性
点赞
收藏

51CTO技术栈公众号