Centralizar imagem na horizontal e vertical com CSS

Postado por: Pedro Rogério em

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 »

Central Server

CSS Sprites

Postado por: Pedro Rogério em
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 »

CSS Frameworks – Faça a escolha certa

Postado por: Pedro Rogério em

Com a proliferação e adoção dos Frameworks JavaScript, os desenvolvedores começaram a se perguntar se era viável utilizar ou não Frameworks CSS no desenvolvimento de suas aplicações. A partir de então surgiram vários Frameworks, alguns bem interessantes. Esse vídeo aborda a utilização de Frameworks CSS, os prós e contras, faça a escolha errada de um framework e você viverá sob suposições de código que não entende a mínima. Faça a escolha certa e trabalhe com código reutilizável. Veja o vídeo e faça a sua escolha:

Vídeo (Objeto multimídia)
Páginas:«1234567...24»