Articles of css

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?

Tamanho da imagem CSS, como preencher, não esticar?

Eu tenho uma imagem e quero definir uma largura e altura específicas (em pixels) Mas se eu definir largura e altura usando css ( width:150px; height:100px ), a imagem será esticada, e pode ser feia. Como preencher imagens para um tamanho específico usando CSS e não esticá- lo? Exemplo de imagem de preenchimento e alongamento: […]

CSS – mostra apenas a borda do canto

Eu estou querendo saber se é possível em CSS ou Jquery para fazer uma borda, mas apenas para canto. Algo assim: **** **** * * * * CONTENT * * * * **** ****

Use icons incríveis de fonts em CSS

Eu tenho algumas CSS que se parece com isso: #content h2 { background: url(../images/tContent.jpg) no-repeat 0 6px; } Eu gostaria de replace a imagem com um ícone do Font Awesome . Eu não vejo de qualquer maneira para usar o ícone no CSS como uma imagem de fundo. É possível fazer supondo que as stylesheets […]

Existe alguma “suavização de fonte” no Google Chrome?

Eu estou usando o google webfonts e eles estão bem em tamanhos de fonte super grandes, mas em 18px, eles parecem horríveis. Eu li aqui e ali que existem soluções para suavizar fonts, mas eu não encontrei nenhum lugar que explica isso claramente e os poucos trechos que encontrei não funcionam de todo. Meu h4 […]

Como alterar uma imagem de botão de input usando CSS?

Então, eu posso criar um botão de input com uma imagem usando Mas não consigo o mesmo comportamento usando CSS. Por exemplo, eu tentei onde “myButton” é definido no arquivo CSS como .myButton { background:url(/images/Btn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; } Se isso é tudo que eu queria fazer, eu poderia usar […]