Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Usuário maníaco

[Resolvido] Como fazer este efeito?

Por , em Desenvolvimento frontend

Recommended Posts

Usuário maníaco    0

Usuário maníaco
Postado

Olá galera, gostaria de saber como fazer o efeito em meus títulos usado nesse exemplo na imagem? Muito grato.

2ahilad.jpg

 

Já tentei de várias maneiras, mas de nem uma forma fica igual. Estou esperando ajuda aqui com o CSS. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Go Back    0

Go Back
Postado 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
.menu{
  font-size:12px;
  font-family:verdana;
  padding:5px 5px 5px 5px;
  color:#000;
  background-color:#FFF;
}

.menu:hover{
  cursor:pointer;
  font-size:12px;
  font-family:verdana;
  padding:5px 5px 5px 5px;
  color:#FFF;
  background-color:#3399FF;
}
</style>
</head>
<span class='menu'>
Teste
</span>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Consiste em deixar o line-height do tamanho da fonte:

 

p {
background: #aaf;
color: #fff;
font: bold 14pt/0.7em Tahoma, sans-serif;
margin: 0;
padding: 0;
text-indent: 7px;
text-transform: uppercase;
}

 

<p>Latest news</p>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gui.BAR    0

Gui.BAR
Postado

Lembre-se de que você pode colocar o line-height do mesmo tamanho da fonte também usando o valor 1, que representa 1 x font-size.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito