Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

calc não funcionou, banner do twitter sumiu

Deixei o trecho comentado porque não deu certo :/

.banner-twitter {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1;

    -webkit-transform: translate(6.5765em, -2.4745em) rotate(45deg);
            transform: translate(6.5765em, -2.4745em) rotate(45deg);        
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;


    /*-webkit-transform: translate(calc(0.707 * (3.5em - 100%) + 100%), calc(-.707 * 3.5em)) rotate(45deg);
            transform: translate((calc(0.707 * (3.5em - 100%) + 100%), calc(-.707 * 3.5em)) rotate(45deg);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;*/





    width: 14em;
    padding: 1em 0;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;

    font-size: 1.2em;
    font-family: "Open Sans Condensed", sans-serif;
}
3 respostas

Olá.

Tenta colocar qual é a unidade de medida do valor 0.707, por exemplo se for em, ela ficará assim: 0.707em.

Se não funcionar com você definindo a unidade de medida, avisa que procuro tentar outra coisa :-)

Olá Marco, na verdade percebi que tinha um parêntese a mais que está ocasionando o erro. Também percebi que parece que o Chrome já está suportando algumas propriedades do CSS3. Digo isso porque era a propriedade transform sem o prefixo -webkit que estava sem com o parêntese sobrando. Aproveitando o gancho, como saber quais as propriedades que o Chrome suporta atualmente?

solução!

Geovane, você consegue ver o suporte de cada propriedade em cada navegador no site: http://caniuse.com

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software