您的当前位置:首页css的开发小技巧

css的开发小技巧

2023-11-27 来源:热乐宠物网

关于css技巧类的在网站里已经发了很多了,那么我今天在总结归纳一下平时在工作中可以遇到问题,并且说一下用CSS的解决方案,什么是多列等高布局?

点击增加一侧文字,另一侧背景也增加。

html代码:

<div id="container"> <div class="left">haorooms多列等高布局左</div> <div class="right" id="rights">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div></div>

方法一: 使用正负 margin 与 padding 相冲的方式实现

 #container{ width:400px; margin:0 auto; background:#eee; overflow:hidden;}.left,.right{ width:200px; float:left; font-size: 16px; line-height:24px; color:#333; padding-bottom:5000px; margin-bottom:-5000px;}.left{ background-color: deeppink;}.right{ background-color:yellowgreen;}

给一个足够大的padding和负margin

二、使用 display:flex 的方式实现

这个方式很简单,移动端我们经常用,container 设置为display:flex,子元素设置为flex:1就可以了。

三、display:table-cell 实现

和上面方法类似,container 设置为display:table;,子元素设置为display:table-cell;就可以了。

四、 父容器设置背景色实现

如下:

#container{ width:400px; margin:0 auto; background-color: deeppink; overflow:hidden;}.left,.right{ width:200px; float:left; font-size: 16px; line-height:24px; color:#333;}.right{ background-color:yellowgreen;}

五、父容器多重背景色--线性渐变

#container{ width:400px; margin:0 auto; background-image: linear-gradient(90deg, yellowgreen 50%, deeppink 0); overflow:hidden;}.left,.right{ width:200px; float:left; font-size: 16px; line-height:24px; color:#333;}

六、border实现

 #container{ border-left:200px solid yellowgreen; background-color:deeppink; width:200px; font-size: 16px; line-height:24px; color:#333; } .left{ width:200px; margin-left:-200px; float:left; }

多列均匀布局

方法一:display:flex

这种方法上面也讲过,实现起来比较简单,适合移动端布局。

方法二:借助伪元素及 text-align:justify

html代码如下:

<div class="container"> <div class="justify"> <i>1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> </div></div>

css代码如下:

