CSS 优惠券在线生成工具

简介: CSS 优惠券在线生成工具

之前发过一篇文章CSS实现优惠券的技巧,主要介绍了几种绘制优惠券的方法,尽管实现已经非常完美、非常灵活,不过还是有很多同学表示


"太巧妙了,不过我还是选择切图🤣”


为此,专门制作了这样一个在线 CSS 生成工具Coupon.io (codelabo.cn)

image.png

功能设计


首先最上面是几种优惠券的类型,从图标应该能大概看出具体的样式


image.png

每一种类型对应的自定义选项稍有不同,拿第一种类型举例来说


  1. Radius表示设置凹角的大小
  2. Direction表示设置凹角的方向,可选择水平和垂直
  3. Position表示设置凹角的相对位置,在水平情况下,可选择居上、居中、居下,在垂直情况下,可选择居左、居中、居右
  4. Offset表示表示设置凹角的偏移,这个偏移是相对于上面设置的相对位置来定的,在居中的情况下不可设置


image.png

调整完成后,点击复制按钮就可以复制在剪贴板上了(🎉 Copied to clipboard!)~

代码是自适应的,所以无需关注容器尺寸,兼容 Chrome 、Firefox、Safari 以及移动端


其实也不必看上面的说明, 动动手指,随便点一下、拖一下大概就能明白什么意思了。


实战演示


现在就实际演示一下,比如这样一个布局


image.png

首先实现基本布局

<section class="card">
    <div class="card-left">350书券</div>
    <div class="card-right">
        <p class="card-info">满30元送350书券</p>
        <strong class="card-time">仅剩 04:48:49</strong>
    </div>
</section>


可以看出,左边是固定尺寸,右边是自适应的,这里可以采用 flex 布局

.card{
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
}
.card-left{
  width: 88px;
  text-align: center;
  font-size: 24px;
  color: #F22424
}
.card-left span{
  font-size: 10px;
}
.card-right{
  padding: 16px 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.card-info{
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: rgba(33, 32, 44, 0.9);
}
.card-time{
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  color: #F22424;
  margin-top: 4px;
}


得到的效果如下


image.png

现在就通过在线工具添加凹角效果吧


因为有分割线效果,可以选择第二个类型,一番调试后,可以得到如下


image.png

现在复制生成的 CSS,直接添加在外层容器上

.card{
  /*其他样式*/
  -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
  -webkit-mask-size: 100%, 2px 4px;
  -webkit-mask-repeat: repeat, repeat-y;
  -webkit-mask-position: 0 -4px, 87px;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}


得到效果如下


image.png

线上可访问 codepen coupon demo点击预览 查看


其他特性


该站点是一个PWA,如果使用 Chrome 或者 Edge 打开,可以选择“安装应用”


image.png

这样就可以像一个应用程序一样打开了,可离线使用~


image.png

其他说明


工具终究只是工具,不可能满足所有实际情况,在不满足的情况下,建议好好阅读这篇CSS实现优惠券的技巧,相信会有更多的体会


最后,有相关问题或意见,可以去XboxYan/coupon: 🎫 Generate Coupon-UI CSS code (github.com)issue,如果觉得不错的话,欢迎点赞、收藏、转发~❤️❤️❤️


祝大家使用愉快,enjoy~
相关文章
|
JSON JavaScript 前端开发
jQuery$工具方法和CSS的属性经及方法
jQuery$工具方法和CSS的属性经及方法
67 0
|
6月前
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
211 3
|
6月前
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
69 1
|
6月前
|
存储 移动开发 前端开发
【专栏:工具与技巧篇】高效的 HTML 与 CSS 编写技巧
【4月更文挑战第30天】本文探讨了提高HTML和CSS编写效率的技巧,包括使用语义化标签、精简代码、利用HTML5新特性;使用CSS预处理器、模块化设计、优化选择器及媒体查询;协同技巧如一致的类名规划和理解盒模型;选择高效工具如Visual Studio Code和代码格式化工具;以及性能优化方法如代码压缩、减少HTTP请求和图片优化。通过案例分析,展示如何在实践中应用这些技巧,以创建结构良好、样式优美且性能卓越的网站。
90 1
|
6月前
|
前端开发 JavaScript API
【热门话题】PostCSS:现代前端开发中的CSS增强工具
**PostCSS** 是一个JavaScript库,用于转换CSS,通过插件系统解析、优化代码,确保兼容性和效率。它提供插件化架构、向后/向前兼容性、代码质量提升和与其他工具链集成。PostCSS工作原理包括解析CSS成抽象语法树,插件遍历并转换AST,最后生成增强版CSS。主要功能包括Autoprefixer(自动添加浏览器前缀)、CSS变量、CSS Modules、Linting、预处理器支持等。在实际项目中,PostCSS可通过配置文件集成到Webpack等构建工具中,持续优化工作流,助力现代前端开发。
67 3
|
6月前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
52 2
|
6月前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
124 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
|
数据采集 前端开发 JavaScript
HTML + CSS + JS 利用邮编查询 API 实现邮编查询工具
邮政编码是地址信息的重要组成部分,可以帮助快递公司、物流公司等对地址进行快速、准确的识别和派送。因此,邮编查询工具应用在许多业务场景中都有广泛的应用,例如:电商平台、物流公司、金融机构等。通过使用邮编查询 API,我们可以快速实现一个邮编查询工具应用,方便用户查询地址对应的邮政编码,提高业务流程的效率。
380 0
|
11月前
|
前端开发 JavaScript
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
81 0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
|
12月前
|
前端开发
CSS实现鼠标放上去显示提示工具
CSS实现鼠标放上去显示提示工具
77 0