Articles of css

Como alterar / remover definições de classs CSS em tempo de execução?

Eu sei que é possível adicionar novas definições de classs CSS em tempo de execução através de JavaScript. Mas… Como alterar / remover definições de classs CSS em tempo de execução? Por exemplo, suponha que eu tenha a class abaixo: .menu { font-size: 12px; } O que eu quero é, em tempo de execução, alterar […]

A background-position-x (background-position-y) é uma propriedade CSS padrão do W3C?

Estou preocupado com background-position-x e background-position-y . O Gecko (Firefox) e o Presto (Opera) não os suportam, mas o Webkit (Chrome, Safari) … Alguém sabe (com referências oficiais) se isso é (ou será) incluído no padrão?

Por que o @ font-face está jogando um erro 404 nos arquivos woff?

Estou usando o @font-face no site da minha empresa e funciona / parece ótimo. Exceto Firefox e Chrome lançará um erro 404 no arquivo .woff . IE não lança o erro. Eu tenho as fonts localizadas na raiz, mas eu tentei com as fonts na pasta css e até mesmo dando o URL inteiro para […]

Raio de borda de inserção com CSS3

Existe uma maneira de criar um raio de borda com css3? (Sem imagens) Eu preciso de um raio de borda como este:

CSS para definir tamanho de papel A4

Eu preciso simular um papel A4 na web e permitir a impressão desta página como é mostrar no navegador (Chrome, especificamente). Defino o tamanho do elemento para 21 x 29,7 cm, mas quando envio para impressão (ou pré-visualização) ele corta minha página. Veja este exemplo ao vivo ! body { margin: 0; padding: 0; background-color: […]

Como criar um círculo com links no lado da borda

Eu estou tentando fazer um círculo como este . Eu consegui fazer isso no violino, mas o problema é que eu preciso de cada lado laranja para ser um link e não posso fazê-lo com bordas. Se alguém puder me ajudar com isso, serei muito grato. #circle { width: 200px; height: 200px; border-radius: 50%; background: […]

Bootstrap 3 Navbar com Logo

Eu quero usar a barra de navegação padrão do Bootstrap 3 com um logotipo de imagem em vez de marca de texto. Qual é a maneira correta de fazer isso sem causar problemas com diferentes tamanhos de canvas? Eu assumo isso como um requisito comum, mas ainda não vi um bom exemplo de código. Um […]

Por que os pseudo-elementos: before e: after exigem uma propriedade de ‘conteúdo’?

Dado o seguinte cenário, por que o seletor: after requer uma propriedade de conteúdo para funcionar? .test { width: 20px; height: 20px; background: blue; position:relative; } .test:after { width: 20px; height: 20px; background: red; display: block; position: absolute; top: 0px; left: 20px; } Observe como você não vê o pseudo elemento até especificar a propriedade […]

Display: Bloco Inline – O que é esse espaço?

Inline Blocks tem esse espaço estranho entre eles. Eu poderia viver com isso, até um ponto em que, se eu carregar mais conteúdo com uma Chamada AJAX, o pequeno espaço vai embora. Eu sei que estou perdendo alguma coisa aqui. div { width: 100px; height: auto; border: 1px solid red; outline: 1px solid blue; margin: […]

Devo evitar o uso! Importante em CSS?

Algumas vezes !important é útil, por exemplo se eu tiver definido estilo comum para todos os links no site (seletor, digamos, a ), mas quando eu quiser sobrescrever algumas regras eu tenho as seguintes opções: Use um seletor mais específico (mais longo) Use !important Qual o caminho é melhor e pode haver algumas orientações?