用纯CSS实现优惠券剪卡风格
在做商城类项目的时候,我们可能都会经历过“优惠券”这类需求,笔者在过往工作中,都是直接要求UI切图来实现,直到有一天产品告诉我一个奇思妙想:这个优惠券的宽度会随内容变化的!一下子让我陷入了人生的大思考,这样图片方式可不好整呐,因此萌生一个想法:能不能用纯css实现这些效果呢?
0. 内倒角
首先我们来看下css如何实现内倒角
.card {width: 200px;height: 100px;position: relative;background-image: radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px),radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px),radial-gradient(circle at 100px top, #fff, #fff 10px, transparent 11px),radial-gradient(circle at 100px bottom, #fff, #fff 10px, transparent 11px);background-color: red;
}
效果图:
其实最先想到的是画圆形,在这个例子当中,主要是利用了设置背景图的属性与radial-gradient渐变来实现,实际效果差不多,在形状上呢还是保持整体方形,相信大家也看出来副作用,首先这个添加的渐变需要和背景颜色同步,比如设置的倒角是白色,背景是灰色的,那就露馅啦。
使用圆形的可能情况 | 为倒角设置颜色的效果 |
---|---|
1. 实现虚线
上面实现了内倒角,接下来就要考虑虚线了,既然要纯css,能不能把虚线也给优雅地实现了呢,其实线性渐变就可以做到,一起来看看:
.line {width: 100%;height: 1px;background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);background-size: 12px 1px;background-repeat: repeat-x;
}
代码效果:
/* 稍微调整下size属性就能改变虚线宽度 */
background-size: 20px 1px;
2. 实现波浪框
同样是利用径向渐变,我们尝试下波浪框效果:
.card {background: red;width: 200px;height: 100px;position: relative;
}
.card:after {content: '';position: absolute;top: 0px;bottom: 0px;left: -5px;width: 10px;height: 100%;background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);background-size: 10px 10px;
}
3. 组合
通过以上例子,优惠券剪卡风格的效果已经呼之欲出了,我们只需要把这些效果组合起来,对颜色位置宽度等细节进行调整~
竖型优惠券例子效果:
.card1 {width: 120px;height: 150px;position: relative;background-image: radial-gradient(circle at left 90px, #fff, #fff 10px, transparent 10px),radial-gradient(circle at right 90px, #fff, #fff 10px, transparent 11px);background-color: red;border-radius: 4px;
}.card1 > .line {position: absolute;bottom: 60px;left: 14px;width: 96px;height: 1px;background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);background-size: 12px 1px;background-repeat: repeat-x;
}
究极组合,横型优惠券剪卡风格效果:
.card2 {width: 200px;height: 100px;position: relative;background-image: radial-gradient(circle at 130px top, #fff, #fff 10px, transparent 11px),radial-gradient(circle at 130px bottom, #fff, #fff 10px, transparent 11px);background-color: red;border-radius: 4px;
}.card2 > .line {position: absolute;top: 50px;right: 31px;width: 78px;height: 1px;background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);background-size: 12px 1px;background-repeat: repeat-x;transform:rotate(90deg);
}.card2:after {content: '';position: absolute;top: 0px;bottom: 0px;right: -5px;width: 10px;height: 100%;background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
/* 这里可以优化一下,变为半圆,right也可以设置为0了 */background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);background-size: 10px 14px;
}
是不是有那么点味道了呢,仅用径向渐变和线性渐变就能做出来效果,一想到UI小姐姐都不用切图给我,可以早早下班回去陪她男朋友了,我赶紧向她展示了成果,没想到小姐姐跟我说,你这没阴影不好看呀,这下子让我又一次陷入了人生的大思考。
回到工位上,我放弃了思考,颤抖的手胡乱地加了一个shadow,果然,露馅了啊!
但是我们要冷静,之前的思路是先画一个方形,然后放置圆形或半圆叠盖,所以最终还是会原形毕露,结果还是必须掏空那段半圆缺口啊,可css明显是做不到的
等等,这时候就需要逆转想法,不是先画一个方形再剔除半圆,而是一开始就不画半圆这个缺口,将整个不规则形状填充出来,也就不需要剔除半圆了,先来看看下面这段css以及它的效果:
width: 300px;height: 100px;background: radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;
按这个思路将上面的例子转为画上下两瓣方形,给透明径向渐变绘制的circle以外的区域填上颜色,而阴影部分就用filter来处理
.card2 {width: 200px;height: 100px;position: relative;background: radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;border-radius: 4px;filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));/* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); */
}
.card2 > .line {/* 没变化 */
}
最终效果如下,为了看清阴影故意加深了:
没办法,波浪框还是覆盖上去的半圆,所以设置不上贴合的阴影效果,但是基本的券卡形式总算是完美实现了。
第二天UI小姐姐跟我说,她改了设计图,叫我看看,我说停停,要不你还是切图给我吧。
以上就是文章的全部内容,希望对你有所帮助!如果觉得文章写的不错,可以点赞收藏,也欢迎关注,我会持续更新更多前端有用的知识与实用技巧,我是茶无味de一天,希望与你共同成长~
用纯CSS实现优惠券剪卡风格相关推荐
- 如何用纯 CSS 实现优惠券效果
背景 本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果 上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
- 纯 CSS 实现优惠券透明圆形镂空打孔效果
本文同步发布在:纯 CSS 实现优惠券透明圆形镂空打孔效果 我们在做商城类项目时,时常会有开发优惠券的需求,那么我们如何通过纯 CSS 来实现类似京东.淘宝的优惠券样式. 下面给大家分享一个纯 CSS ...
- 纯css实现优惠券效果
最近UI小姐姐休假了,优惠券缺了我几个切图,不好意思打扰人家,就寻思着,干脆用css直接手写吧. 这里记一下实现思路. 先来看看效果图: 看着还行叭. 主要是这几个地方的样式: 左上角书签: 优惠券票 ...
- 如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 ...
- 如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件...
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 纯CSS实现淘宝天猫优惠券效果
在实际的业务需求中,如果要求前端用纯css实现电商类优惠券的锯齿效果那么该如何去做呢?阅读完此文希望对您有所帮助! 1.效果截图: 2.上才(代)艺(码) <!DOCTYPE html> ...
- 清新风格按钮纯CSS效果
清新风格按钮纯CSS效果(供源码下载) 发表于 2012 年 2 月 15 日 CSS3的属性大家都十分熟悉,虽然ie不支持这些效果,但随着移动互联网的迅速发展,很多web应用都是由HTML5和CSS ...
- html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
最新文章
- 图像风格迁移_【论文解读】图像风格迁移中的Contextual Loss
- QT的QStack类的使用
- 未来ui设计的发展趋势_2025年的未来UI趋势?
- c++删除数组中重复元素_PG13中的功能—B树索引中的重复数据删除
- vue调用const_2020年Vue的这些面试题你会吗?
- JSP隐含变量和Spring中Model在EL表达式中的读取顺序
- 什么样的简历,面试官一看就知道多少水份!!!
- 华硕笔记本linux触摸板驱动,华硕笔记本触摸板驱动安装教程及打开方法
- 在 Android 中使用生物识别,kotlin开发思维
- c语言程序100例pdf,经典c程序100例源代码(全).pdf
- 高频消息中间件面试题解析
- 完美解决Excel复制后粘贴空白的问题
- 前端每日实战:50# 视频演示如何用纯 CSS 创作一个永动的牛顿摆
- 阿里云疯狂促销 公有云之战刚鸣枪
- flask中ajax的使用,jquery – 使用ajax时,Flask flash消息不再有效
- Facebook中国程序员之死:年仅38岁就跳楼轻生
- 【硬核】肝了一个月,Cisco网络工程师知识点总结
- 工厂如何实现无线wifi短信验证登录?工厂上网实名认证系统
- mca版Quiver快速入门
- 阶段总结:华清远见毕业总结