6个仅用 CSS 就能实现的有趣的功能
英文 | https://javascript.plainenglish.io/6-fun-things-you-can-do-with-css-1acabc8bf072
翻译 | 杨小爱
不管你喜欢还是讨厌CSS(层叠样式表),但它都是我们用来设计 HTML 元素样式的语言。
虽然,有一些很棒的预处理器,比如 SCSS(最终被编译成 CSS)并提供比普通 CSS 更多的功能,但这并不意味着你不能只使用普通的标准 CSS 来做惊人的事情。
CSS 有 520 个不同的属性,虽然您可能不需要全部了解,您可能只了解 30 或 50 个以上的属性,但探索不常见的 CSS 属性,肯定可以帮助您实现更多功能。
以下是仅使用 CSS 即可完成的 6 件令人惊奇的事情:
1、创建肖像和添加效果
CSS 允许您轻松地为照片添加一些引人注目的过滤器和效果,甚至无需接触 JavaScript。
上面的效果只是通过使用 CSS 的 background-clip 属性创建的。
p{background-size: 70vh;background-position: center;line-height: 16px;background: url("photo.png");-webkit-background-clip: text;background-attachment: fixed;background-clip:text;background-repeat: no-repeat;-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
body {background: black;overflow: hidden;
}
虽然我的 p 标签包含一些文本。
您还可以使用 mix-blend-mode 来确定内容,应如何与元素的父元素的内容和元素的背景混合。
2、 根据视口线性缩放文本
使您的网站响应视口中的更改可能是一个繁琐的过程,通常涉及重写部分 CSS 并测试多个断点。
但它不必总是那么复杂和令人厌烦。
仅使用一行 CSS,您就可以随着视口的增加或减少而在最小和最大大小之间缩放文本。
这是通过clamp 属性完成的。
clamp(minimum, preferred, maximum);
这些值是不言自明的。clamp属性返回一个介于最小值和最大值之间的值。中间的参数,即“首选”是视口的百分比。
让我们在实践中看到这一点。
width: clamp(500px, 50%, 1500px);
当视口宽度为 1600 像素时,首选值为 1600 像素的 50%,即 800 像素。当视口为 700px 时,首选应该是 700 的 50%,即 350px。
但是因为最小值是 500px,所以它会返回 500px。相同的逻辑适用于 1500px 的最大值。
您也可以从上面提供的媒体中看到。最小值为 450 像素,因此当视口小于 900 像素时您看不到任何变化。
3、简单的Photoshop
CSS 提供了各种属性来编辑和应用图像效果。上面讨论了其中一些属性,例如 mix-blend-mode 。
CSS 提供了各种属性来操作图像。他们之中有一些是:
亮度:滤镜:亮度(90%)
模糊:过滤器:模糊(9px)
饱和度:过滤器:饱和度(4)
不透明度:过滤器:oapcity(0.3)
色调:滤镜:色调旋转(45度)
投影:过滤器:投影(30px 10px 4px #4444dd)
下图应用了模糊滤镜。
img{filter: blur(2px);
}
4、全屏
如果您曾经创建过博客站点或任何涉及显示图像的站点,那么,您必须提供一些功能来使图像全屏显示。
即使是在 Medium 也能做到,当你点击一张图片时,它会放大。
虽然,您需要 JavaScript 来使元素全屏显示,但通过使用 requestFullscreen() 方法,有一个 CSS 伪类 :fullscreen 允许您在元素处于全屏模式时为其设置样式。
:fullscreen {background-color: yellow;
}
您可以轻松应用过滤器或更改背景(因为全屏显示的元素会保留其纵横比,而留下白色背景)。
5、饼图
您可以仅使用 CSS 轻松创建饼图,只需两行 CSS。
使用 conic-gradient() CSS 函数,您可以创建由渐变组成的图像,颜色过渡围绕中心点旋转。
在我看来,此功能最实用的用例是创建饼图。
background: conic-gradient(red 20%, purple 0 60%, yellow 0);
border-radius: 50%
上面的代码将呈现以下内容:
conic-gradient() 函数的结果是 <gradient> 数据类型的对象。
如果你要查找浏览器兼容性,请点击:https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()#browser_compatibility
6、渐变文字
正确使用渐变可以为您的网站提供新鲜感。
您可能已经知道如何使用渐变。如果没有,您始终可以使用 Grabient 之类的网站,它可以让您自定义渐变并为其提供 CSS。
但是,您知道您也可以轻松地将渐变应用于文本吗?
.text {background: linear-gradient(to right, red 0%, purple 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font: {size: 10vw;};
}
仅此而已,您就可以获得很棒的渐变文本。
结论
HTML 和 CSS 是 Web 开发的基本构建块,您无法仅使用这两种技术构建一些出色的网站,虽然您需要 JavaScript 来实现功能,但仅 HTML 和 CSS 就可以帮助您使用最少的 JavaScript(用于转换潜在客户)构建漂亮的营销和登陆网站。
我见过很多自由职业者只掌握 CSS 和 HTML 技能来实现副业赚钱的。如果您想更多的开启自己的自由独立开发者,那您应该更加深刻的学习前端相关技能。
最后,感谢您的阅读,我希望您喜欢这篇文章,也希望您可以与您的朋友一起来分享它,可能对他也会有所帮助。有什么问题,请在留言区给我留言。
如果您喜欢的话,记得点赞我,关注我。
学习更多技能
请点击下方公众号
6个仅用 CSS 就能实现的有趣的功能相关推荐
- css绘制正方体_设计师仅使用CSS绘制了8个标志性X战警
css绘制正方体 Here are three links worth your time: 这是三个值得您花费时间的链接: A designer drew 8 iconic X-Men using ...
- 上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
- html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...
- CSS骚操作之表单验证功能的实现代码
CSS骚操作之表单验证功能的实现代码 效果图如下: 原理: 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号.邮箱.身份证-):valid伪类,可以匹配通 过pattern验证的元 ...
- 使用HTML+CSS+JS模拟比赛晋级的动画功能
使用HTML+CSS+JS模拟比赛晋级的动画功能 1.需求描述 2.代码实现 3.效果演示 系统:Win10 Chrome:106.0.5249.119 演示视频:[英雄联盟]S12全球总决赛冠军预测 ...
- html中加入好看的行号,仅使用CSS在pre上创建行号
小编典典 为什么计数器不增加? 您不是在父标记级别重置或创建计数器.如果pre将以下行添加到选择器,代码将正常工作.如果您没有counter- reset在父级创建计数器(使用),则每个元素都会创建自 ...
- 如何仅通过CSS实现多行文本超长自动省略号
在CSS中,我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾: overflow: hidden; word-break: normal; text-overflow: elli ...
- 仅使用CSS提高页面渲染速度
用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅.如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用.作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验 ...
- HTML中让整个效果居中,仅使用CSS做到完全居中的超级攻略
我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中--直到现在.但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式, ...
最新文章
- Hadoop HDFS copyMergeFromLocal
- Netscape Mozilla源代码指南
- python教程:有参装饰器
- [Go] golang的MPG调度模型
- phpstudy如何安装景安ssl证书 window下apache服务器网站https访问
- SQL查询优化《三》:少做重复的工作
- 【发布】JEECG-P3 新主题后台风格(H5扁平化)
- Springboot2Web原生组件注入
- Java 中使用JDBC连接数据库例程与注意事项
- ant 日期组件中文_Vue3开源组件库,今天“它们”来了
- CSS设置颜色的几种方式
- 第十一届蓝桥杯校园赛---原题+解析+答案
- 【Cortex-M0】11串口控制器
- Lattice系列内存时序
- Dapper使用技巧和基础CRUD
- 365抽奖软件 v6.1.7
- mybatis的xmly文件与必依赖
- hdoj--1495--非常可乐(搜索+隐式图)
- 解密:腾讯如何打造一款实时对战手游
- Java Number 类和方法