10 个不错的 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";
是
的 Unicode
转义。
你可以通过宽高属性来调整图标的尺寸,以更好适应按钮样式。
代码片段
最重要的一点,这些 CSS
技巧凸显了不使用 JavaScript
来实现功能的潜力。你可以使用上面这些小技巧,应用在你的设计上。事实上,很多这样的例子可以混合使用,以创作自由风格的设计。
当然,这还需要更大的进步空间。我不建议单纯的这些小技巧就低估了框架和库的使用。。
但是,不需要写冗长的 JavaScript
函数,通过 CSS
来实现设计的效果正走在路上。
原文:10 Useful CSS Tricks for Front-end Developers[2]
【完】✅
关于本文
作者:Jimmy
https://juejin.cn/post/7089997204252786702
10 个不错的 CSS 小技巧相关推荐
- css 自动换行_前端必备!20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中 将一段文字置于容器的水平中点 ...
- 日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
- 12个你可能不知道的CSS小技巧
本文整理出12个开发中你有可能没有用到过的CSS小技巧,一起来看看吧~ 1. 自定义光标(cursor) 首先来看一下CSS的内置光标样式.平时开发中用到的基本上就是default.pointer.n ...
- css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能 确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时 就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
- 盘点 10 个代码重构的小技巧
本次我们抛开 JAVA 虚拟机源码这些相对底层的东西,LZ 来与各位探讨一下几个代码重构的小技巧,这些内容部分来自于书籍当中,部分来自于 LZ 维护项目当中的一些实践经验.如果猿友们曾经用过这种手法, ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
- 建议收藏!这10个学习编程的小技巧,万人点赞!
随着互联网日趋迅猛,编程已经在我们生活当中无处不在了. 众所周知,程序员的工资都很不错,于是越来越多的人,都想加入到开发的行业中来. 那么,开发到底难不难学? 其实,每一门程序语言都是一个微型的完整的 ...
- CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
文章目录 前言 普通渐变 条纹 条纹重复 虚线 斜向条纹 三角形 进度条动画 progress 网格 圆点阵列 波点图案 前言 本文主要介绍linear-gradient的使用方法,既有普通的用法,也 ...
- MAC使用小技巧之用好mac电脑?的10个必知的小技巧!
很多朋友是不是都有这样的困惑,刚接手Mac电脑,无论是笔记本亦或是台式机,很是不方便,因为windows系统那种习惯已经先入为主了,今天就给大家普及一些小技巧. 当你看到这篇文章,不管你有没有mac电 ...
最新文章
- python set 排序_python set 排序_如何在Python中使用sorted()和sort()
- linux curl 命令 http请求、下载文件、ftp上传下载
- mysql数据库元表_mysql中元数据库information_schema学习之TABLES表
- SQL Calendar Table
- 又一起.NET程序挂死, 用 Windbg 抽丝剥茧式的真实案例分析
- php判断子字符串位置,PHP怎样查询子字符串位置
- webrtc 渲染_webRTC 中 timing 信息的使用
- Burpsuite中protobuf数据流的解析
- webstorage html5,HTML5-WebStorageAPIs的简述
- FR按钮调用数据库(MMSQL)存储过程,参数储存有返回值; 模板参数不可见 编辑后可见
- 新系统基础优化--Centos6.6
- 局域网上传文件_3分钟内Windows网盘搭建并实现局域网文件共享
- y7000 安装linux双系统,联想拯救者Y7000安装双系统:win10 + ubuntu16.04 (GTX1060显卡)...
- Lumerical官方案例、FDTD时域有限差分法仿真学习(一)——闪耀光栅(Blazed grating)
- python遍历字母_如何遍历字母表?
- react native 动画组件(Animated)浅析
- 年底裁员潮,这个冬天你怎样度过?
- 在matlab上利用fft进行信号频谱分析_使用示波器进行信号频谱分析(FFT)的设置教学...
- python涨跌柱表行业市盈率
- centos7 离线升级/在线升级操作系统内核
热门文章
- php 防止注册机,如何防止网站被注册机轰炸
- 计算几何学 | 逆时针方向 | Counter-Clockwise | C/C++实现
- 快速集成推送通知功能---百度云推送
- 随笔一计:微信h5支付商家存在未配置的参数xxx
- WIN7 X64下成功安装HP LASERJET 3015网络打印机驱动
- Eclipse配置SSM框架(非maven模式)
- StratifiedKFold(分类)和Kfold(回归)的区别
- Maven编译Scala报错StackOverflowError
- 连接远程mysql数据库命令_如何用命令连接远程mysql数据库
- jsp的forword标签