اضافه کردن Gradient به متن توسط سی‌اس‌اس

با استفاده از سی‌اس‌اس شما می‌تونید افکت Gradient رو به صفحه‌تون استفاده کنید. با استفاده از ویژگی linear-gradient و -webkit-gradient برای مرورگرهای بر پایه وب‌کیت. در حالت عادی این قابلیت فقط برای باکس‌های سی‌اس‌اسی قابل پیاده‌سازی هستن. اما برای متن چی؟ با ترکیب چند ویژگی سی‌اس‌اس می‌شه به راحتی این کار رو [برای لینک‌ها، تیترها و سایر متن‌ها] انجام داد. توجه کنید به مثال پایین:

<div class="container">
  <div class="inner">
    <h1>ای به دادِ من رسیده، تو روزای خود شکستن</h1>
  </div>
</div>
.container .inner {
  text-align: center;
  display: block;
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  background: #f5f5f5;
  color: #fff;
  width: 80%;
  height: 80%;
  margin: 0 auto;
  left: 0;
  right: 0;
  border-radius: 5px
}

.container .inner h1 {
  position: relative;
  top: 50%;
  transform: translatey(-50%);
  text-align: center;
  display: inline-block;
  font-size: 3em;
  word-spacing: -8px;
  background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
 background: linear-gradient(to right,#ff8a00,#da1b60);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  font-weight: 800;
}

See the Pen CSS Text Gradient by Mehran Bolhasani (@mehranbolhasani) on CodePen.light