.justify{ text-align: justify; text-align-last: justify; // 新增这一行}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center;}text-align-last兼容性不是很好,可以使用::after,.justify{ text-align: justify;}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center; border-radius:50%;}.justify:after { content: ""; display: inline-block; position: relative; width: 100%;}

列表布局边界线问题

方法一:margin负边距

思路:

外层设置width,overflow设置为hidden,内层设置负边距,margin-left:-1px;就可以把左侧边距隐藏

html代码如下:

<div class="ul-container"> <ul> <li>haorooms</li> <li>测试</li> <li>hao测试</li> <li>右侧</li> <li>边界线</li> <li>消失</li> <li>测试</li> </ul></div>

css代码:

ul{ width: 300px; margin-left:-1px;}li{ float:left; width:99px; line-height:30px; text-align:center; border-left:1px solid #999; font-size:18px; margin-bottom:10px;}.ul-container{ width: 300px; margin: 50px auto; overflow:hidden; background: #eee; padding:10px 0;}

方法二 :使用伪类选择器

// 使用伪类选择器,选择第 3n 个元素去掉边框li:nth-child(3n){ border-right:none;}

在工作中常见的问题就这么多了,更多精彩请关注Gxl网其它相关文章!

相关阅读:

CSS3怎么制作蝴蝶飞舞的动画

css3点击显示涟漪特效

利用CSS3怎么做出不规则图片的切换特效制作

小编还为您整理了以下内容,可能对您也有帮助:

几个好用的css函数小技巧

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

1.纯CSS Tooltip

许多网站还是在使用JavaScript来创建Tooltip效果,但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性,比如 data-tooltip="?" 。然后你就可以在你的CSS文件中添加以下的代码通过 attr() 函数来显示提示文字:

.tooltip::after { content: attr(data-tooltip);

}

相当简单对吧?当然实际上我们还需要更多的代码来给提示增加样式,但是不用担心,已经有了为此设计的强大且纯粹的叫 Hint.css 的CSS库和 Balloon.css 。

2.使用自定义数据属性和 attr() 函数

我们已经学会如何使用 attr() 来创建提示,另外还有一些场景能使用到这个函数。通过与数据属性相结合,你可以通过很简单的一行HTML代码来创建带有标题和描述的缩略图:

<a class="caption" href="#" data-title="Vulture" data-description="...">

<img src="img.jpg" alt="Illustration"/>

</a>

现在你可以通过 attr() 函数来显示标题与描述:

.caption::after { content: attr(data-title);

...

}

以下为具体的例子:

注意:这个方法在浏览器支持方面可能会有一些问题,具体内容你可以查看 Accessibility support for CSS generated content 这篇文章。

3. CSS Counters

你可以通过CSS Counters实现超棒的功能。这不是一个非常为人熟知的属性,大多数人甚至可能认为浏览器不能很好的支持这个属性,但事实上所有的浏览器都支持这个属性:

但是你不应该将CSS counters使用在有序列表 <ol> 上,它更适合使用在类似分页或者图片库下面显示的数字上。你可以通过下面的例子看出如何使用很少的代码(甚至不使用JavaScript)来对选中的项目进行计数:

CSS counters也非常适合显示可通过拖放进行重新排序的项目列表上动态变化的数字:

正如最后一个例子,我们需要记住,通过该方法生成的内容在可访问性上可能会有些问题。

4.CSS滤镜实现的磨砂效果

在iOS7中,苹果实现了“磨砂玻璃”的效果--半透明的,模糊的元素,看起来像覆盖了一层磨砂玻璃。受到苹果的启发,这种效果被运用到很多地方。在CSS滤镜出现之前要重现这个效果还是有些棘手的。你必须通过使用 模糊图片 来实现这种毛玻璃的效果。但现在CSS滤镜得到了几乎所有的主流浏览器的支持,所以要 重现这个效果 就简单很多了。

在未来,我们可以通过背景过滤器和 filter() 函数 来实现这样的效果,但目前只有 Safari 同时支持这两个功能。

有关于CSS的 filter 更多的介绍可以点击这里进行了解。

5.将HTML元素作为背景

一般我们可以设置一个JPEG或者PNG文件作为背景,或者也可以设置一个渐变的背景。但是你知道可以通过使用 element() 函数,从而将一个 <div> 设置为背景图片吗?现在, element() 函数只有在Firefox中得到了支持:

可能性是无止境的, 这里 是MDN上的一个例子。

有关于CSS的 element() 函数的相关介绍可以点击这里。

6.通过 calc() 创建更好的网格

流体网格虽然很棒但是仍然存在很严重的问题。比如,在顶部和底部的间距大小几乎不可能与在左边和右边的间距大小相同。另外,若使用的网格系统不一样,标记就会非常混乱。虽然弹性布局不是最终的解决方案,但是通过与 calc() (可以在CSS文件中作为一个属性值)相结合,我们能够创建一个更好的网格。在 这里 ,George Martsoukos列举了很多例子,比如拥有完美间距的画廊网格。通过使用CSS预编译语言,比如Sass, 组建一个创造性的网格系统 可以非常简单且易于维护。同时浏览器对 calc() 的支持几乎完美,因此 calc() 绝对是你应该掌握的一个功能。

有关于CSS的 calc() 函数相关的介绍可以点击这里。

7. 通过 calc() 对齐 position:fixed 元素

calc() 的另一个作用是用来对齐 position:fixed 的元素。比如,你有一个内容封装器,它左右都有流动的间距,你希望在这个内容封装器内精确对齐 position 为 fixed 的元素,但是这种情况下要计算出 left 和 right 属性的具体赋值就很困难。通过 calc() ,你可以结合相对和绝对的值来精确定位你的元素:

.wrapper { max-width: 1060px; margin: 0 auto;

}.floating-bubble { position: fixed; right: calc(50% - 530px); /* 50% - half your wrapper width */}

比如:

有关于这方面的详细介绍可以阅读 @brnnbrn 写的《 Aligning position:fixed Elements with CSS calc 》一文。

8.使用 cubic-bezier() 实现动画

为了使一个网站或者APP的用户界面更具有吸引力,你可使用一些动画,但是可以选择的过渡效果的速度曲线是相当有限的,比如, linear 或者 ease-in-out 。而标准的速度曲线连弹力运动的效果都实现不了。通过使用 cubic-bezier() 函数,你可以精确实现你想要的动画效果。

有两种方法使用 cubic-bezier() ——了解 背后的机制 后自己创建,或者是使用 cubic-bezier 生成器 。

说实话,我使用的是后者。

有关于 cubic-bezier() 详细的介绍可以点击这里。

总结

更加聪明的使用CSS函数不仅仅可以解决上面的问题比如创建一个更好的网格,它还可以给你更多的创作自由。随着浏览器支持越来越好,你可以使用CSS函数比如 calc() 来修改和提升一下你之前的CSS代码。

本文根据 @Anselm Urban 的 《8 Clever Tricks with CSS Functions》 所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: https://www.sitepoint.com/8-clever-tricks-with-css-functions 。

10个非常实用的CSS技巧

CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧。

当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。

我们可以使用伪元素来实现这种效果:

首字下沉,是否似曾相识呢?哦,是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果,其他文字围绕在它周围。

看上去还是这么回事。

通过锚点,我们可以滚动到网页特定的位置,原始的锚点跳转是没有过渡效果的。注意滚动条:

通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。

caret-color 属性可以让我们自定义 input 框闪烁的光标,是不是很神奇鸭

给透明背景图片加背景,感觉很厉害的样子。两行 CSS 样式九搞定咯:

我们可以修改滚动条的样式,滚动条变得更加炫酷。

如果你不想让用户选中页面上的文字,就可以用这个特性了。

很多情况下都需要应用到IE盒子模型的特性,让元素的宽度、高度包含border和padding。

10个非常实用的CSS技巧

CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧。

当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。

我们可以使用伪元素来实现这种效果:

首字下沉,是否似曾相识呢?哦,是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果,其他文字围绕在它周围。

看上去还是这么回事。

通过锚点,我们可以滚动到网页特定的位置,原始的锚点跳转是没有过渡效果的。注意滚动条:

通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。

caret-color 属性可以让我们自定义 input 框闪烁的光标,是不是很神奇鸭

给透明背景图片加背景,感觉很厉害的样子。两行 CSS 样式九搞定咯:

我们可以修改滚动条的样式,滚动条变得更加炫酷。

如果你不想让用户选中页面上的文字,就可以用这个特性了。

很多情况下都需要应用到IE盒子模型的特性,让元素的宽度、高度包含border和padding。

css常见技巧-雪碧图、背景、居中、透明度

CSS sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

作用:

作用:background-size设置 背景图像的大小尺寸 。

一、margin和width实现水平居中

优点: 实现方法简单易懂,浏览器兼容性强;

缺点: 扩展性差,只能针对已知宽度的div,无法自适应未知项情况。

)

二、inline-block实现水平居中方法

做点: 简单易懂,扩展性强;

缺点: 需要额外处理inline-block的浏览器兼容性。

1)、opacity作用于元素以及元素内的 所有内容的透明度 ,子元素会继承父元素的 opacity 属性。

2)、rgba()只作用于元素的颜色或其背景色,后代元素不会继承透明性,只是针对自己本身有效,无法使内部的所有元素透明。

我写CSS的常用套路(转载)

1、交错动画

有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟( delay )这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就是将延迟设为0.5秒),其他元素以此类推,这样它们就会错开来,形成一种独特的视觉效果。

这就是所谓的交错动画:通过设置不同的延迟时间,达到动画交错播放的效果。
本demo地址:https://codepen.io/alphardex/pen/XWWWBmQ

本demo地址:https://codepen.io/alphardex/full/KKwvKGY

一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话,就要给当前元素的延时各加上一个值,这个值就是中间元素的下标到当前元素的下标的距离(也就是下标之差的绝对值)与步长的乘积,即: delay + Math.abs(i - middle) * step ,其中中间元素的下标 middle = letters.filter(e => e !== "").length / 2

本demo地址:https://codepen.io/alphardex/full/eYYMYXJ

本demo地址:https://codepen.io/alphardex/full/dyPorwJ

HTML元素的状态是可以动态变化的。举个栗子,当你的鼠标悬浮到一个按钮上时,按钮就会变成“悬浮”状态,这时我们就可以利用伪类 :hover 来选中这一状态的按钮,并对其样式进行改变。 :hover 是笔者最最常用的一个伪类。还有一个很常用的伪类是 :nth-child ,用于选中元素的某一个子元素。其他的类似 :focus 、 :focus-within 等也有一定的使用。

本demo地址:https://codepen.io/alphardex/pen/pooYKVa

谁规定按钮只能有一套边框的?利用绝对定位和 padding ,我们可以给按钮做出3套大小不一的边框来,这样效果更炫了。

本demo地址:https://codepen.io/alphardex/full/ZEYXomW

简而言之,伪元素就是在原先的元素基础上插入额外的元素,而且这个元素不充当HTML的标签,这样就能保持HTML结构的整洁。我们知道每个元素都有 ::before 和 ::after 这两个伪元素,也就是说每个元素都提供了3个矩形(元素本身1个,伪元素2个)来供我们进行形状的绘制。现在又有了 clip-path 这个属性,几乎任意的形状都可以被绘制出来,全凭你的想象力上面的动图是条子划过文本的动画,条子就是每个文本所对应的伪元素,对每个文本和其伪元素应用动画,就能达到上图的效果了。

本demo地址:https://codepen.io/alphardex/pen/jOEOEzZ

元素可以有自定义的属性值,它的命名格式通常为 data-*``attr() 用于获取元素的这种自定义属性值,并赋值给其伪元素的 content 作为其生成的内容利用这个函数,我们可以用伪元素在原先文本的基础上“复制”出另一个文本,如下图所示。

本demo地址:https://codepen.io/alphardex/full/wvBeXjd

之前有做过闪光按钮的效果:鼠标悬浮按钮上时一道光从左到右划过去。笔者就用渐变来模拟那道光,通过 transform: translateX() 将其平移至右边。

但这样明显不对啊,这光为啥能被看见呢?不应该把它给“挡”起来吗?于是乎,给按钮加上 overflow: hidden ,光在按钮外的位置时就被隐藏起来了。

这就是障眼法的力量:)
本demo地址:https://codepen.io/alphardex/pen/eYYzXBZ
更多障眼法可以看看这个作品,一次性看个够XD

提示:这里最好将 input 作为 label 的子元素,这样用户点击 label 时就能传到 input 上默认的 input 太丑怎么办?那就把它先抹掉,用 appearance: none 或 opacity: 0 都可以然后,利用兄弟选择符 ~ 来定制和 input 相邻的所有元素( + 号也行,只不过只能选中最近的元素),例如可以用伪元素生成一个新的方框代替原先的 input ,利用伪类 :checked 和动画来表示它被勾选后的状态,本质上还是障眼法哦~

善用某些CSS特性,也可以为你的作品增色不少哦

此处包括 transition 和 transform CSS动画可以说是利用CSS设计炫酷特效的最强法器,它几乎贯穿了我的所有作品有人问我为什么我能想出这么多的动画?笔者阅番百部,对常用的动画技巧了如指掌,同样那些酷炫的网站只要细心观察,也会给笔者带来很多设计上的灵感。一言以蔽之:只有多欣赏动画,才能写出好的动画。

为盒子添加圆角,经常用来美化按钮等组件如果设定为 50% 则是圆形,也很常用

调整多个顶点的 border-radius 可以做出不规则的曲边形状

本demo地址:https://codepen.io/alphardex/full/abbWOPR

为盒子添加阴影,增加盒子的立体感,可以多层叠加,并且会使阴影更加丝滑

如果给 box-shadow 的扩张半径设定足够大的值,可以用它来遮住背景,而无需额外的div元素

注意到 box-shadow 还有个 inset ,用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色,做出一个新月形

本demo地址:https://codepen.io/alphardex/full/eYmGEGp

文本阴影,本质上和 box-shadow 相同,只不过是相对于文本而言,常用于文本发光,也可通过多层叠加来制作霓虹文本和伪3D文本等效果

本demo地址:https://codepen.io/alphardex/full/Exxodoq

本demo地址:https://codepen.io/alphardex/full/rNNwmZz

本demo地址: https://codepen.io/alphardex/full/QWWavvx

能将背景裁剪成文字的前景色,常用来和 color: transparent 配合生成渐变文本

本demo地址:https://codepen.io/alphardex/full/QWwveZG

渐变可以作为背景图片的一种,具有很强的色彩效果,甚至可以用来模拟光

这个作品用到了HTML的 dialog 标签,渐变背景,动画以及 overflow 障眼法,细心的你看出来了吗:)
本demo地址:https://codepen.io/alphardex/full/eYYxzBm

径向渐变常用于生成圆形背景,上面例子中Snow的背景就是一个椭圆形的径向渐变此外,由于背景可以叠加,我们可以叠加多个不同位置大小的径向渐变来生成圆点群,再加上动画就产生了一种微粒效果,无需多余的 div 元素。

本demo地址:https://codepen.io/alphardex/full/OJPvMGx

用一个伪元素叠在饼图上面,并将 content 设为某个值(这个值通过CSS变量计算出来),就能制作出度量计的效果,障眼法又一次完成了它的使命。

本demo地址:https://codepen.io/alphardex/full/BaydVvQ

PS里的滤镜,玩过的都懂, blur 最常用

本demo地址:https://codepen.io/alphardex/full/pooQMVp

PS里的混合模式,常用于文本在背景下的特殊效果以下利用滤色模式( screen )实现文本视频蒙版效果

本demo地址:https://codepen.io/alphardex/full/wvvLYpV

本demo地址:https://codepen.io/alphardex/full/ZEEBRrq

本demo地址:https://codepen.io/alphardex/full/ExaZgxp

虽然这并不是一个CSS特性,但是它经常用于完成那些CSS所做不到的事情那么何时用它呢?当CSS动画中有属性无法从CSS中获取时,自然就会使用到它了

目前CSS还尚未有获取鼠标位置的API,因此考虑用JS来进行通过查阅相关的DOM API,发现在监听鼠标事件的API中,可通过 e.clientX 和 e.clientY 来获得鼠标当前的位置既然能够获取鼠标的位置,那么跟踪鼠标的位置也就不是什么难事了:通过监听 mouseenter 和 mouseleave 事件,来获取鼠标出入一个元素时的位置,并用此坐标来当作鼠标的位移距离,监听 mousemove 事件,来获取鼠标在元素上移动时的位置,同样地用此坐标来当作鼠标的位移距离,这样一个跟踪鼠标的效果就实现了。

本demo地址:https://codepen.io/alphardex/full/OJPmQGz

CSS Houdini是CSS的底层API,它使我们能够通过这套接口来扩展CSS的功能

目前来说,我们无法直接给渐变添加动画,因为浏览器不理解要改变的值是什么类型这时,我们就可以利用 CSS.registerProperty() 来注册我们的自定义变量,并声明其语法类型( syntax )为颜色类型 <color> ,这样浏览器就能理解并对颜色应用插值方法来进行动画还记得上文提到的圆锥渐变 conic-gradient() 吗?既然它可以用来制作饼图,那么我们能不能让饼图动起来呢?答案是肯定的,定义三个变量: --color1 、 --color2 和 --pos ,其中 --pos 的语法类型为长度百分比 <length-percentage> ,将其从 0 变为 100% ,饼图就会顺时针旋转出现。

本demo地址:https://codepen.io/alphardex/full/RwNxpXQ

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单。
本demo地址:https://codepen.io/alphardex/full/ExavZdV

我写CSS的常用套路(转载)

1、交错动画

有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟( delay )这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就是将延迟设为0.5秒),其他元素以此类推,这样它们就会错开来,形成一种独特的视觉效果。

这就是所谓的交错动画:通过设置不同的延迟时间,达到动画交错播放的效果。
本demo地址:https://codepen.io/alphardex/pen/XWWWBmQ

本demo地址:https://codepen.io/alphardex/full/KKwvKGY

一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话,就要给当前元素的延时各加上一个值,这个值就是中间元素的下标到当前元素的下标的距离(也就是下标之差的绝对值)与步长的乘积,即: delay + Math.abs(i - middle) * step ,其中中间元素的下标 middle = letters.filter(e => e !== "").length / 2

本demo地址:https://codepen.io/alphardex/full/eYYMYXJ

本demo地址:https://codepen.io/alphardex/full/dyPorwJ

HTML元素的状态是可以动态变化的。举个栗子,当你的鼠标悬浮到一个按钮上时,按钮就会变成“悬浮”状态,这时我们就可以利用伪类 :hover 来选中这一状态的按钮,并对其样式进行改变。 :hover 是笔者最最常用的一个伪类。还有一个很常用的伪类是 :nth-child ,用于选中元素的某一个子元素。其他的类似 :focus 、 :focus-within 等也有一定的使用。

本demo地址:https://codepen.io/alphardex/pen/pooYKVa

谁规定按钮只能有一套边框的?利用绝对定位和 padding ,我们可以给按钮做出3套大小不一的边框来,这样效果更炫了。

本demo地址:https://codepen.io/alphardex/full/ZEYXomW

简而言之,伪元素就是在原先的元素基础上插入额外的元素,而且这个元素不充当HTML的标签,这样就能保持HTML结构的整洁。我们知道每个元素都有 ::before 和 ::after 这两个伪元素,也就是说每个元素都提供了3个矩形(元素本身1个,伪元素2个)来供我们进行形状的绘制。现在又有了 clip-path 这个属性,几乎任意的形状都可以被绘制出来,全凭你的想象力上面的动图是条子划过文本的动画,条子就是每个文本所对应的伪元素,对每个文本和其伪元素应用动画,就能达到上图的效果了。

本demo地址:https://codepen.io/alphardex/pen/jOEOEzZ

元素可以有自定义的属性值,它的命名格式通常为 data-*``attr() 用于获取元素的这种自定义属性值,并赋值给其伪元素的 content 作为其生成的内容利用这个函数,我们可以用伪元素在原先文本的基础上“复制”出另一个文本,如下图所示。

本demo地址:https://codepen.io/alphardex/full/wvBeXjd

之前有做过闪光按钮的效果:鼠标悬浮按钮上时一道光从左到右划过去。笔者就用渐变来模拟那道光,通过 transform: translateX() 将其平移至右边。

但这样明显不对啊,这光为啥能被看见呢?不应该把它给“挡”起来吗?于是乎,给按钮加上 overflow: hidden ,光在按钮外的位置时就被隐藏起来了。

这就是障眼法的力量:)
本demo地址:https://codepen.io/alphardex/pen/eYYzXBZ
更多障眼法可以看看这个作品,一次性看个够XD

提示:这里最好将 input 作为 label 的子元素,这样用户点击 label 时就能传到 input 上默认的 input 太丑怎么办?那就把它先抹掉,用 appearance: none 或 opacity: 0 都可以然后,利用兄弟选择符 ~ 来定制和 input 相邻的所有元素( + 号也行,只不过只能选中最近的元素),例如可以用伪元素生成一个新的方框代替原先的 input ,利用伪类 :checked 和动画来表示它被勾选后的状态,本质上还是障眼法哦~

善用某些CSS特性,也可以为你的作品增色不少哦

此处包括 transition 和 transform CSS动画可以说是利用CSS设计炫酷特效的最强法器,它几乎贯穿了我的所有作品有人问我为什么我能想出这么多的动画?笔者阅番百部,对常用的动画技巧了如指掌,同样那些酷炫的网站只要细心观察,也会给笔者带来很多设计上的灵感。一言以蔽之:只有多欣赏动画,才能写出好的动画。

为盒子添加圆角,经常用来美化按钮等组件如果设定为 50% 则是圆形,也很常用

调整多个顶点的 border-radius 可以做出不规则的曲边形状

本demo地址:https://codepen.io/alphardex/full/abbWOPR

为盒子添加阴影,增加盒子的立体感,可以多层叠加,并且会使阴影更加丝滑

如果给 box-shadow 的扩张半径设定足够大的值,可以用它来遮住背景,而无需额外的div元素

注意到 box-shadow 还有个 inset ,用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色,做出一个新月形

本demo地址:https://codepen.io/alphardex/full/eYmGEGp

文本阴影,本质上和 box-shadow 相同,只不过是相对于文本而言,常用于文本发光,也可通过多层叠加来制作霓虹文本和伪3D文本等效果

本demo地址:https://codepen.io/alphardex/full/Exxodoq

本demo地址:https://codepen.io/alphardex/full/rNNwmZz

本demo地址: https://codepen.io/alphardex/full/QWWavvx

能将背景裁剪成文字的前景色,常用来和 color: transparent 配合生成渐变文本

本demo地址:https://codepen.io/alphardex/full/QWwveZG

渐变可以作为背景图片的一种,具有很强的色彩效果,甚至可以用来模拟光

这个作品用到了HTML的 dialog 标签,渐变背景,动画以及 overflow 障眼法,细心的你看出来了吗:)
本demo地址:https://codepen.io/alphardex/full/eYYxzBm

径向渐变常用于生成圆形背景,上面例子中Snow的背景就是一个椭圆形的径向渐变此外,由于背景可以叠加,我们可以叠加多个不同位置大小的径向渐变来生成圆点群,再加上动画就产生了一种微粒效果,无需多余的 div 元素。

本demo地址:https://codepen.io/alphardex/full/OJPvMGx

用一个伪元素叠在饼图上面,并将 content 设为某个值(这个值通过CSS变量计算出来),就能制作出度量计的效果,障眼法又一次完成了它的使命。

本demo地址:https://codepen.io/alphardex/full/BaydVvQ

PS里的滤镜,玩过的都懂, blur 最常用

