üst reklem

CSS’de Görseller Üzerinden Metin İşleme

CSSde Gorseller Uzerinden Metin Isleme
Kategori: Genel
Temmuz 17 2021
: 0
alt reklam

CSS’de Görseller Üzerinden Metin İşleme

Bir resmin üzerinde metin bulunan bir UI bileşeniyle karşılaşabilirsiniz. Bazı durumlarda, kullanılan resme bağlı olarak metnin okunması zor olacaktır. Degrade kaplama veya renkli arka plan görüntüsü, metin gölgesi ve diğerleri eklemek gibi bazı farklı çözümler vardır. Addy Osmani’nin bu tweetini gördükten sonra bu yazıyı yazmaya teşvik edildim.

Bu makalede, bu sorun için farklı yaklaşımları ve çözümleri ve bazı ayrıntılar CSS’de kolayca gözden kaçabileceğinden, tasarım modeline göre uygulandığından emin olmak için kullanıcı arayüzünün bir ön uç geliştiriciyle nasıl iletişim kurulacağını keşfedeceğim.

Giriş

Her çözümün bir sorunu çözmesi beklenir. Durumumuz için sorunu inceleyelim. Bir resmin üzerinde yazı olan bir bileşen tasarlarken, metnin okunmasını kolaylaştırmaya özen göstermeliyiz.

Degrade kaplaması olmayan sürümün zorlukla okunabilir olduğuna dikkat edin. Bu kullanıcı için iyi değil. Bunu çözmek için metnin altına bir katman eklememiz gerekiyor, böylece okunması kolay olabilir. Bu katmanı eklemek zor olabilir ve bu çözümü erişilebilirliği göz önünde bulundurmadan uygulayan birçok kişi gördüm.

Olası çözümlere genel bakış

Metnin okunmasını kolaylaştırmak için farklı çözümler vardır. Onlara genel bir bakış atalım.

text image solutions

Gördüğünüz gibi, soruna farklı çözümler var. Daha fazla bakıma ihtiyaç duyanlar, gradyan çözümleridir. Neden? Çünkü bir degrade katmanı eklemek çok kolay ve metne erişilemeyecek.

Çözümler

Gradyan kaplaması

Genel olarak konuşursak, degrade kaplama, bir görüntüdeki metni daha net hale getirmek için en yaygın çözümdür. Buna göre, biraz daha üzerinde duracağım.

Degrade kaplamayı uygularken iki seçeneğimiz var:

  1. Degrade için ayrı bir öğe kullanın (sözde öğe veya boş
    )
  2. Gradyanı arka plan görüntüsü olarak uygulayın.

Yukarıdakilerin her birinin artıları ve eksileri vardır, hadi bunları gözden geçirelim.

İçerik öğesi mutlak olarak konumlandırılmıştır ve arka plan görüntüsü olarak bir degradeye sahiptir. Bu, degrade boyutunun öğenin yüksekliğine eşit olduğu anlamına gelir.

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

g overlay 1

İlk bakışta, eğimin iyi olduğunu ve işi yaptığını düşünebilirsiniz. Bu doğru değil. Aynı gradyanı daha fazla görüntü ile test ettim ve işte sonuç.

g overlay 2

Beyaz metin ve resimler arasındaki karşıtlığın her zaman net olmadığına dikkat edin. Bu bazıları için okunabilir olabilir, ancak erişilebilir olmayacağı için böyle bir gradyanı kullanmak büyük bir hatadır.

Bunun nedeni, eğimin dikey olarak daha fazla alanı kaplaması gerektiğidir, bu nedenle yüksekliğinin daha büyük olması gerekir. Degradenin içeriğin boyutuna eşit olması her durumda işe yaramaz. Bunu çözmek için kullanabiliriz min-height aşağıdaki gibi:

  • min-height için .card__content öğe.
  • İçeriği aşağıya itmek için Flexbox.
.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

Başka bir çözüm, basitçe büyük bir padding-top, ve ihtiyacımız yok min-height ve esnek kutu.

.card__content {
  position: absolute;
  padding-top: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

Sol ve sağ kart arasındaki farka dikkat edin. gradyan daha büyük yükseklikte.

g overlay before after

Tamam, bu iyi görünüyor. Daha iyisini yapabilir miyiz? Evet kesinlikle!

gradyanları yumuşatma

Yakından bakarsanız, degradenin nerede bittiğinin net olduğunu fark edeceksiniz, bu da sert kenar denen bir şeyle sonuçlanır.

g overlay hard edges

Bunu daha iyi hale getirmek için, geçiş yumuşatma kavramını degradeye uygulayabiliriz. Bu şekilde, eğim daha doğal görünecek ve sonunda sert bir kenar görmeyeceksiniz.

g overlay hard edges 2

CSS’de, bu makaleyi yazarken bunu yapmanın yerel bir yolu olmadığından, yumuşatmayı sağlamak için birden fazla degrade durağına ihtiyacımız var. İyi haber şu ki, CSS çalışma grubu CSS gradyanlarında gevşeme uygulama olasılığını tartışıyor, ancak bunun ne zaman olacağı belli değil.

Neyse ki, Bay Andreas Larsen, normal bir degradeyi kolaylaştırılmış olana dönüştürmeye yardımcı olan kullanışlı bir PostCSS ve Sketch eklentileri oluşturdu.

Yukarıdaki örnek için CSS gradyanı:

.card__content {
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 35.29%, 0) 0%,
    hsla(0, 0%, 34.53%, 0.034375) 16.36%,
    hsla(0, 0%, 32.42%, 0.125) 33.34%,
    hsla(0, 0%, 29.18%, 0.253125) 50.1%,
    hsla(0, 0%, 24.96%, 0.4) 65.75%,
    hsla(0, 0%, 19.85%, 0.546875) 79.43%,
    hsla(0, 0%, 13.95%, 0.675) 90.28%,
    hsla(0, 0%, 7.32%, 0.765625) 97.43%,
    hsla(0, 0%, 0%, 0.8) 100%
  );
}

İşte hafifletilmiş ve hafifletilmemiş bir kart arasında bir karşılaştırma.

g overlay hard edges 3

Yatay Gradyanlar

Metni bir görüntü üzerinde işlemek yalnızca dikey olamaz, aynı zamanda bunları yatay bir degrade olarak da kullanabiliriz. Örneğin bir kahraman bölümünü ele alalım. Bu durumda yatay bir eğime ihtiyacı var.

g overlay vertical

İşte yukarıdaki kahraman bölümü için CSS gradyanı. Kolaylaştırılmış bir degrade oluşturmak için daha önce bahsedilen aracı kullandım.

background: linear-gradient(
  to right,
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.964) 7.4%,
  hsla(0, 0%, 0%, 0.918) 15.3%,
  hsla(0, 0%, 0%, 0.862) 23.4%,
  hsla(0, 0%, 0%, 0.799) 31.6%,
  hsla(0, 0%, 0%, 0.73) 39.9%,
  hsla(0, 0%, 0%, 0.655) 48.2%,
  hsla(0, 0%, 0%, 0.577) 56.2%,
  hsla(0, 0%, 0%, 0.497) 64%,
  hsla(0, 0%, 0%, 0.417) 71.3%,
  hsla(0, 0%, 0%, 0.337) 78.1%,
  hsla(0, 0%, 0%, 0.259) 84.2%,
  hsla(0, 0%, 0%, 0.186) 89.6%,
  hsla(0, 0%, 0%, 0.117) 94.1%,
  hsla(0, 0%, 0%, 0.054) 97.6%,
  hsla(0, 0%, 0%, 0) 100%
);

Düz bir renk ve bir degradeyi karıştırma

Bu kalıbı Netflix web sitesinden öğrendim. Giriş yapmamış bir kullanıcı için ana sayfada, büyük bir arka plan resmine sahip bir başlık var.

g overlay spotlight

Beğendim, ancak birçok görüntü ayrıntısını gizliyor. Bunu yalnızca görüntünün dekoratif olması gerektiğinde kullandığınızdan emin olun (son kullanıcıya gerçek bir fayda sağlamaz).

cover

Unlimited movies, TV shows, and more.

Watch anywhere. Cancel anytime.

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

İşte bu kalıbın nasıl çalıştığına dair görsel bir açıklama.

g overlay spotlight analysis

Degrade yerleşimi ve metin gölgesi

