Animated/Gradient Welcome Text on Service Portal

Add the following CSS to the widget instance of “Homepage Search”


.sp-tagline-color {
 
  
    background-image: linear-gradient(
    -225deg,
   white 0%,
  grey 29%,
  brown 67%,
  white 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  
  
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-radius: 25px;
    width: 100%;
}

.input-group-btn {

  visibility:hidden;
}


Latest Posts