Texto piscando com CSS

Postado por: Pedro Rogério em
  • 3 ago
  • 8

O exemplo que vou citar nos faz voltar aos primeiros anos da Internet, onde tinhamos aquelas interfaces pobres. Com o tempo foram surgindo novos recursos, e um deles foi a tag blink, visando dar mais dinamismo as páginas Web, mas com a evolução do HTML, logo ela caiu em desuso. Mas ainda existe uma forma de implementá-la através de CSS:


<style type="text/css">
.blink { text-decoration: blink; }
</style>

Nosso HTML fica da seguinte forma:


<span class="blink">Aqui você coloca o texto</span>

Veja um exemplo em funcionamento, mas muito cuidado, por que poucos browsers ainda a suportam, eu fiz alguns testes e ele funcionou perfeitamente somente no Firefox, no Opera 9 e no IE não funcionou, se alguém puder testar em outros browsers.

<update 22-11-2006>Ele também não funciona no IE 7</update>

Guia CSS – 7ª Parte: Margens

Postado por: Pedro Rogério em
  • 1 ago
  • 3

A propriedade margem declara a margem entre um elemento do HTML e os elementos em torno dela. A propriedade margem pode ser ajustada para o alto, direita, abaixo e a esquerda:


margin-top: valor definido pelo usuário ou auto;
margin-right: valor definido pelo usuário ou auto;
margin-bottom: valor definido pelo usuário ou auto;
margin-left: valor definido pelo usuário ou auto;

Você tem a escolha de 3 valores para a propriedade margem, que são as seguintes:

  • Comprimento: em pixels
  • Porcentagem
  • Auto

Continuar lendo »

CSS display:none acessível aos leitores de tela

Postado por: Pedro Rogério em
  • 31 jul
  • 2

Quando estamos desenvolvendo um site, é habitual e recomendável utilizar-mos links para pular entre seções para aqueles que utilizam leitores de tela possam navegar rapidamente entre as várias seções da página sem ter que esperar que a mesma seja lida totalmente. Por exemplo, é recomendado criar-mos links que saltem do menu ao conteúdo para que o mesmo não seja lido várias vezes dentro de um mesmo site.

Esses links ficam invisíveis para aqueles que usam navegadores normais. A técnica mais usada é a propriedade display:none.


.oculto {
    display:none
}

Continuar lendo »

Truques para se trabalhar com unidades relativas: em

Postado por: Pedro Rogério em
  • 29 jul
  • 6

A unidade de medida relativa “em” tem como finalidade indicar o número de vezes que se deve aumentar o tamanho da letra em relação ao tamanho do elemento que a contém. Para uma melhor compreensão ao desenrolar deste post, verifique abaixo os valores em px para em:


1em = 10px
1.2em = 12px
1.5em = 15px

Muitas pessoas não sabem, mas o valor definido nos navegadores para o tamanho das fontes é de 16px, então qualquer elemento dentro de <body> terá o seguinte tamanho:


1em = 16px
2em = 32px
0.5em = 8px

Mas, se por um acaso, definir-mos um tamanho para um elemento, por exemplo p, que está dentro de body, o elemento filho estabelece seu tamanho em relação ao elemento pai. Por exemplo, se o tamanho das fontes no navegador está definido como 16px:


body { font-size:0.5em; }
p { font-size:2em; }

O elemento p vai ter um tamanho de 16px, não de 32px, por que ele “herda” o tamanho definido em body (a metade, 8px) e o dobra (2×8=16). Dùvidas beba direto da fonte.

CSS browser selector

Postado por: Pedro Rogério em
  • 26 jul
  • 2

Não, chega de usar hacks para corrigir erros de layout, eu acabei descobrindo um JavaScript que com ele é possível criar estilos específicos para cada browser, ou seja, você pode criar estilos para o Opera, para o IE, para os browsers baseados na plataforma Gecko(Mozilla), e ainda fica livre dos hacks, que por sinal é muito interessante.

Guia CSS – 6ª parte: Spans

Postado por: Pedro Rogério em
  • 25 jul
  • 3

Spans são similares as divisões, a não ser que sejam um elemento in-line ou um elemento de bloco. Nenhuma quebra de linha é criada quando um span é declarado. Você pode por exemplo usar span para estilizar áreas específicas do seu texto, como você pode ver no exemplo abaixo:

<span class="italico">Esse texto irá ficar em itálico</span>

O CSS fica da seguinte forma:


.italico { font-style:italic; }

Tradução do artigo original de: CSS Basics.

Páginas:«1...161718192021222324»