本demo地址:https://codepen.io/alphardex/full/pooQMVp

PS里的混合模式,常用于文本在背景下的特殊效果以下利用滤色模式( screen )实现文本视频蒙版效果

本demo地址:https://codepen.io/alphardex/full/wvvLYpV

本demo地址:https://codepen.io/alphardex/full/ZEEBRrq

本demo地址:https://codepen.io/alphardex/full/ExaZgxp

虽然这并不是一个CSS特性,但是它经常用于完成那些CSS所做不到的事情那么何时用它呢?当CSS动画中有属性无法从CSS中获取时,自然就会使用到它了

目前CSS还尚未有获取鼠标位置的API,因此考虑用JS来进行通过查阅相关的DOM API,发现在监听鼠标事件的API中,可通过 e.clientX 和 e.clientY 来获得鼠标当前的位置既然能够获取鼠标的位置,那么跟踪鼠标的位置也就不是什么难事了:通过监听 mouseenter 和 mouseleave 事件,来获取鼠标出入一个元素时的位置,并用此坐标来当作鼠标的位移距离,监听 mousemove 事件,来获取鼠标在元素上移动时的位置,同样地用此坐标来当作鼠标的位移距离,这样一个跟踪鼠标的效果就实现了。

本demo地址:https://codepen.io/alphardex/full/OJPmQGz

CSS Houdini是CSS的底层API,它使我们能够通过这套接口来扩展CSS的功能

目前来说,我们无法直接给渐变添加动画,因为浏览器不理解要改变的值是什么类型这时,我们就可以利用 CSS.registerProperty() 来注册我们的自定义变量,并声明其语法类型( syntax )为颜色类型 <color> ,这样浏览器就能理解并对颜色应用插值方法来进行动画还记得上文提到的圆锥渐变 conic-gradient() 吗?既然它可以用来制作饼图,那么我们能不能让饼图动起来呢?答案是肯定的,定义三个变量: --color1 、 --color2 和 --pos ,其中 --pos 的语法类型为长度百分比 <length-percentage> ,将其从 0 变为 100% ,饼图就会顺时针旋转出现。

本demo地址:https://codepen.io/alphardex/full/RwNxpXQ

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单。
本demo地址:https://codepen.io/alphardex/full/ExavZdV

此内容不能显示在一个框架中怎么办

1. 框架与网页的关系

在网页制作中,前端开发人员通常会使用框架来使网页更加美观,同时也更加实用。但是,当我们将网页放入一个包含其他元素的框架中时,会出现一些问题。这些问题可能包括样式的变化、页面内容的缺失以及其他各种不可预知的问题。

2. 常见问题及解决方案

问题1:样式的变化

当网页放入一个框架中时,其样式可能会发生变化。这是由于框架中可能会存在其他的CSS文件,从而导致原有的CSS文件失去效力。解决方案:可以通过在样式文件中指定CSS样式的优先级来解决这个问题。同时,也可以在框架中引入原有的CSS文件,以确保网页的样式不发生变化。

问题2:页面内容的缺失

框架中可能会存在一些,从而导致网页的某些内容无法正常显示。比如,如果一个网页使用了非标准的HTML标记,而框架又不支持这些标记,那么该网页的部分内容就会被遗漏。解决方案:在网页制作过程中,应该尽量遵循标准的HTML规范,以确保网页内容的兼容性。同时,在使用框架时,也要考虑到框架的,以避免出现页面内容的缺失。

3. 避免使用框架的方法

为了避免框架带来的各种问题,我们可以使用一些避免使用框架的方法:

- CSS技巧:使用CSS3的flexbox布局或者grid布局,使网页自适应各种终端,不必使用框架。

- 模块化开发:把网页拆分成小的结构模块,然后通过javascript或者jquery来动态组装成页面的效果,从而避免使用框架。

4. 总结

虽然框架可以使网页的开发更加快捷和便捷,但是同时也会带来一些问题。在网页开发过程中,我们应该尽量遵循标准的HTML规范,以确保网页的兼容性。同时,在使用框架时,也要考虑到框架的,以避免出现页面内容的缺失。除此之外,我们还可以通过CSS技巧以及模块化开发的方法来避免使用框架,从而使网页的开发更加稳定和高效。

建站小技巧,利用css进行首行缩进2个字符设置

css设置首行缩进2个字符的方法:可以利用text-indent属性来设置首行缩进2个字符,如【text-indent:2em;】。text-index属性用于规定文本块中首行文本的缩进,em是相对单位。

