Geek asks and answers

Gradual italics?

Is there a way to gradually switch from plain text to italics, changing the angle so easily with each character?

+5
source share
5 answers

Robin’s idea really works ( DEMO ), but there wasn’t so much of this fiddle, I’m sure I can put them in one comment.

First of all, it spanis an element inline, but it transformworks with elements block. That way, you either use an element block, for example div, either p, or you set display: blockto span.

skew! skewX. skew , . Firefox 14, Firefox 15 - - Chrome, Safari Opera.

. Firefox, Opera IE .

.

- :

<div class="skewme">Tyrannosaurus Rex</div>

CSS

.skewme {
   -webkit-transform: skewX(-20deg);
      -moz-transform: skewX(-20deg);
        -o-transform: skewX(-20deg);
           transform: skewX(-20deg);
}

, .

HTML:

<div class="skewme1">Tyrannosaurus Rex</div>

CSS

.skewme1 {
    -webkit-animation: slowskew 1.5s infinite alternate;
           -moz-animation: slowskew 1.5s infinite alternate;
             -o-animation: slowskew 1.5s infinite alternate;
                animation: slowskew 1.5s infinite alternate;
}
@-webkit-keyframes slowskew {
    to { -webkit-transform: skewX(-20deg); }
}
@-moz-keyframes slowskew {
    to { -moz-transform: skewX(-20deg); }
}
@-o-keyframes slowskew {
    to { -o-transform: skewX(-20deg); }
}
@keyframes slowskew {
    to { transform: skewX(-20deg); }
}
+5

, SVG crazy-clever .

CSS3 2D . , . , . .

+3

, normal italic ( oblique, , -).

, , CSS-. :.

<span class="skew0">R</span><span class="skew1">R</span><span class="skew2">R</span><span class="skew3">R</span>


span { display: inline-block; }
.skew1 { transform: skewX(-5deg); }
.skew2 { transform: skewX(-10deg); }
.skew3 { transform: skewX(-15deg); }

skew() - Mozilla, - - , , .

Test at: http://jsfiddle.net/GtQXw/1/

+3
source

Yes - you need to create an image. Otherwise no

+1
source

You may be able to do this through SVG, but then you will lose the browser support that you get through the image. IE8 and earlier do not support SVG, IIRC.

+1
source

More articles:


All Articles