XenForo .p-body-header alanına ince bir dalga efekti ekleyin

Yönetici

HAN

WFN Moderatör

1/3

5 Eyl 2025

#1

XenForo .p-body-header alanına ince bir dalga efekti ekleyin

Admin CP’ye girin.
Sol menüden Appearance → Templates sekmesine tıklayın.
Sağ üst köşeden aktif stilinizi seçin (örneğin “My Custom Style”).
Ağaç menüden extra.less dosyasını bulun (genelde en altta).
Açılan editöre, en alta aşağıdaki kodu yapıştırın:

Less:

.p-body-header {
  position: relative;
  overflow: hidden;
  /* Arka plan renginizi bozmasın */
  background-color: var(--header-bg, #fff);
}

.p-body-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;        /* yatay tekrar için geniş tutuyoruz */
  height: 10px;       /* dalganın kalınlığı */
  pointer-events: none;
  opacity: 0.2;       /* genel opaklık */

  /* Dalga rengini ring ile aynı yapıyoruz */
  background-color: var(--theme-main-color);

  /* inline SVG mask: ince dalga formu */
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'>\
<path fill='white' d='M0 5 C20 0 60 10 80 5 L80 10 L0 10 Z'/>\
</svg>") repeat-x 0 bottom;
  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'>\
<path fill='white' d='M0 5 C20 0 60 10 80 5 L80 10 L0 10 Z'/>\
</svg>") repeat-x 0 bottom;

  /* mask boyutu (repeat tile) */
  -webkit-mask-size: 80px 10px;
  mask-size:         80px 10px;

  /* yatayda kayan animasyon */
  animation: waveMask 8s linear infinite;
}

@keyframes waveMask {
  from {
    -webkit-mask-position:    0 bottom;
            mask-position:    0 bottom;
  }
  to {
    -webkit-mask-position:  80px bottom;
            mask-position:  80px bottom;
  }
}