0

I have an audio post where the information is in rotated DIVs that are displayed on top of the album art. To see what I mean go here (the page). The area on the bottom left corner is the information. When viewed in Chrome you will see that the edges of the DIVs are blurred. Is there a way to "alias" the DIVs so they appear sharp? I know it's not a resolution thing because Firefox displays them perfectly.

.audioBox {
position:absolute;
bottom:160px;
margin-left:-11px;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
z-index:3;
width:343px;
}

.boxify {
margin:1px;
padding:5px;
float:left;
bottom:0;
width:329px;
}

.box {
background:#000; 
padding:5px;
padding-left:10px;
padding-right:10px;
margin-left:-5px;
}

<div class="audioHolder">
<div class="audioBox">

<div class="boxify" id="song">

                    <img id="audioBubble"    
src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">

{block:TrackName}
<span class="box">{TrackName}</span>
{/block:TrackName}
</div>

<div class="boxify" id="artist">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>

<div class="boxify" id="label">
<span class="box">{PlayCountWithLabel}</span>
</div>

<div class="boxify" id="download">
<span class="box">Download
{block:ExternalAudio}
<a href="{ExternalAudioURL}">Download</a>
{/block:ExternalAudio}</span>
</div>

</div>

Solution: I replaced the background color with a background image of the same color instead. :-) Hope it helps somebody else with a similar problem.

Earl Larson
  • 5,051
  • 6
  • 27
  • 29
  • Aliasing is not possible in CSS . Anti Aliasing is controlled by browser . – Anil Shanbhag Aug 16 '11 at 10:09
  • So there is no real solution to this? – Earl Larson Aug 16 '11 at 10:13
  • You can browse through other thread about control anti aliasing but this was for canvas http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element – Anil Shanbhag Aug 16 '11 at 10:14
  • Would replacing it with a background image sharpen it? Because there is actually a black square thats covering up the song title at the bottom and it seems to be sharp even though it's rotated as well. – Earl Larson Aug 16 '11 at 10:16

1 Answers1

3

I know I'm little late but...

I have similar problem now and in my case changing the size helps, just use even numbers

.blurry {
    left: 100px;
    height: 30px;
    width: 135px;
}

.sharp { 
    left: 200px;
    height: 30px;
    width: 136px;  
}

http://jsfiddle.net/_hags/9e4cS/

hagi
  • 56
  • 2