Lightbox gibi yerlerde kutuların kenarlıklarının (border) şeffaf olduğunu görmüşsünüzdür. Kenarlıklara hafif bir şeffaflık ile görünüşü güzel bir tat katabiliyoruz.
Her ne kadar border özelliğine rgba renkleriyle şeffaf bir renk veririm ve yaparım diye düşünsek de maalesef bu özelliğin çalışmadığını gördüm.
Daha net anlatmak gerekirse, ben örnek olarak sitemin ana sayfasının yazı elementine rgba ile kenar çizgileri verdim ve bu görünüşü aldım.
Resimde gördüğünüz gibi border özelliğine rgba ile şeffaf bir renk versek de maalesef kenarlıklarımız şeffaf bir renk almadı.
Bunun çözümü oldukça basit. CSS yine bu duruma çözümü bulmuş. Kullanacağımız bir özellik ile bu durumu çözebiliyoruz. Özelliğin adı ise Background-clip…
Örnek olarak background-clip kullanarak şeffaf bir kenarlık çizgisi oluşturalım.
border: 15px solid rgba(255, 0, 0, 0.2); background-clip: padding-box; |
Yukarıda gördüğünüz gibi rgba ile border özelliğimizi şeffaf olarak verdik fakat yukarıda anlattığım gibi sadece bu özellik kullanıldığında şeffaf bir kenar çizgisi elde edememiştik. Ama eklediğim background-clip: padding-box; özelliği ile bu durumu çözdüm.
Gayet basit bir işlem. Tek sorun var; Internet Explorer 9 sürümünün altındaki sürümler maalesef background-clip özelliğini desteklemiyor.
Ayrıca diğer tarayıcılar için gerekli olan kodlar:
moz-background-clip: padding; webkit-background-clip: padding; |
 Yapmak){kind=link}