Resimlerin üzerindeki metni daha da iyi hale getirebilecek kullanışlı küçük bir dokunuş var. Her şey bir incelik eklemekle ilgili text-shadow metin için. Bunu fark etmek kolay olmasa bile, görüntünün yüklenememesi durumunda çok yararlı olabilir.

Aşağıdaki örneği düşünün.

.whatever-text {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

gradient text shadow

Degrade yerleşimi, metin gölgesi ve opaklık

Bu, Facebook’un video oynatıcısında fark ettiğim bir kalıp. Metni (ve diğer UI öğelerini) netleştirmek için birden fazla teknik kullanmalarını seviyorum. Bir video oynatıcı ile uğraşırken, üzerindeki bir öğenin fark edilebilir olmasını sağlamak çok önemlidir.

gradient video

.player__icon {
  opacity: 0.9;
}

.player__time {
  color: #fff;
  text-shadow: 0 0 5px #fff;
}

Bunda yeni olan şey, simgelerin ve oynatıcının opacity: 0.9. Bu, altlarındaki arka planla karışmalarına yardımcı olacaktır. Kontrollerin harmanlandığı hissi veriyor.

Ayrıca, beyaz metin için beyaz metin gölgesi kullanmak, metni daha net hale getirmenin etkili bir yoludur. Arka plan tamamen beyaz bir görüntü olsa bile yukarıdakilerin işe yarayacağına dair kanıt ister misiniz? Hadi bakalım.

gradient video test

Youtube da videolarında benzer bir şey yapıyor.

gradient youtube

Youtube’un yaklaşımı hakkında sevdiğim şey:

  • Daha fazla öne çıkabilmesi için her simge için koyu bir kenarlık kullanma.
  • Video süresi için beyaz yerine siyah gölge kullanma.

Radyal gradyan

Netflix’ten öğrendiğim ilginç bir çözüm, radyal gradyan kullanmaktır. İşte nasıl çalıştığı:

  1. Kahraman için bir taban arka plan rengi ayarlayın.
  2. Resmi %75 genişlikle sağ üste konumlandırın.
  3. Bindirme, görüntü boyutuna ve konumuna eşittir.

g overlay radial

.hero {
  background-color: #000;
  min-height: 300px;
}

.hero__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  object-fit: cover;
}

.hero:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  background: radial-gradient(
    ellipse 100% 100% at right center,
    transparent 80%,
    #000
  );
}

Yine de Netflix ekibi, bindirme için bir .png görüntüsü kullandı. Nedeninden emin değilim. Radyal gradyan çözümünü yoğun bir şekilde test etmediğim için tarayıcılar arası bir sorun veya başka bir şey olabilir.

Erişilebilir bir kaplama rengi seçme

Bu, görüntüye göre doğru kaplama opaklığını seçmemize yardımcı olan harika bir araçtır. Codepen’de kontrol edin. İlginç bir zorluk, bir gradyan için erişilebilirliği ele almaktır.

Genel olarak konuşursak, degrade kaplamanın metni doğru bir şekilde doldurduğundan ve iyi bir renk kontrastına sahip olduğundan eminseniz, gitmeye hazırsınız.

Test yapmak

Bir çözüm, test edilene kadar iyi olarak kabul edilemez, değil mi? Degrade kaplamayı test etmek için kullandığım bir yol, altına beyaz bir arka plan eklemektir. Metin okunabilirse, degrade kullandığınız görüntüyle çalışır. Değilse, ince ayar yapmanız ve geliştirmeniz gerekir.

g overlay testing

Yukarıdaki örnek için başlık altındaki düz rengi seçtim ve kontrast oranı 4.74, bu da iyi sayılır.

Firefox DevTools’u Kullanma

Firefox hakkında bilgi verdiği için Gijs Veyfeyken’e teşekkürler, degradeler üzerinde renk kontrastı testi yapabilirim. Bu harika bir özellik.

g overlay

bir e-kitap yazdım

CSS Hata Ayıklama hakkında bir e-kitap yazdığımı bildirmekten heyecan duyuyorum.

debugging css

İlgileniyorsanız, ücretsiz bir önizleme için debuggingcss.com adresine gidin…

.

Source link

alt reklam
sidebar reklam kodu
sidebar reklam kodu