Border şeffaflık (opacity) problemi!
CSS tasarımında border lar önemli yer tutmaktadır. Bir çok tasarımda kullanılabilen borderlar ile ilgili bazı problem yaşayabilirsiniz. En yaygın olarak sorulan border problemi border rengini opak,saydam, şeffaf yapamamaktır. Oysaki çözüm 2 kademeli yol ile çok basittir, şöyle ki ;
- Border rengini CSS içerisinde rgba formatında yazmalısınız,
.container { border:solid 5px 0,0,0,0.3 }
yukarıda ki kod size siyah ama %30 şeffalık vermeli. Fakat siz bu kodu başka bir div elementi içerisinde kullanırsanız şeffalığa ulaşamıyacak ve altaki div in rengine göre şeffaflık alacaksınız. Bunu önlemek için ;
- background-clip ile saydamlığı vermelisiniz..container { border:solid 5px 0,0,0,0.3; background-clip:padding-box; }
koda eklediğiniz element ile şeffaflığı elde edebilirsiniz.
