Yumuşak Kenarlı İçerik Soldurma

Web özellikleri: Maskeler

Genel Bakış

Bir kapsayıcının kenarlarına şeffaflık gradyanı uygulamak için (ör. kaydırılacak daha fazla içerik olduğunu belirtmek veya metni soldurmak için) doğrusal renk geçişiyle CSS maskeleme kullanın. Bu yaklaşım, yarı şeffaf bir yer paylaşımı kullanmaktan daha iyidir. Çünkü içeriğin kendisini soldurarak arka planın metin seçimine veya işaretçi etkinliklerine müdahale etmeden doğal bir şekilde görünmesini sağlar.

Uygulama

Yumuşak kenarlı geçiş uygulamak için:

Kapsayıcının alt kenarını soldurma

Bu, kaydırılabilir bir alanda daha fazla içerik olduğunu belirtmek için kullanışlıdır.

.container {
  /* Enable scrolling */
  overflow-y: auto;
  
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  
  /* Standard property for modern browsers */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

Hem üst hem de alt kenarlar solduruluyor

Her iki kenarı da soldurmak için birden fazla renk geçiş noktası içeren tek bir gradyan kullanabilirsiniz.

.dual-fade-container {
  /* Content is visible between 10% and 90% of the height */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

Yedek stratejiler

Tarayıcı mask-image veya ön ekli sürümü desteklemiyorsa:

  • İçerik solmaz ve keskin kenarlarla gösterilir.
  • Arayüzün hâlâ işlevsel olduğundan ve içeriğin, karartma olmadan okunabildiğinden emin olun (progresif geliştirme).
  • Yedek olarak yarı şeffaf bir yer paylaşımı kullanabilirsiniz ancak bunun için arka plan renginin bilinmesi gerekir ve pointer-events: none kullanılmadığı sürece metin seçimine müdahale edebilir.
/* Fallback using an overlay for browsers that do not support masking */
@supports (not (mask-image: linear-gradient(to bottom, black, transparent))) and (not (-webkit-mask-image: linear-gradient(to bottom, black, transparent))) {
  .container {
    position: relative;
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    /* Fallback assumes a solid background color (e.g., white) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow interaction with text underneath */
  }
}