快看!10个不错的CSS实用小技巧(分享)
时间:2022-05-05 [网络编程]作者:fabuyuan 浏览:6 次
CSS
大约有两百个属性。很多属性都是相互关联的,理清楚每一个属性细节是不可能的。所以,本文分享一些有用的 CSS
小技巧,方便开发者和设计师参考。【推荐学习:css视频教程】
1、 打字效果
网页设计变得越来越有创意。在 CSS
动画的协调下,你的网页会像活的一样。在这个例子中,我们将使用 animation
和 @keyframes
属性去实现打字效果。
具体来说,在这个演示中,我们通过 steps()
属性来实现分割文本的效果。首先,你必须指定 step()
中传入的数量,在这个例子中就是文本的长度。
接着,第二步,我们使用 @keyframes
去声明什么时候开始执行动画。
如果你在文本
Typing effect for text
后面添加内容,而不改变step()
中的数字,将不会产生这种效果。
这种效果并不是特别新鲜。然而,很多开发者却使用 JavaScript
库去实现,而不是使用 CSS
。
2、透明图片阴影效果
你是否使用过 box-shadow
为透明的图片添加阴影,却让其看起来像添加了一个边框一样?然而解决方案是使用 drop-shadow
。
drop-shadow
的工作方式是,其遵循给给定图片的 Alpha
通道。因此阴影是基于图片的内部形状,而不是显示在图片外面。
3、自定义 Cursor
你不需要强迫你站点访问者使用独特的光标。至少,不是出于用户体验的目的。不过,关于 cursor
属性要说明的是,它可以让你展示图片,这相当于以照片的格式显示提示信息。
一些用户案例,包括比较两个不同的照片,你无需在视图窗口渲染这些照片。比如:cursor
属性可以用在你的设计中,节省空间。因为你可以在特定的 div
元素中锁定特定的光标,所以在此 div
这外可以无效。
目前尝试对图片的大小有限制,读者可以自行更改验证
4、使用 attr() 展示 tooltip
attr()
属性是我最近发现的,且是最得意的发现。我本打算为我的站点添加 tooltip
的功能,但是发现需要引入一个插件,这就引入了不必要的东西,让我的站点看起来臃肿。感谢的是,可以使用 attr()
来避免这种情况。
attr()
属性工作的方式很简单,我逐步解析一下:
- 我们使用
tooltip class
去标志哪个元素需要展示tooltip
信息。然后为该元素添加你喜欢的样式,这个方便演示,我们使用了dotted border-bottom
的样式。 - 接下来,我们创建一个
:before
伪元素,它将包含内容content
,指向特定的attr()
。这里指attr(tooltip-data)
。 - 接着,我们会创建一个
:hover
伪类,当用户鼠标移动道元素上时,它将设置opacity
为1
。
此外,你可以包含自定义的样式。这取决于你设定的 tooltp
的数据,你也许需要调整其宽度或者边距。一旦你设定了 tooptip-data arrt()
类,你可以在你设计的其他部分应用。
5、纯 CSS 实现核算清单
正如我开头所说的,CSS
正逐步成熟。这个动态清单的演示就是一个很好的例子。
我们使用 checkbox
输入类型,加上一个 :checked
伪类。当 :checked
返回 true
的情况时,我们使用 transform
属性更改状态。
你可以使用这种方法实现各种目标。比如,当用户点点击指定的复选框时候,切花到隐藏其内容。在输入 input
类型的单选和复选框使用,当然,这也可以应用到 <option>
和 <select>
元素。
6、使用 :is()
和 :where()
添加元素样式
现代 CSS
框架运行的一种方式是通过使用条件逻辑选择器。换言之,:is()
和 :where()
属性可以用于同时设置多种设计元素的样式。但是,更重要的是,你可以使用这些属性去查询你需单独处理的元素。
下面的 CSS
片段是一个小案例,你可以通过 MDN
学习更多关于 :is()
和 :where()
的内容。
7、使用关键帧实现手风琴下拉效果
JavaScript
库,比如 jQuery, Cash
等,即使你想使用一个简单的缩放功能,你都要整个引入。幸运的是,很多 CSS
技巧能够避免这种引入。比如下面的手风琴片段代码。
如果你认真看下当下 web
设计的趋势,你会发现在登陆页面就会发现手风琴这种设计效果。这是一种简缩内容的方式,以节省设计空间。常见问题解答,产品功能,使用提示等功能,都可以放在手风琴内实现。下面是纯 CSS
代码片段对其的实践。
8、侧边栏的 Hover 效果
有没有可以使用 CSS
就可以实现一个动态 Hover
效果的侧边栏呢?当然,这得多亏 transform
和 :hover
属性。
为了兼容性,我在多种移动端中进行测试,感觉还不错。虽然这种效果在桌面中使用比在移动端中使用顺畅。
在这个练习案例中,使用 position: sticky;
创建一个吸附的侧边栏,其工作的效果良好。
9、使用 first-letter 实现首字母大写
在 CSS
中,可以选择确定的 first-of-type
元素。在这个例子中,我们使用 ::first-letter
伪类去实现首字母大写的效果。这个类可以让我们更自由的添加样式。所以,你可以调整大写字母的样式以符合你的站点设计风格。
说到这个属性,你可以使用它干很多事。当特定元素在页面中第一次出现,我们可以使用 first-of-type
单独进行添加样式。但是,正如下面代码展示,尽管元素已经出现过,你依然可以使用在多个元素上。
10、使用 ::before 添加按钮的图标
每当我需要链接到外部其他资源的时候,我都会使用自定义的按钮来实现。准确来说,是一个添加图标的按钮。简单的谷歌搜索,你会发现很多 button generators
,但是我对可以随时使用的通用解决方案更感兴趣。
所以,为了实现这个目标,我为特定按钮创建了一个 :before
伪元素。需要声明的是,代码片段中的 content:"\0000a0";
是 &nbsp;
的 Unicode
转义。
你可以通过宽高属性来调整图标的尺寸,以更好适应按钮样式。
最重要的一点,这些 CSS
技巧凸显了不使用 JavaScript
来实现功能的潜力。你可以使用上面这些小技巧,应用在你的设计上。事实上,很多这样的例子可以混合使用,以创作自由风格的设计。
当然,这还需要更大的进步空间。我不建议单纯的这些小技巧就低估了框架和库的使用。。
但是,不需要写冗长的 JavaScript
函数,通过 CSS
来实现设计的效果正走在路上。
英文原文地址:https://stackdiary.com/useful-css-tricks/
本文为译文,采用意译。
【完】
(学习视频分享:web前端)
以上就是快看!10个不错的CSS实用小技巧(分享)的详细内容,更多请关注站长家园其它相关文章!
本文标签: cssCSS3
转载请注明来源:快看!10个不错的CSS实用小技巧(分享)
本文永久链接地址:https://www.adminjie.com/post/11950.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- 华为dubal20是什么型号
- 电脑显示信号线无连接是什么意思
- app是什么应用程序的简称
- ana an00华为是什么型号
- html5的标题标记一共有几个等级
- html5中onclick是什么意思
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- vivov1818a是什么手机型号
- 超清视效是什么意思

- 最新文章
-
-
完全掌握java之String类
本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于string类的相关问题,包括了字符串的常量池、字符串的不可变性等等相关内容,下面一起来看一下,希...
-
简单学习Python字符和列表(实例详解)
本篇文章给大家带来了关于python的相关知识,其中主要介绍了关于字符和列表的相关问题,包括了字符串的输入输出、列表循环遍历、列表的增删改查以及列表的嵌套等等内...
-
图文解析Redis线程模型
本篇文章给大家带来了关于Redis的相关知识,其中主要介绍了关于线程模型的相关问题,Redis它是一个单线程的,下面就一起来看一下,希望对大家有帮助。推荐学习:...
-
jquery怎么判断元素是否有子节点
方法:1、用children()获取元素下的所有子节点,语法“元素对象.children()”,会返回一个包含子节点的jQ对象;2、用length检测子节点个数...
-
jquery对象访问的方法有哪些
jquery对象访问的方法有:1、each(),可以遍历指定的jquery对象,语法“$.each(对象,回调函数)”;2、size(),可统计jquery对象...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-