Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS opacity özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

51 views

opacity CSS özelliği, bir öğenin (ve onun çocuklarının) şeffaflık seviyesini belirler. Bu özellik, öğenin görünürlüğünü azaltmak için kullanılır, böylece öğe ve onun alt öğeleri daha şeffaf hale gelir. opacity özelliği 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir değer alır.

.transparent-box {
  opacity: 0.5;
}

Bu örnekte, .transparent-box sınıfına sahip bir öğe %50 şeffaflıkta olacak şekilde ayarlanmıştır. Bu, öğenin arka planın bir kısmını göstermesini sağlar, fakat öğenin kendisi ve içerdiği tüm içerikler (metin, resimler vb.) aynı şeffaflık seviyesine sahip olur.

Uygulamalar ve Dikkat Edilmesi Gerekenler:

opacity özelliği, bir öğe ve onun tüm çocuk öğelerine uygulanır. Bu, öğe içindeki öğelerin opaklığını ayrı ayrı kontrol etmek istiyorsanız, iç içe öğelerde opacity kullanmanın uygun olmayabileceği anlamına gelir.

Şeffaflık, performans üzerinde olumsuz bir etkiye sahip olabilir, özellikle büyük ölçekli animasyonlar veya karmaşık sayfa düzenleri söz konusu olduğunda. Bu nedenle, şeffaflığı dikkatli kullanmak önemlidir.

Opaklık seviyesi düşük bir öğe hala etkileşim kabul eder, yani kullanıcılar öğenin üzerine tıklayabilir veya fareyle üzerinden geçebilir. Bu, visibility: hidden; veya display: none; ile gizlenmiş öğelerle karşılaştırıldığında farklı bir davranıştır.

.modal-backdrop {
  opacity: 0.4;
  background-color: black;
}

Bu örnekte, bir modal (ya da açılır pencere) arkasındaki perde olarak kullanılan .modal-backdrop sınıfı, kullanıcıya modalın odak noktası olduğunu belirtmek için sayfanın geri kalanını hafifçe karartır. %60 şeffaflık (opacity: 0.4) sayfanın geri kalanının hala görülebilir olmasını, ama aynı zamanda kullanıcının dikkatinin modal içeriğine çekilmesini sağlar.

 

 

Class
Properties
opacity-0 opacity: 0;
opacity-5 opacity: 0.05;
opacity-10 opacity: 0.1;
opacity-15 opacity: 0.15;
opacity-20 opacity: 0.2;
opacity-25 opacity: 0.25;
opacity-30 opacity: 0.3;
opacity-35 opacity: 0.35;
opacity-40 opacity: 0.4;
opacity-45 opacity: 0.45;
opacity-50 opacity: 0.5;
opacity-55 opacity: 0.55;
opacity-60 opacity: 0.6;
opacity-65 opacity: 0.65;
opacity-70 opacity: 0.7;
opacity-75 opacity: 0.75;
opacity-80 opacity: 0.8;
opacity-85 opacity: 0.85;
opacity-90 opacity: 0.9;
opacity-95 opacity: 0.95;
opacity-100 opacity: 1;

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...