4

Boas, eu tenho um paragrafo e quero que ele fique com font-style: italic; quando passo o rato por cima, que propriedades devo por no :hover?! Gostava que fosse uma transição de 0.3segundos

3
  • 2
    Infelizmente não tem como fazer transição com estilo de fonte.
    – Sam
    23/12/2017 às 13:49
  • pode usar javascript?
    – MagicHat
    23/12/2017 às 14:45
  • @MagicHat pode, desde que o script seja uma coisa simples para eu entender :D mas já tenho uma resposta para aquilo que queria , não precisa de se dar ao trabalho
    – Paul Bob
    23/12/2017 às 19:42

2 Respostas 2

6

Não tem como, primeiro porque o único pseudo-elemento que existe para linhas é o ::first-line e ele só vai pegar a primeira linhas, segundo o font-style diferente do font-weight não suporta valores numéricos para que seja feito uma transição entre o não itálico e o itálico.

Mas nem tudo esta perdido

Você pode simular o itálico usando transform e se considerar parágrafos por <p> será possível, um exemplo funcional:

Nota: para evitar o efeito de pulo (o tal bug), basta adicionar: transform: skewX(0.001deg);

.container p {
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

.container p:hover {
    transform: skewX(-20deg);
}
<div class="container">
     <p>foo bar baz</p>

     <p>Hello World!</p>

     <p>Olá Mundo!</p>
</div>

Claro que isto não é itálico, se você tiver estilos nos parágrafos, como bordas ou background eles poderão ser afetados também, para evitar isto você pode adicionar <span> para cada paragrafo sem estilo e fazer assim por exemplo:

.container p {
    background: #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 5px;
}

.container p span {
    display: inline-block;
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

.container p:hover span {
    transform: skewX(-20deg);
}
<div class="container">
     <p>
         <span>foo bar baz</span>
     </p>

     <p>
         <span>Hello World!</span>
     </p>

     <p>
         <span>Olá Mundo!</span>
     </p>
</div>


Tentando remover o blurry durante a animação

Infelizmente o titulo diz "tentando" porque não é algo 100% garantido, isso depende muito do hardware e do software que usa, o problema do efeito "blurry" nos textos é bem comum no Chrome, as técnicas (tentativas) que existem são:

Usar -webkit-font-smoothing: subpixel-antialiased;:

Deve ficar assim:

.container p {
    transition: transform .3s ease-in-out;
    -webkit-font-smoothing: subpixel-antialiased;
}

E no segundo exemplo:

.container p span {
    display: inline-block;
    transition: transform .3s ease-in-out;
    -webkit-font-smoothing: subpixel-antialiased;
}

No entanto em computadores com driver de vídeo genérico provavelmente não vai funcionar como esperado, ou talvez não funcione de maneira alguma.

Usar transform: translateZ(0) ...

Isso é um hack, ele por algum motivo no Chrome ajuda na aceleração de renderização, mas pelo que li em alguns casos funciona e em outros não, provavelmente depende do equipamento do usuário:

.container p:hover span {
    transform: translateZ(0) skewX(-20deg);
}

E no segundo exemplo:

.container p:hover span {
    transform: translateZ(0) skewX(-20deg);
}

Pode experimentar ambos, ainda sim como citei antes, provavelmente vai depender do equipamento (hardware e software).


Nota: @keyframes não resolve o problema do efeito blurry, o que ocorreu na resposta do hugo é que ele usou a fonte maior, se usar inicialmente transform: skewX(0.001deg);, antes da transição e colocar 2em da fonte vai ficar quase idêntico ao keyframes

#comtransform {
    font-size: 2rem;
    font-weight: bold;
    color: blue;
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

#comtransform:hover {
    transform: skewX(-20deg);
}
<p id="comtransform">@keyframes</p>

6
  • Exactamente o que queria, obrigado ficou excelente =))
    – Paul Bob
    23/12/2017 às 19:43
  • não tem como retirar o blur enquanto as letras inclinam?!
    – Paul Bob
    23/12/2017 às 20:36
  • 1
    @Droopy infelizmente não, é o efeito da distorção e o tipo da fonte que causam isto.
    – Syzoth
    23/12/2017 às 20:42
  • Acabei de utilizar a tentativa de retirar o blurry mas infelizmente não funcionou :s
    – Paul Bob
    25/12/2017 às 12:45
  • 1
    acabei de adicionar esse pormenor e corrigiu logo o blur, uma solução bastante inteligente =)) obrigado pela ajuda
    – Paul Bob
    28/12/2017 às 14:57
1

Fiz um teste usando @keyframes no lugar do transition E o resultado ficou até interessante, diminuiu bastante aquele buggizinho na altura do texto.

Fiz um exemplo simples, veja o resultado.

p#anima {
    font-size: 2em;
    font-weight: bold;
    color: red;
    transition: all 300ms;
}
p#anima:hover {
    transform: skewX(-10deg);
}

p#key{
    font-size: 1.2rem;
    font-weight: bold;
    color: blue;
}
p#key-small{
    font-size: 0.6rem;
    font-weight: bold;
    color: blue;
}
p#key-big{
    font-size: 3rem;
    font-weight: bold;
    color: blue;
}
p#key:hover, p#key-small, p#key-big {
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 500ms; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
p#key:not(:hover), p#key-small:not(:hover), p#key-big:not(:hover) {
    -webkit-animation-name: rever; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 500ms; /* Safari 4.0 - 8.0 */
    animation-name: rever;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from   {transform: skewX(-3deg);}
    to {transform: skewX(-10deg);}
}
/* Standard syntax */
@keyframes example {
    from   {transform: skewX(-3deg);}
    to {transform: skewX(-10deg);}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes rever {
    from   {transform: skewX(-8deg);}
    to {transform: skewX(-0deg);}
}
/* Standard syntax */
@keyframes rever {
    from   {transform: skewX(-8deg);}
    to {transform: skewX(-0deg);}
}
<p id="anima">transition transform</p>

<p id="key">@keyframes</p>

<p id="key-small">@keyframes-small</p>

 <p id="key-big">@keyframes-big</p>

7
  • O 25% e o 50% podem ser removidos que o efeito será o mesmo, ao menos no Chrome.
    – Syzoth
    26/12/2017 às 16:53
  • @GuilhermeNascimentoP. Nem tinha reparado rss, parece que só por ser @keyframe já atenua o efeito. Nesse caso seria melhor usar from {transform: skewX(0deg);} to {transform: skewX(-10deg);} []´s
    – hugocsl
    26/12/2017 às 16:58
  • 1
    Exatamente Hugo! Somente from e to fica perfeito! - Só pra constar, efeito do "pulo" (o tal bug) foi removido com transform: skewX(0.001deg);, veja a resposta: pt.stackoverflow.com/a/264942/3635
    – Syzoth
    26/12/2017 às 16:59
  • Outra coisa que notei, o keyframe não removeu o blur, foi o tamanho da fonte que você usou que fez o efeito desaparecer, ou seja isso não resolve, se usar a fonte pequena o efeito blur ainda ocorre. Só pra avisar mesmo.
    – Syzoth
    26/12/2017 às 17:01
  • @GuilhermeNascimentoP. na verdade o que mudou mesmo foi aquele pulinho que a fonte dava no início. O Blur não tinha melhorado muito mesmo não. Parece que a formatação do Estilo da font também pode afetar um pouco esse efeito de Blur indesejado. Parece que quando o Elemento já tem o skewX antes da animação acontecer o "saltinho" da fonte some!
    – hugocsl
    26/12/2017 às 17:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .