Popraw jakość rotacji tekstu css3

Stworzyłem serię zaokrąglonych zakładek przy użyciu CSS3. Następnie obróciłem te karty, ale jakość tekstu (Windows-Chrome) jest słaba, a także "dims/blurs" przy przejściu. Jakie są alternatywy? Czy poprawnie zastosowałem CSS? Czy lepiej byłoby obrócić karty i utrzymać tekst w poziomie?

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

Author: Will, 2011-12-22
Source

2 answers

Chrome

Chrome domyślnie nie włącza antyaliasingu. Ale możesz dodać tę właściwość CSS do swoich elementów, aby ją włączyć: 

transform: translate3d(0,0,0);

To zmusi przeglądarkę do użycia akceleracji sprzętowej do obliczenia przekształceń, co doda trochę antyaliasingu jako bonus.

Ten sam efekt można również zastosować, ustawiając -webkit-backface-visibity na hidden: 

-webkit-backface-visibility: hidden;

Oto twój zaktualizowany jsfiddle (testowany w Chrome)

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

Firefox

Firefox domyślnie włącza anti-aliasing, więc nie jest wymagana transform3d hack, ale jakość algorytmu anti-aliasign różni się w zależności od wersji przeglądarki. Oto kilka zdjęć porównawczych:

Firefox 5Firefox 9Chrome

SÄ… to odpowiednio Firefox 5, Firefox 9 i Chrome.

Najlepiej jest dostosować czcionkę, aby była bardziej przyjazna dla algorytmu antyaliasingu. W w tym przypadku może pomóc wybór grubszej i większej czcionki.

 23
Author: Cesar Canassa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-22 17:52:12

Jak wspomniałem, korzystanie z javascript może sprawić, że przejście będzie płynniejsze, bez zakłócania tekstu lub obramowania. Zastąpienie przejść CSS tym wydawało się bardzo pomocne. Jest to użycie jQuery-użyj oczywiście wybranego narzędzia: 

// <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/

Nie jestem na tyle szczęśliwy, aby móc używać CSS3 bardzo często, więc nie jest to obszar wiedzy dla mnie - ale niestety musiałem usunąć istniejące CSS hover transitions, aby dostać go do praca. Możesz użyć techniki wykrywania javascript, aby powrócić do transtitions CSS, na przykład dodając class="js-enabled" do tagu body (z js oczywiście) i używając go w selektorze CSS.

Poza tym, myślę, że nie masz gazu, chyba że chcesz używać obrazów (bah) lub poczekać kilka lat, aż przeglądarki poradzą sobie z tym trochę lepiej (grr). Nie bierz tego jako Ewangelii, ktoś może mieć rozwiązanie dla ciebie - ale pomyślałem, że przynajmniej zaoferuję obejście.

 3
Author: Wesley Murch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-22 15:03:23