Улучшение качества вращения css3

Я создал серию закругленных вкладок с помощью CSS3. Затем я повернул эти вкладки, но качество текста (Windows - Chrome) плохое, а также "dims/blurs" при переходе. Каковы альтернативы? Я правильно применил свой CSS? Будет ли лучше поворачивать вкладки и сохранять текст горизонтальным?

http://jsfiddle.net/jeepstone/9eGt3/

Ответ 1

Chrome

Chrome не включает сглаживание по умолчанию. Но вы можете добавить это свойство CSS к своим элементам, чтобы включить его:

transform: translate3d(0,0,0);

Это заставит браузер использовать свое аппаратное ускорение для вычисления преобразований, что добавит некоторое сглаживание в качестве бонуса.

Тот же эффект можно применить, установив -webkit-backface-visibity в hidden:

-webkit-backface-visibility: hidden;

Вот ваш обновленный jsfiddle (протестирован в Chrome)

http://jsfiddle.net/9eGt3/6/

Firefox

Firefox разрешает сглаживание по умолчанию, поэтому не требуется перехват transform3d, но качество алгоритма сглаживания зависит от версии браузера. Вот несколько сравнительных изображений:

Это Firefox 5, Firefox 9 и Chrome соответственно.

Лучше всего здесь настроить твой шрифт, чтобы он стал более дружелюбным к алгоритму сглаживания. В этом случае выбор более смелого и большего шрифта может помочь.

Ответ 2

Как я уже упоминал, использование javascript может сделать переход более плавным, не нарушая текст или границы. Замена CSS-переходов показала, что это очень помогло. Это использование jQuery - используйте инструмент по вашему выбору:

// <li> needs position:relative; in the CSS
$('li').hover(
    function(){
        $(this).stop().animate({'top':'-10px'});
    },function(){
        $(this).stop().animate({'top':'0'});
    }
);

http://jsfiddle.net/9eGt3/5/

Мне не повезло, что я могу использовать CSS3 очень часто, поэтому для меня это не область знаний, но мне, к сожалению, пришлось удалить существующие переходы на основе CSS, чтобы заставить его работать. Вы можете использовать технику обнаружения javascript, чтобы вернуться к CSS-переходам, например, добавив class="js-enabled" в тег body (с js конечно) и используя это в вашем селекторе CSS.

Кроме того, я думаю, что у вас нет газа, если вы не хотите использовать изображения (bah) или ждать еще несколько лет, пока браузеры не смогут справиться с этим материалом немного лучше (grr). Не принимайте это как Евангелие, у кого-то может быть решение для вас - но я думал, что по крайней мере предлагаю обходное решение.