Centralizar imagem na vertical com JavaScript

Postado por: Pedro Rogério em
  • 8 mar
  • 7

No post anterior mostrei como é possível centralizar uma imagem na horizontal e vertical com CSS, independente do tamanho da imagem. A solução utilizava algumas propriedades CSS e uma tag <span> vazia no HTML. Para os semanticistas de plantão isso é um crime.

O que podemos fazer então, criar aquela tag <span> via JavaScript, ou então utilizar uma solução com a utilização de jQuery e o resultado final obtido será o mesmo. Primeiro, vamos a marcação HTML, observe que remove a tag span do código utilizada no exemplo anterior e adicionei uma classe a imagem só para identificação no JavaScript:

<div class="box">
    <img class="centralized" src="img1.jpg" alt="" title="" />
</div>

Continuar lendo »

Centralizar imagem na horizontal e vertical com CSS

Postado por: Pedro Rogério em
  • 3 mar
  • 9

Imagine a seguinte situação: Você precisa centralizar uma imagem dentro de um box maior que a imagem e com dimensões atribuídas, caso você insira a imagem via CSS, é fácil daixá-la centralizada, mas isso não é possível quando estamos utilizando a tag <img>

Você poderia simplesmente fazer o seguinte:

  • Aplicar display:block a imagem
  • Definir as margens esquerda e do topo para a imagem deixando-a centralizada dentro do box.

Mas o grande problema é que você pode ter imagens no formato retrato e paisagem, imagine uma galeria de fotos com fotos de diferentes tamanhos, você teria que definir um CSS para cada imagem para que elas ficassem centralizadas.

Continuar lendo »

CSS Sprites

Postado por: Pedro Rogério em
  • 27 jan
  • 14
CSS Sprites

Já falei aqui no blog uma vez sobre CSS Sprites, através de um vídeo tutorial, mas faltava algo mais prático para mostrar aos usuários. Com isso, vou postar aqui agora um exemplo simples de CSS Sprite baseado no Plugin para WordPress Sexy Bookmarks.

A marcação HTML é muito simples, e para isso vamos utilizar listas desordenadas:

<ul class="sharing-cl" id="text">
	<li><a class="sh-mail" href="">email</a></li>
	<li><a class="sh-feed" href="">feed</a></li>
	<li><a class="sh-tweet" href="">twitter</a></li>
	<li><a class="sh-face" href="">facebook</a></li>
	<li><a class="sh-su" href="">stumbleupon</a></li>
	<li><a class="sh-digg" href="">digg</a></li>
</ul>

Continuar lendo »

Páginas:«12345678910...28»