SS不规则卡片,纯CSS制作优惠券样式,CSSS实现锯齿样式
之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义 CSS 变量,自定义主题颜色。
布局 其实是学习前端的重要部分,最常用的方式就是从上而下、从左而右、亦或者两个相结合。
看上图,而这里,我们就只是最简单的布局方式,从上而下:
1、优惠券金额和过期时间
2、优惠券描述
3、按钮(其实按钮也可以放到“2”里面去)
这样分析,我们就有了 html 架构了
<div class="coupon">
<!-- 1、优惠券金额和过期时间 -->
<div class="price">
100元
<span>优惠券</span>
<p class="timeout">2020-12-31 18:18:18过期</p>
</div>
<!-- 2、优惠券描述 -->
<div class="describe">
<p>1、商城、美食可用</p>
<p>2、过期作废</p>
</div>
<!-- 3、按钮 -->
<div class="btns">
<button>立即使用</button>
</div>
</div>
CSS不规则卡片,纯CSS制作优惠券样式,CSSS实现锯齿样式
接下来我们用 CSS 美化我们的 html 。同理,我们也根据布局分步进行样式书写。
这里的核心就是上方的凹槽和下方的锯齿
.coupon{
background-color: #E0E0E0;
width: 200px;
/* css变量 */
--main-color: #EC407A;
--f-color: #444;
}
.price {
position: relative;
height: 120px;
background-image: radial-gradient(
circle at 100px -8px, #fff 20px, var(--main-color) 21px
);
color: #fff;
font-size: 20px;
text-align: center;
padding-top: 40px;
}
.price .timeout{
color: var(--f-color);
font-size: 14px;
margin-top: 25px;
}
.price span{
font-size: 14px;
}
CSS不规则卡片,纯CSS制作优惠券样式,CSSS实现锯齿样式
这里用到了 径向渐变,不清楚用法的小伙伴可以看看语法:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
注释:
(1)、shape 确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。
circle :指定圆形的径向渐变
(2)、size 定义渐变的大小,可能值:
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
(3)、position 定义渐变的位置。可能值:
center(默认):设置中间为径向渐变圆心的纵坐标值。
top:设置顶部为径向渐变圆心的纵坐标值。
bottom:设置底部为径向渐变圆心的纵坐标值。
(4)、start-color, ..., last-color 用于指定渐变的起止颜色。
这样价格上方的凹槽就有了,接下来下方的锯齿我们也可以用 径向渐变 的方式实现:
.price::after{
position: absolute;
content: '';
display: block;
bottom: 0px;
height: 10px;
width: 100%;
/* background-size: 11px 200px; */
background-image:
radial-gradient(
circle at 5px 10px,
#E0E0E0 6px,
var(--main-color) 7px);
}
伪类元素 ::after 设置径向渐变背景为一个圆,后进行平铺就形成了锯齿,调整位置。
CSS不规则卡片,纯CSS制作优惠券样式,CSSS实现锯齿样式
其实还有更简单的方法,可以直接用一个虚线边框即可搞定,请看:
.price::after{
position: absolute;
content: '';
display: block;
bottom: -5px;
width: 100%;
border-bottom: 10px dotted #E0E0E0;
}
CSS不规则卡片,纯CSS制作优惠券样式,CSSS实现锯齿样式
当然也有缺陷,间隔位置不好控制
2、优惠券描述与按钮 优惠券核心锯齿已经搞定了,下面都是小菜啦,非常简单咯
.describe{
color: #333;
padding: 10px;
font-size: 14px;
}
.btns {
/* 使其button可以居中 */
text-align: center;
}
.btns button{
/* 重置按钮样式 */
border: none;
box-shadow: none;
outline: none;
background-color: var(--main-color);
color: #fff;
width: 50%;
border-radius: 20px;
line-height: 30px;
margin: 40px 0 20px;
cursor: pointer;
}
CSS不规则卡片,纯CSS制作优惠券样式,CSSS实现锯齿样式
大家都看到了,我们上方代码主要颜色都采用的变量,而且变量是定义在 .coupon 类选择器里面的。这样的原因是:
1、CSS变量作用域(CSS变量只能作用于自身以及后代元素。兄弟元素,祖先元素都不能享用。)
2、方便主题使用
ok,我们就可以copy 多个 优惠券,并给每个添加一个不同的 class,比如下方的 theme1、theme2、theme3
<div class="coupon theme1">
...
</div>
<div class="coupon theme2">
...
</div>
<div class="coupon theme3">
...
</div>
<div class="coupon">
...
</div>
接下来我们就为不同主题定义不同的颜色变量
.coupon.theme1{
--main-color: #8E24AA;
--f-color: #fff;
}
.coupon.theme2{
--main-color: #039BE5;
--f-color: #fff;
}
.coupon.theme3{
--main-color: #26A69A;
--f-color: #fff;
}
这样,theme1主题下的优惠券,就是紫色主题,theme2主题下的优惠券,就是蓝色主题...,而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色(红色)。
今天你学到了吗?从布局分析到具体实现,再到主题颜色,相信小伙伴们都各有所得。
关注此头条号“互联网IT信息”——>私信发送 “天猫css” ,(注意:css全是小写)即可得到源代码的获取方式。
案例和由此案例重点讲解的知识点介绍
案例代码实现
css可见性知识点详解
此案例是页面,效果如下:
此页面的技术实现解析:
这种商品的卡片式展示效果,需要保证每个卡片的宽高一致,才能达到美观效果,所以,需要对不确定的文字进行可见性设置,确保无论多少,展示效果一致
此案例中主要用到了,基于此,我们会系统的将如下知识点全部讲解:
css可见性:display、overflow、visibility
第一步:编写此广告的卡片的html,分为图片、标题、价格三个部分
第二步:分别定义图片、标题、价格的样式,同时注意标题使用overflow,对超出的文字部分进行隐藏
可见性
三种可见性:
1:display:none 元素隐藏不占位置
2:overflow:hidden; 将超出部分的元素隐藏
3:visibility:hidden; 元素隐藏占位置
CSS实现弧形卡片的3种方式:打造优雅的现代网页设计
**导语:** 在网页设计中,弧形元素以其柔和而富有动态感的设计深受青睐,尤其在卡片设计上,弧形边缘能赋予其独特的视觉效果。本文将详细介绍利用CSS创建弧形卡片的3种不同方法,包括但不限于CSS border-radius、clip-path及mask属性,让您的网页更具吸引力。下面我们将通过实战代码演示每种方法的具体应用。
---
### **一、基础方法:border-radius 弧度控制**
**简介:**
`border-radius` 是最常见且兼容性最好的创建圆角或弧形卡片的方式,适用于创建简单弧形边角的卡片设计。
```html
<div class="card-rounded">
<!-- 卡片内容 -->
</div>
```
```css
.card-rounded {
background-color: #f5f5f5;
width: 200px;
height: 100px;
border-radius: 20px; /* 可根据需要调整数值 */
overflow: hidden;
}
```
上述代码将创建一个具有弧形边角的卡片。通过调整 `border-radius` 的值,您可以创建出不同程度的弧形效果,但请注意,这种方法无法创建非对称或复杂弧形。
---
### **二、进阶技巧:clip-path 实现自由形状**
**介绍:**
`clip-path` 属性允许我们创建任意形状的裁剪区域,从而实现更为复杂和定制化的弧形卡片设计。
```html
<div class="card-clip-path">
<!-- 卡片内容 -->
</div>
```
```css
.card-clip-path {
background-color: #f5f5f5;
width: 200px;
height: 100px;
-webkit-clip-path: circle(50% at right 50%);
clip-path: circle(50% at right 50%);
}
```
上述代码创建了一个右半部分呈弧形的卡片。`clip-path` 提供了更多创造性可能,可以创建椭圆、多边形甚至路径裁剪等多种弧形效果。然而需要注意的是,`clip-path` 的浏览器兼容性不如 `border-radius` 理想。
---
### **三、创新方案:CSS Masks 打造灵活曲线**
**原理:**
CSS Masks 可以通过 `mask-image` 或 `mask-shape` 属性为元素添加遮罩,同样可以用来创建弧形卡片效果。
```html
<div class="card-mask">
<!-- 卡片内容 -->
</div>
```
```css
.card-mask {
background-color: #f5f5f5;
width: 200px;
height: 100px;
-webkit-mask-image: radial-gradient(circle, transparent 50%, white 51%);
mask-image: radial-gradient(circle, transparent 50%, white 51%);
}
```
以上代码利用径向渐变作为遮罩,实现了卡片顶部弧形边缘的效果。CSS Masks 具有高度灵活性,可以用于创建更复杂的形状,但它的浏览器兼容性也相对有限。
---
### **结论与比较**
- **border-radius** 方法最为简单易用且兼容性最好,适合日常项目和快速原型设计;
- **clip-path** 提供了更丰富的形状裁剪能力,适合需要突破常规、追求独特视觉效果的场景;
- **CSS Masks** 能够创建基于图像或者渐变的复杂蒙版效果,适用范围较广,但需要注意旧版本浏览器的支持情况。
选择何种方式实现弧形卡片取决于项目的实际需求和兼容性要求。通过巧妙运用这些CSS特性,您可以轻松打造出别具一格的弧形卡片设计,增添网站的视觉吸引力。
---
**补充实践案例:**
对于一些高级应用场景,您还可以结合以上技术,比如使用CSS Grid布局和Flexbox进行容器布局,同时利用CSS变量和媒体查询适应不同屏幕尺寸,让弧形卡片设计更加灵活和响应式。
切记,在实际开发过程中,务必关注浏览器兼容性问题,必要时借助PostCSS、Autoprefixer等工具增强跨浏览器兼容性。同时,保持对新兴CSS特性的关注,与时俱进地更新您的设计与开发技术栈。
*请认真填写需求信息,我们会在24小时内与您取得联系。