中文 |
让我们学习一些实用的CSS技巧来提高我们的生产力。这些 CSS 技巧将帮助我们的开发人员快速高效地构建项目。
现在,让我们开始吧。
1.CSS:范围内和:范围外伪类
这些伪类用于在指定范围限制之内和之外设置输入样式。
(a):在范围内
如果输入的当前值>元素为
在 min 和 max 属性的边界之间,input> 元素在作用域中。
此伪类可以轻松确定数组的当前值是否可接受。
(b):超出范围
如果输入>元素的当前值超出最小和最大属性的范围,则该元素超出范围。
如果数组值超出其范围,它将向用户提供视觉指示。
CSS代码:
<pre class="code-snippet__js" data-lang="css">/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}
输出:
您应该知道此伪类仅适用于作用域元素。如果没有此限制,元素不能在范围内或超出范围。
2. 灰度( )函数
我们可以使用 100% 的值将图像从彩色转换为黑白。当我们将此值设置为 0% 时,图像将保持不变。
使用值 100% 会将图像转换为黑白,这意味着照片中将没有颜色。
我们可以使用 0 到 100% 之间的值来创建各种不同的功效。
CSS代码:
.grayscale-image{
filter: grayscale(100%);
}
输出:
3. 玻璃功效
我们可以使用几行代码为您的下一个项目添加玻璃功效。是的,真的就是这么简单。玻璃效果很漂亮,可以为您的设计增添高贵的触感。
玻璃.CSS 是目前最受欢迎的玻璃形态生成器,我们可以用来为我们的项目创建 CSS 玻璃固化剂。我们所要做的就是根据需要调整项目的一些设置,然后将 CSS 代码复制并粘贴到实际的开发项目中。
CSS代码:
.glass-effect{
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
}
4. 使用以下 CSS 代码设置文本样式
这些是每个人都应该知道的一些特别基本的文本样式。但是,还有许多其他中间选项可用。
CSS代码:
p{
font-family: Helvetica, Arial, sans-serif;
font-size: 5rem;
text-transform: capitalize;
text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
text-align: center;
font-weight: normal;
line-height: 1.6;
letter-spacing: 2px;
}
5.CSS clamp() 函数
CSS clamp( ) 函数将值限制在两个上限和下限之间的范围内。必须有一个首选值、一个最小值和一个最大值。
当字体大小根据图层而变化时,Clamp() 会派上用场。
CSS代码:
p{
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
6. 居中 div
开发人员最重要的任务是将 div 居中。还有很多其他选项可以将 div 居中。在这个例子中,我们使用 CSS flexbox 在水平和垂直方向上居中 div。
CSS代码:
div{
display: flex;
justify-content: center;
align-items: center;
}
7. 渐变CSS线性渐变要创建渐变CSS
线性渐变,只需使用下面的CSS代码即可。
CSS代码:
div {
background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
8.CSS抖动效率
当用户输入无效输入时,此“摇晃”动画效果会摇晃输入数组。它简单而优雅。例如,如果用户在文本数组中输入数字而不是字母,则输入数组将摇晃。
网页代码:
<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; }
}
9. 文本溢出
我们可以使用此属性来截断溢出文本。可以使用省略号 (...) 或自定义字符串来剪切和显示它们。
CSS代码:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
width: 200px;
}
div.text {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.text:hover {
overflow: visible;
}
10. “列计数”属性
它指定应将元素定义为的列数。
CSS代码:
p{
column-count: 2;
}
11.CSS 动画
动画会逐渐更改元素的样式。仅当首先指定关键帧时,才会使用它。关键帧描述了动漫元素在动漫序列中特定点的显示方式。
CSS代码:
div{
width: 200px;
height: 200px;
background-color: blue;
animation-name: square;
animation-duration: 8s;
}
@keyframes square{
from {background-color: blue;}
to {background-color: black;}
}
12. 阴影功效
使用 CSS,您可以为文本和元素添加治疗效果。将属性定义为文本阴影和框阴影。使用文本阴影向文本添加阴影背景渐变css,使用框阴影向元素添加阴影。
(i) 文本阴影:它给文本一个阴影。
h1{
color: blue;
text-shadow: 2px 2px 4px #000000;
}
(ii) 框形阴影:用于为元素提供阴影。下面的示例中的实际 div 是白色的,框阴影是天蓝色的,并设置为右侧和顶部 10 个像素。
div{
width: 200px;
height: 200px;
padding: 15px;
background-color: purple;
box-shadow: 10px 10px skyblue;
}
13.CSS 裁剪
使用 clip-path 属性,可以只显示元素的一部分,而隐藏其余元素。
CSS代码:
.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;
}
Clippy-CSS 剪贴路径生成器是一种快速简便的方法背景渐变css,通过将元素剪裁为基本形状(圆形、椭圆形、多边形或插图)或 SVG 源,在 CSS 中创建复杂形状。
14.CSS 背景混合模式属性
此属性描述应如何混合背景颜色和图像(或两个图像)。
对应于每个背景图像的混合模式列表构成此值。混合模式指定背景图层的混合方式(颜色或图片)。
可以使用背景混合模式属性制作令人惊讶的背景。
CSS代码:
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;
}
最后
感谢您的阅读!喜欢的话,请记得点赞,关注我。快乐
学习,快乐编程。
更多的是熟悉新的功能和基础理论,本文通过一个案例带领大家了解 CSS3 中的一些理论知识,同时也总结了一些方法,进而提高你的开发效率;
在这种情况下,(背景颜色渐变
),使用CSS3可以实现背景颜色渐变的效果;
网页部分:
渐变——天际线 渐变——天际线
要实现背景颜色渐变,你不需要在HTML(结构)部分做任何事情,这里添加一行单词,方便显示疗效;
CSS部分:
body{ margin: 0; padding: 0; font-family: "montserrat"; background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD); background-size: 400%; animation: bganimation 15s infinite; } .text{ color: white; text-align: center; text-transform: uppercase; margin: 400px 0; font-size: 22px; } @keyframes bganimation { 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }
带走:
其中一些在前面提到过(水涟漪)并提到:
背景图像:线性渐变();
linear-gradient() 函数用于创建线性渐变的“图像”。为了创建线性渐变,您需要在某个方向(指定为角度)上设置起点和渐变效果。您还可以定义停止颜色。停止颜色是您希望壁虎平滑的过渡css背景渐变,但您必须至少指定两个,实际上,您可以指定更多颜色来创建更复杂的渐变。
其中“125度”是设置渐变的倾斜角度;
背景位置:
属性设置背景图像的起始位置。
您也可以尝试以下封面渐变:
background:white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient( rgba(200,0,0,.5) 50%, transparent 0); background-size: 30px 30px;
总结
以上就是CSS3实现的背景动态渐变效果给大家介绍的,希望对您有所帮助,如果您有任何疑问,请给我留言,小编会及时回复您。特别感谢您对剧本之家网站的支持!如果您觉得本文对您有帮助css背景渐变,欢迎转载,请注明出处,谢谢!