yanlış söylemişimdir herhalde ama ne demek istediğimi anlarsınız.
resimde gördüğünüz gibi, menü 2'nin yanlardaki kanatlarının içine renklendirme yapamamış durumdayım.
bu menüyü photoshop ile değil sadece css ile tasarlıyorum ve kodlarım şunlar:
tinyurl.com
şimdi burada, before ve after'a background:#000 verdiğimde, boyamak istediğim kanatları değil, onların dışında kalan alanı boyuyor. o kanatları boyamak için ne yapmak gerekir?
şöyle javascript/css sorularında lütfen örnek html filan da verin, her şeyi en baştan kendimiz yazmayalım, soruya odaklanalım.
mesela jsfiddle.net 'e demo bir sayfa oluştursanız oradan baksak ne güzel olur.
kusura bakma, haklısınız.
şimdi şöyle kabataslak bir şey çıkarttım (background resmi olmadığı için direkt black ve white oldu)
jsfiddle.net
yine capsimden de hatırlarsınız yine nasıl göründüğünü. bahsettiğim kanatların içi boş görünüyor, tek amacım o kanatları doldurup dışa radius verebilmek.
açıkçası şu haliyle bulabildiğim en iyi yöntem, box-shadow ile opacity 1 olarak şekilde siyaha boyamak. ama background resmi ile ne kadar uyumlu olur emin değilim. çünkü .active ile .active:after ve before farklı elementler olacağı için siyah, resmin üstüne binecektir.
jsfiddle.net
edit: belki yukarıda bahsettiğim sorun after ve before'un height değeri azaltılarak çözülebilir.
jsfiddle.net
tam olarak logolar/active.png ve logolar/passive.png nasıl resimler?
hafif gölgeli bir siyah (aktif)
hafif gölgeli beyaz (pasif)
o kadar önemli değil aslında gölgeli olmaları.
bulduğun çözüm de işe yaradı ayrıca. en kötü ihtimalle gölgelendirmeyi biraz daha üste kaydırırım, alt taraf pür siyah kalırsa sıkıntı da kalmaz.