【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标

效果如图↑

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background: #eeeff2;}/*左上角标签，父元素必须设置position: relative;overflow: hidden;height: 大于150;width: 大于150px;，同时，角标标签内加入属性superscript-title="左上角标签文字内容"*/.subscript:after {position: absolute;top: 15px;left: -45px;width: 150px;height: 30px;content: attr(superscript-title);text-align: center;font-size: 14px;color: white;line-height: 30px;font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial'; /*背景旋转角度渐变*/background: -webkit-linear-gradient(90deg, orange 0%, orangered 100%); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(90deg, orange 0%, orangered 100%); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(90deg, orange 0%, orangered 100%); /* Firefox 3.6 - 15 */background: linear-gradient(90deg, orange 0%, orangered 100%); /* 标准的语法（必须放在最后） *//*旋转角标*/-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}/*时下流行的风格--【新拟态】________________________*/.subscript {position: relative;overflow: hidden;font-family: 'Arial';margin: 100px;border-radius: 40px;width: 200px;height: 200px;box-shadow: 0 20px 55px rgba(0, 0, 0, 0.1), -10px -10px 15px rgba(255, 255, 255, 0.9);background: linear-gradient(-180deg, #eee, #f9f9f9);}/*渐变文字样式________________________*/.subscript p {margin: 0;padding: 0;line-height: 200px;font-size: 100px;text-align: center;color: #238aea;/*渐变文字（仅谷歌内核浏览器支持）*/background: -webkit-linear-gradient(0deg, #1858f1, #32c0e3);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style>
</head>
<body>
<div class="subscript" superscript-title="标签内容"><p>Aa</p>
</div>
</body>
</html>

【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标相关推荐

Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
一个div压在另一个div上面_【CSS小分享】用CSS画一个新拟态风格键盘
什么是新拟态新拟态的英文名称是"Neumorphism",也有人称为"Soft UI". 简单讲,新拟态是一种图形样式,其原理是通过模拟真实物体来为界面的UI ...
新拟态记账微信小程序网站H5，UI拟态记账
新拟态是一种图形样式,其原理是为界面的UI元素赋予真实感. 介绍: 1.前端使用uni-app框架进行搭建,支持vue3.vue2 使用拟态UI元素创作,页面布局flex 基本功能已经全部实现,后期 ...
UI素材模板|新拟态新趋势图标ICON
3D是一种界面风格.拟态是一种设计原理,其中界面元素模仿现实世界的对象. 经过无数次沉浮之后,拟态化已经以" 新拟态 "(Neumorphism)的名称重生. 细节,阴影和照明都可 ...
Neumorphism.io一个神奇的网站，满足各种圆角矩形ICON图表立体化效果要求，这种样式的名称——新拟态
关于"新拟态"的自定义解释在我的早起博客中,传送门https://blog.csdn.net/qq_37860634/article/details/107034976 访问htt ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法二）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...

【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标

【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标相关推荐

最新文章

热门文章