相关属性:

text-indent属性规定文本块中首行文本的缩进。

(视频教程推荐:css视频教程)

属性值:

length定义固定的缩进。默认值:0。

%定义基于父元素宽度的百分比的缩进。

inherit规定应该从父元素继承text-indent属性的值。

实现代码:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>首行缩进</title>

<style>

.demo{

width:550px;

height:200px;

margin:50pxauto;

}

p{

text-indent:2em;/*em是相对单位,2em即现在一个字大小的两倍*/

}

}

</style>

</head>

<body>

<divclass="demo">

<p>

这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。

这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。

这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。

</p>

</div>

</body>

</html>

建站css

热乐宠物网还为您提供以下相关内容希望对您有帮助:

我写CSS的常用套路(转载)

那就把它先抹掉,用 appearance: none 或 opacity: 0 都可以然后,利用兄弟选择符 ~ 来定制和 input 相邻的所有元素( + 号也行,只不过只能选中最近的元素),例如可以用伪元素生成一个新的方框代替原先的 input ,利用伪类 :checked 和动画来表示它被勾选后的状态,本质上还是障眼法哦~ 善用某些CSS特性,也可以为...

几个好用的css函数小技巧

1.纯CSS Tooltip许多网站还是在使用JavaScript来创建Tooltip效果,但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性,比如 data-tooltip="?" 。然后你就可以在你的CSS文件中添加以下的代码通过 attr() 函数来显示提示文字:.tooltip::after { content: attr(da...

想成为网页设计高手?先了解这些关键技能!

网页前端基础PS、DIV、CSS、JS、HTML,这些是你成为网页前端高手的基石!动态网页开发想制作动态网页?进一步学习ASP、PHP、SQL等技能,让你的网页更加生动!成为网页设计领域的佼佼者快来学习这些技能,成为网页设计领域的佼佼者吧!记得分享给更多的小伙伴哦! 抢首赞 评论 分享 举报 ...

css常见技巧-雪碧图、背景、居中、透明度

CSS sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。 作用:作用:background-size设置 背景图像的大小尺寸 。一、margin和width实现水平居中 优点: 实现方法...

建站小技巧,利用css进行首行缩进2个字符设置

css设置首行缩进2个字符的方法:可以利用text-indent属性来设置首行缩进2个字符,如【text-indent:2em;】。text-index属性用于规定文本块中首行文本的缩进,em是相对单位。相关属性:text-indent属性规定文本块中首行文本的缩进。(视频教程推荐:css视频教程)属性值:length定义固定的缩进。默认值:0。定义...

此内容不能显示在一个框架中怎么办

- CSS技巧:使用CSS3的flexbox布局或者grid布局,使网页自适应各种终端,不必使用框架。- 模块化开发:把网页拆分成小的结构模块,然后通过javascript或者jquery来动态组装成页面的效果,从而避免使用框架。4. 总结 虽然框架可以使网页的开发更加快捷和便捷,但是同时也会带来一些问题。在网页开发过程中,我们...

可以使用的css规则一般都有哪些,以及这些规则都具有哪些方面的作用.北 ...

建议放在一个html注释中,&lt;!––&gt;浏览器会不显示注释内的内容,而import等css代码能正常工作4.内联样式选择器是css的一个基本概念,基本规则如下:1.规则结构:h1 {color:red;}选择器 {属性:值;}这类是元素选择器,基本可以包括所有html的元素属性值可以包括多个元素,如:border:1px solid red;常用语法1)分组:选择...

网页设计与前端开发培训课程

学习H5高级功能、CSS3动画详解、webAPP开发、微信公众号开发、微信小程序开发、Vue.js实战运用等。高级框架与后台交互学习Angular.js、React.js、PHP入门、DedeCMS等综合应用。就业指导学习心态与服务、商务礼仪、毕业设计、行业分析、面试技巧、实习工作等。认证证书学习完成后可获得《网页设计师》《Web前端...

学习微信小程序开发需要具备哪些基础知识?

学习微信小程序开发需要具备以下基础知识:HTML/CSS:微信小程序使用类似HTML和CSS的语法结构来构建界面,因此了解HTML和CSS的基本概念和语法是必要的。JavaScript:微信小程序的逻辑部分主要由JavaScript编写。熟悉JavaScript语言的基础知识和常用的编程概念,如变量、函数、条件语句和循环等,对学习和理解小程序...

Top