LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
BRAND

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ex quis error modi iste ipsum aliquam iure perferendis non dolorum, recusandae illum?

CSS
*{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

body{
  font-family: 'Bitter', serif;
}

.hero{
  /*background-image: url("http://purplerockscissors.com/assets/images/home_mud-illy.jpg");*/
  background-image: url("http://www.meetharis.com/images/polygon.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  /*background-size: contain;*/
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

.hero-content{
  text-align: center;
}

.brand{
  font-family: 'Lato', sans-serif;
  font-size: 40px;
  margin-bottom: 20px;
  display: block;
  font-weight: 900;
}

strong{
  font-style: italic;
}

.gradient-mask-text{
  font-size: 1.4em;
  line-height: 1.4em;
  width: 60vw;
  margin: 0 auto;
  position: relative;
  padding: 60px 20px;
  background: transparent; 
  /*background: url("http://newevolutiondesigns.com/images/freebies/polygon-wallpaper-14.jpg");*/
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #61c2ff), color-stop(100%, #cd4444));
  background: -webkit-linear-gradient(-45deg, #61c2ff 0%, #cd4444 100%);
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
  text-fill-color: transparent;
}

.gradient-mask-text:after, .gradient-mask-text:before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    width: 252px;
    margin-left: -126px;
    height: 1px;
    background: #6bb6ee;
}

.gradient-mask-text:before {
    top: 0;
    background: #6bb6ee;
    background: -moz-linear-gradient(-45deg, #6bb6ee 0%, #8a92b8 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #6bb6ee), color-stop(100%, #8a92b8));
    background: -webkit-linear-gradient(-45deg, #6bb6ee 0%, #8a92b8 100%);
    background: -o-linear-gradient(-45deg, #6bb6ee 0%, #8a92b8 100%);
    background: -ms-linear-gradient(-45deg, #6bb6ee 0%, #8a92b8 100%);
    background: linear-gradient(135deg, #6bb6ee 0%, #8a92b8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6bb6ee', endColorstr='#8a92b8',GradientType=1 );
}

.gradient-mask-text:after {
    bottom: 0;
    background: #9389aa;
    background: -moz-linear-gradient(-45deg, #9389aa 0%, #b5606d 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #9389aa), color-stop(100%, #b5606d));
    background: -webkit-linear-gradient(-45deg, #9389aa 0%, #b5606d 100%);
    background: -o-linear-gradient(-45deg, #9389aa 0%, #b5606d 100%);
    background: -ms-linear-gradient(-45deg, #9389aa 0%, #b5606d 100%);
    background: linear-gradient(135deg, #9389aa 0%, #b5606d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9389aa', endColorstr='#b5606d',GradientType=1 );
}

/* ANIMATED MOUSE
======================================== */
.mouse-wrap{
  position: absolute;
  display: block;
  bottom: 80px;
  left: 50%;
  margin-left: -14px;
  
}

.mouse{
  width: 28px;
  height: 50px;
  border: 2px solid #999;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

.scroller{
  width: 4px;
  height: 4px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #999;
  top: 7px;
  left: 11px;
  position: relative;
  -webkit-animation: mousescroll 1s ease-out infinite ;
  -moz-animation: mousescroll 1s ease-out infinite ;
}

@-webkit-keyframes mousescroll {
  0%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    height: 4px;
   }
  100%{
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0; 
    height: 10px;
  }
}

Description

Using gradients and transparent text-fills to create a sweet text effect, along with a full-page background using flexbox.
Term
Wed, 11/29/2017 - 13:55

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv