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

Detailed explanation of the differences and applications of {{}}, v-text and v-html in Vue

{ {}} Get the value, the original content of the ...

Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database

Phenomenon: After MySQL version 5.7, the default ...

Thoughts and experience sharing on interactive design of reading lists for information products

A list is defined as a form of text or chart that...

vue+elementui implements the complete code of adding and modifying a shared bullet box

Table of contents 1. New II. Modification element...

MySQL 5.7 installation MySQL service cannot be started but the service does not report any errors

There are two ways to install MySQL 5.7. One is t...

MySQL group by method for single word grouping sequence and multi-field grouping

I have created a goods table here. Let's take...

MySQL 8.0.22 installation and configuration method graphic tutorial

This article records the installation and configu...

Detailed explanation of the implementation method and usage of CSS3 border-radius rounded corners

In the past, it was quite troublesome to achieve ...

A brief analysis of MySQL explicit type conversion

CAST function In the previous article, we mention...

W3C Tutorial (6): W3C CSS Activities

A style sheet describes how a document should be ...

Undo log in MySQL

Concept introduction: We know that the redo log i...

Detailed explanation of the usage of DECIMAL in MySQL data type

Detailed explanation of the usage of DECIMAL in M...

Detailed tutorial on Docker pulling Oracle 11g image configuration

Without further ado Start recording docker pullin...

Analysis of idea compiler vue indentation error problem scenario

Project scenario: When running the Vue project, t...

Tutorial on using prepare, execute and deallocate statements in MySQL

Preface MySQL officially refers to prepare, execu...