Animated rainbow border: how to place a div inside?-CodePudding

I want to use this rainbow animated border, but I am having immense trouble understanding how to work with it.

I want it to be in the most bare-bone/simple way possible, to expand and build on it when and if needed.

I want to be able to place a div inside, that will hold any type of content I decide. Buttons, text, anything that makes the div actually work like normal.

https://codepen.io/ddw14/pen/jOzdGxV

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #151320;
}

div {
  height: 250px;
  width: 250px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 5px;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

div:before {
  content: "";
  height: 150%;
  width: 150%;
  position: absolute;
  background: conic-gradient( #fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c);
  left: -25%;
  top: -25%;
  animation: spin 1.5s infinite linear;
}

@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}

div:after {
  content: "RAINBOW";
  position: absolute;
  background-color: #1c1b29;
  height: 93%;
  width: 93%;
  top: 3.5%;
  left: 3.5%;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 6px;
  display: grid;
  place-items: center;
}

<div></div>

CodePudding user response：

One approach is as follows, with explanatory comments in the code:

/* the defined animation; this is my personal preference to
   have @keyframes specified at the beginning of the file: */
@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}

/* CSS custom-properties: */
:root {
  --animation: spin 5s infinite linear;
  --rainbow: conic-gradient(#fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c);
}

/* CSS reset, to remove default margins and padding, and also
   forcing the browser to calculate element-sizing according
   to the border-box algorithm, in which border-width and
   padding is included in the stated width/inline-size: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  border: 1px solid currentColor;
  inline-size: clamp(10rem, 50vw, 1200px);
  /* used to create a new stacking context, in order to
     prevent any descendant elements with z-index from
     escaping "behind" the <main> element(s): */
  isolation: isolate;
  margin-block: 1em;
  margin-inline: auto;
  padding: 1em;
  /* hiding any elements that overflow the <main>
     element(s): */
  overflow: hidden;
}

.rainbow {
  background-color: #fff;
  border-radius: 1em;
  /* CSS logical property, equivalent to width in
     English-language sites: */
  min-inline-size: 10rem;
  padding: 0.5em;
  /* to allow pseudo-elements to be absolutely
     positioned with reference to this element: */
  position: relative;
}

.rainbow::before {
  /* linking to the animation: */
  animation: var(--animation);
  /* defining the background-image: */
  background-image: var(--rainbow);
  /* required for the pseudo-element
     to show up:*/
  content: '';
  /* this is something of a magic number;
     too small and the corner of this
     pseudo-element will be visible as
     the element rotates; this positions
     an absolutely-positioned element
     at the specified length from the
     edges of the ancestor against which
     it's positioned: */
  inset: -200em;
  position: absolute;
  /* to move the element behind it's parent: */
  z-index: -1;
}

<main>
  <div >
    <h3>Inside the rainbow</h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis excepturi laborum deleniti eos quae, impedit iusto fugit nemo, autem ex odit saepe praesentium magni illo possimus officiis deserunt ipsum quo nostrum sint delectus! Consectetur repellendus debitis veritatis, nostrum placeat nam obcaecati dolorem accusantium tenetur. Qui beatae voluptatem vitae, vero reiciendis provident, voluptate culpa a iusto error assumenda modi itaque reprehenderit!
  </div>
</main>

JS Fiddle demo.

References:

CodePudding user response：

yes it does look a bit tricky to use in its original form. Id probably do the following.

you have to make the div element style specs to be a class style spec to be able to easily use other divs in the structure.

i.e. for all the div, div:before, div:after change it to .cls-rainbow-div, .cls-rainbow-div:before, .cls-rainbow-div:after

So that your div will become:

<div class='cls-rainbow-div'></div>

now to the original problem, how to put something inside that rainbow. Basically, the "after" block is the one that is being placed inside. So you have to change after block to be a class of its own and assign it to the inside div.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #151320;
}
.cls-rainbow-div{
    height: 250px;
    width: 250px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    box-shadow: 0 20px 35px rgba(0,0,0,0.3);
    overflow: hidden;
}
.cls-rainbow-div:before{
    content: "";
    height: 150%;
    width: 150%;
    position: absolute;
    background: conic-gradient(
        #fd004c,
        #fe9000,
        #fff020,
        #3edf4b,
        #3363ff,
        #b102b7,
        #fd004c
    );
    left: -25%;
    top: -25%;
    animation: spin 1.5s infinite linear;
}
@keyframes spin{
    100%{
        transform: rotate(-360deg);
    }
}
.cls-inside-div{
    position: absolute;
    background-color: #1c1b29;
    height: 93%;
    width: 93%;
    top: 3.5%;
    left: 3.5%;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 6px;
    display: grid;
    place-items: center;
}

  <div class='cls-rainbow-div'>
    <div class='cls-inside-div'>
      xx
    </div>
  </div>

Hopefully this helps to move forward.