Animated Gradient Corner Ribbon

animated-gradient-corner-ribbon.markdown

Animated Gradient Corner Ribbon

Giving the old corner ribbon a refresh with a nice animated gradient cycling between two colors using the hue-rotate() CSS function. Slap some text or an SVG in there and you've got yourself one fancy banner. Wanted this for a project, so i figured I'd take advantage of the live reloading on here. I'll come back one day and add ribbons to the other 3 corners.

A Pen by Code_Nit_Whit on CodePen.

License.

index.html

<div class='corner-ribbon banner-text' onclick="window.open('https://github.com/Code-Nit-Whit/')">GitHub</div>
<h1>Animated Corner Ribbon</h1>
<h2>Gradient Hue Rotation</h2>
<p>Giving the old corner ribbon a refresh with a nice animated gradient cycling between two colors using the <code>hue-rotate()</code> css function. Slap some text or an SVG in there and you've got yourself one fancy banner.</p>

style.css

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  width:100vw;
  height:100vh;
  overflow:hidden;
  background-color:#000000;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#ffffff;
  text-align:center;
}

h1 {
  font-size: 8vw;
  margin-top:25vh;
  margin-bottom:40px;
}
h2 {
  font-size: 4vw;
  margin:25px 0;
}

p {
  font-size: 2.5vw;
  width:70vw;
  text-align:center;
  margin:0;
}

.corner-ribbon:hover {
	font-size: 27px;
}

.corner-ribbon {
  display:flex;
  flex-direction:column;
  justify-content:center;
  width: 215px;
	height: 60px;
	position: fixed;
  top: 10px;
  right: -60px;
  cursor:pointer;
  color:black;
  font-size: 25px;
  font-weight:800;
  font-family:"Lato";
  transition: font-size ease-out 0.25s;
  transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	border: 1px solid white;
  box-shadow: 0 4px 10px #fff;
  background: linear-gradient(to top left, #00CF53 100%, #047ECF 0%);
  background-blend-mode: hard-light;
  -webkit-animation: hue-rotate 3s linear infinite;
  animation: hue-rotate 3s linear infinite;
}

@-webkit-keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  50% {
    -webkit-filter: hue-rotate(45deg);
    -moz-filter: hue-rotate(45deg);
    -ms-filter: hue-rotate(45deg);
    filter: hue-rotate(45deg);
  }
  100% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
}

@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  50% {
    -webkit-filter: hue-rotate(45deg);
    -moz-filter: hue-rotate(45deg);
    -ms-filter: hue-rotate(45deg);
    filter: hue-rotate(45deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
    -moz-filter: hue-rotate(0deg);
    -ms-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
}