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

How to display texture at the position of swipe in CocosCreator

Table of contents 1. Project requirements 2. Docu...

Detailed explanation of the solution for migrating antd+react projects to vite

Antd+react+webpack is often the standard combinat...

Detailed explanation of MySQL using profile to analyze slow SQL (group left join is more efficient than subquery)

Use profile to analyze slow SQL The main purpose ...

Detailed explanation of keepAlive usage in Vue front-end development

Table of contents Preface keep-avlive hook functi...

How to make a website front end elegant and attractive to users

The temperament of a web front-end website is a fe...

Solution to the MySQL server has gone away error

MySQL server has gone away issue in PHP 1. Backgr...

Map the mouse position in CSS and control the page elements by moving the mouse (example code)

Mapping the mouse position or implementing drag e...

vue+ts realizes the effect of element mouse drag

This article example shares the specific code of ...

Summary of some tips on MySQL index knowledge

Table of contents 1. Basic knowledge of indexing ...

HTML table tag tutorial (33): cell vertical alignment attribute VALIGN

In the vertical direction, you can set the cell a...

MySQL data aggregation and grouping

We often need to summarize data without actually ...

Nginx access log and error log parameter description

illustrate: There are two main types of nginx log...

Docker data management and network communication usage

You can install Docker and perform simple operati...

Style trigger effect of web page input box

<br />This example mainly studies two parame...

What is the length of a function in js?

Table of contents Preface Why How much is it? Num...