Using radial gradient in CSS to achieve card effect

Using radial gradient in CSS to achieve card effect

A few days ago, a colleague received a points mall project, which included a function for exchanging cards and coupons for gifts. I thought about it for a while but couldn't come up with any good ideas, so I went back to work on my own project. But I thought that I might encounter similar needs in the future, so I studied and sorted out the implementation of several card and coupon effects over the weekend.

Common card styles are as follows:

Using pseudo-elements (Less version)

ticket.less

.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) {
  position: relative;
  box-sizing: border-box;
  padding: 0 @r;
  width: @width;
  height: @height;
  background-clip: content-box;
  background-color: @color;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: @r + 1px;
    height: 100%;
    background: radial-gradient(@r circle at left @top, transparent @r, @color @r + 1px);
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: block;
    //The @r + 1px here is to avoid gaps when zooming in or out of certain pages width: @r + 1px;
    height: 100%;
    //The @r + 1px here is to prevent aliasing background: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px);
  }
}

.parent {
  .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);
}
.child {
  line-height: 200px;
}

App.js

import React from 'react';
import './App.css';
import './ticket.less';

function App() {
    return (
        <div className="App" style={
            {
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: 600
            }
        }>
            <div className={'parent'}>
                <div className="child">666</div>
            </div>
        </div>
    );
}

export default App;

Upgraded Style 1 (Less version) 

.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {
  width: @width;
  height: @height;
  // @left - 1px is to avoid gaps when zooming in certain percentages // @r + 1px is to prevent jagged edges // 51% is to prevent a small blank area in the middle of an element background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat,
    radial-gradient(circle at right top, transparent @r, @r-color @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat,
    radial-gradient(circle at right bottom , transparent @r, @r-color @r + 1px ) -(@width - @left) bottom ~'/' 100% 51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) {
  width: @width;
  height: @height;
  // @left + 1px is to avoid gaps when zooming in// @r + 1px is to prevent jagged edges// 51% is to prevent a small blank area in the middle of an element background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) right top ~'/' (@width - @left) 51% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) right bottom ~'/' (@width - @left) 51% no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) left top ~'/' @left + 1px 51% no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) left bottom ~'/' @left + 1px 51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.parent {
  .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.child {
  line-height: 200px;
}

Upgraded Style 1 (Scss version)

@mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) {
  width: $width;
  height: $height;
  // $left - 1px is to avoid gaps when zooming in certain percentages // $r + 1px is to prevent jagged edges // 51% is to prevent a small blank area in the middle of an element background: radial-gradient(circle at left top, transparent $r, $l-color $r + 1px) $left - 1px top / 100% 51% no-repeat,
  radial-gradient(circle at left bottom, transparent $r, $l-color $r + 1px) $left - 1px bottom / 100% 51% no-repeat,
  radial-gradient(circle at right top, transparent $r, $r-color $r + 1px ) -($width - $left) top / 100% 51% no-repeat,
  radial-gradient(circle at right bottom , transparent $r, $r-color $r + 1px ) -($width - $left) bottom / 100% 51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.parent {
  @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);
}

.child {
  line-height: 200px;
}

Upgraded Style 2 (Less version) 

.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) {
  width: @width;
  height: @height;
  background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) {
  width: @width;
  height: @height;
  background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) left bottom ~'/' 51% (@height - @top) no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left top ~'/' 51% @top + 1px no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right bottom ~'/' 51% (@height - @top) no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) right top ~'/' 51% @top + 1px no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.parent {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.child {
  line-height: 200px;
}

Upgraded Style 3 (Less version) 

.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) {
  width: @width;
  height: @height;
  background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

  &::after {
    position: absolute;
    left: 0;
    right: 0;
    top: @top;
    margin: auto;
    content: '';
    width: calc(~"100%" - 2*@r - @border-offset);
    border-top: 1px dashed @border-color;
  }
}

.parent {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.child {
  line-height: 200px;
}

Upgraded Style 4 (Less version)

.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) {
  width: @width;
  height: @height;
  // @left - 1px is to avoid gaps when zooming in certain percentages // @r + 1px is to prevent jagged edges // 51% is to prevent a small blank area in the middle of an element background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat,
    radial-gradient(circle at right top, transparent @r, @r-color @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat,
    radial-gradient(circle at right bottom , transparent @r, @r-color @r + 1px ) -(@width - @left) bottom ~'/' 100% 51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: -@sm-r;
    width: @sm-r;
    height: 100%;
    background-image: radial-gradient(circle at @sm-r, transparent @sm-r, @r-color @sm-r + 1px);
    //background-size: @sm-r;
    background-size: @sm-r @sm-offset;
  }
}

.parent {
  .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);
}

.child {
  line-height: 200px;
}

Precautions

// ticket.less

//background: radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 55% no-repeat;
// Break down the above line of code into the following:
//background-image: radial-gradient(circle at top right, transparent @r, @lcolor 0);
//background-position:-(@width - @left) top;
//background-size:100% 55% ;
//background-repeat: no-repeat;

/*Note: There is a 50px transparent area here first, and then the second area is set to 0, which can be understood as resetting the style range from here*/
/*background: radial-gradient(circle at top right, transparent 50px, red 0, #66a8ff 50%);*/

/*In Chrome, if the color between two areas transitions directly with 0 deviation, there will be serious aliasing*/
/*background: radial-gradient(10px at left,transparent 50%,#F6327C 50%);*/
/*background: radial-gradient(10px at left,transparent 50%,#F6327C 55%);*/

/*Add shadow effect*/
/*filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));*/

/*Multiple radial gradients accumulated*/
/*background: 
radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
radial-gradient(30px circle, red, red 29px, transparent 30px);*/

Summarize

This is the end of this article about using radial gradient in CSS to achieve card and coupon effects. For more relevant CSS radial gradient to achieve card and coupon effects, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Mobile Internet Era: Responsive Web Design Has Become a General Trend

>>:  Detailed process record of nginx installation and configuration

Recommend

MySQL multi-table join query example explanation

In actual projects, there are relationships betwe...

Ubuntu basic settings: installation and use of openssh-server

Record the installation and use of openssh-server...

Detailed tutorial on deploying Django project using Docker on centos8

introduction In this article, we will introduce h...

10 Things Excellent Web Developers Must Know to Improve Their Development Skills

"Development is more than just writing code&q...

js implements a simple countdown

This article example shares the specific code of ...

How to configure wordpress with nginx

Before, I had built WordPress myself, but at that...

Tutorial on installing and uninstalling python3 under Centos7

1. Install Python 3 1. Install dependency package...

The difference between absolute path and relative path in web page creation

1. Absolute path First of all, on the local compu...

Using CSS3 to achieve transition and animation effects

Why should we use CSS animation to replace JS ani...

A brief analysis of the configuration items of the Angular CLI release path

Preface Project release always requires packaging...

7 useful new TypeScript features

Table of contents 1. Optional Chaining 2. Null va...

Introduction to CSS foreground and background automatic color matching technology (demo)

1. Color matching effect preview As shown in the ...

Summary of tips for setting the maximum number of connections in MySQL

Method 1: Command line modification We only need ...

Vue+Vant implements the top search bar

This article example shares the specific code of ...

Detailed explanation of the characteristics, differences and conversion of px, em, rem and pt in CSS

Concept introduction : 1. px (pixel): It is a vir...