LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Enjoy

∫ 

CSS
@-webkit-keyframes textintro {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes textintro {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body {
  background-color: #FF8681;
  height: 100%;
  overflow: hidden;
}

h1 {
  margin: 0;
  top: 40px;
  font-weight: 900;
  position: absolute;
  width: 100%;
  text-align: center;
}
h1.text {
  font-family: "Alegreya", Times, serif;
  font-size: 200px;
  font-style: italic;
  text-shadow: 15px -10px 0px #111E29;
  /* primary, solid text */
  /* shaded text background */
  background: -webkit-repeating-linear-gradient(135deg, #111E29, #111E29 1px, #FF8681 1px, #FF8681 2px);
  background: repeating-linear-gradient(-45deg, #111E29, #111E29 1px, #FF8681 1px, #FF8681 2px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: .8s textintro;
          animation: .8s textintro;
}
h1.decor {
  font-size: 350px;
  font-family: "Times", serif;
  font-weight: 400;
  -webkit-transform: rotate(-105deg) translate3d(-100px, -35px, 0);
          transform: rotate(-105deg) translate3d(-100px, -35px, 0);
  background: -webkit-repeating-linear-gradient(calc(-45deg + 105deg), #111E29, #111E29 1px, #FF8681 1.1px, #FF8681 2px);
  background: repeating-linear-gradient(calc(-45deg + 105deg), #111E29, #111E29 1px, #FF8681 1.1px, #FF8681 2px);
  text-shadow: 10px 10px 0px #111E29;
  /* primary, solid text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: .8s textintro;
          animation: .8s textintro;
}
JS
// nope

Description

webkit's "text" option for background-clip (along with a repeating-linear-gradient). it's webkit only, so Chrome and Safari will have to do.
Term
Wed, 11/29/2017 - 14:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv