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>

Agora vamos ao JavaScript, também muito simples e o código está comentado facilitando a compreensão:

$(window).load(function(){
	//Pega a altura do seu pai e armazena em uma variável
	var parent_height = $('.centralized').parent().height();

	//Pega a altura da imagem e armazena em uma variável
	var image_height = $('.centralized').height();

	//Calcula a altura do pai menos a altura da imagem e divide por 2
	//É onde obtemos a distancia que a imagem deve ficar do topo e a armazenamos em uma variável
	var top_margin = (parent_height - image_height)/2;

	//Aqui é onde aplicamos a margem do topo a imagem
	$('.centralized').css( 'margin-top' , top_margin);
});

Observem agora o exemplo.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Slideshow com jQuery
• Contar e limitar caracteres em textarea
• IE6 Double Margin / Duplicate Characters bug fix usando jQuery
• jQuery Delay Plugin
• Adicionar ícones a links externos

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.

A solução

Centralizar imagens na horizontal não é difícil, se a imagem está com seu comportamento padrão de display:inline, então um simples text-align:center já resolveria o problema e funcionaria bem em todos os browsers.

Agora para centralizar imagens na vertical, em browsers modernos, uma simples solução é atribuir display: table-cell; e vertical-align: middle ao elemento container. Só que como nessa vida nem tudo são flores, em browsers como o IE7 e inferiores essa técnica não funciona.

Para o IE7, a solução é criar uma espécie de linha, tendo como altura a altura do container e utilizar novamente vertical-align: middle. A propriedade line-height infelizmente não pode ser usada para conseguir esse efeito uma vez que ela não funciona corretamente no IE7/Win na presença de imagens. Utilizar também uma fonte com algum tamanho grande (sem especificar line-height) é problemático, por que o tamanho da caixa gerada é ligeiramente maior que o tamanho da fonte.

Felizmente o IE7 tem suporte parcial a propriedade display: inline-block. Se um elemento vazio que possua a propriedade inline-block (por exemplo um <span>) é adicinado dentro do elemento container e é atribuído ao mesmo height:100% e vertical-align: middle então ela permite justamente conseguir o que queremos.

A solução utiliza das propriedades display: table-cell e uma tag <span> extra com display: inline-block. Funciona em todos os browsers, inclusive no Internet Explorer.

Código CSS

No exemplo foi utilizado um elemento container com a classe box e o código para o IE será descrito aqui através de comentarios condicionais:

<style type="text/css">
.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.box * {
    vertical-align: middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.box span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

A marcação HTML é muito simples e é descrita logo abaixo:

<div class="box">
    	<span></span>
        <img src="" alt="" title="" />
    </div>

Vejam o exemplo em funciomanento. Essa técnica foi originalmente desenvolvida pelo desenvolvedor Bruno, veja mais informações no post original.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• CSS Sprites
• ie-css3.js: Pseudo seletores CSS3 no Internet Explorer
• Menu estilo cardápio com CSS
• CSS Dropdown menu sem JavaScript ou hacks
• O que é o Acid Test?

Nesse tutorial vamos aprender a desenvolver um simples Slideshow de imagens com a utilização do jQuery que pode ser aplicado em diversos lugares devido a sua simplicidade. Esse tutorial foi criado originalmente por Jon Raasch. Inclusive é ele que uso aqui no meu site para mostrar meu portifólio.

Repare na simplicidade do HTML:

<div id="slideshow">
    	<img class="active" src="images/image1.jpg" alt="" title="" />
        <img src="images/image2.jpg" alt="" title="" />
        <img src="images/image3.jpg" alt="" title="" />
        <img src="images/image4.jpg" alt="" title="" />
</div>

Basicamente você irá precisar de uma div, e dentro da mesma é onde você irá colocar as imagens para as transições, coloque quantas desejar. Somente adicione a classe active a primeira imagem.

Algumas considerações também devem ser feitas no CSS para que ele funcione corretamente, elas serão listadas abaixo:

#slideshow {
    position:relative;
    height:376px;
    width:490px;
    margin:0 auto;
}

#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow img.active {
    z-index:10;
}

#slideshow img.last-active {
    z-index:9;
}

Na div #slideshow é onde você deve definir a altura e largura do box que irá conter as imagens. Se as imagens tiverem o mesmo tamanho seu slideshow ficará mais elegante. Agora, o JavaScript, que como podem ver, também é muito simples:

function slideSwitch() {
    var $active = $('#slideshow img.active');

	$active.addClass('last-active');

	// verifica se existe um próximo objeto na div #slideshow, caso ele nao exista, retorna para o primeiro
    var $next =  $active.next().length ? $active.next() : $('#slideshow img:first');

	// Codigo que define as transicoes entre as imagens
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
	//Executa a função a cada 5 segundos
	setInterval( "slideSwitch()", 5000 );
});

Vejam agora o exemplo do Slideshow.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Centralizar imagem na vertical com JavaScript
• Contar e limitar caracteres em textarea
• IE6 Double Margin / Duplicate Characters bug fix usando jQuery
• jQuery Delay Plugin
• Adicionar ícones a links externos

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>

Não vou entrar em detalhes em relação ao CSS, o único segredo é que definimos que todos os links terão a mesma imagem, após, em suas classes, basta trocar a posição da imagem com background-position:

.sharing-cl{
	  overflow:hidden;
	  margin:0;
	  padding:0;
	  list-style:none;
	}
	.sharing-cl a{
	  overflow:hidden;
	  width:75px;
	  height:30px;
	  float:left;
	  margin-right:5px;
	  text-indent:-200px;
	  background:url("http://www.cssnolanche.com.br/lab/css-sprites/share-sprite.png") no-repeat;
	}
	a.sh-su{background-position:-210px -40px;}
	a.sh-feed{background-position:-70px -40px;}
	a.sh-tweet{background-position:-140px -40px;}
	a.sh-mail{background-position:0 -40px;}
	a.sh-digg{background-position:-280px -40px;}
	a.sh-face{
	  margin-right:0;
	  background-position:-350px -40px;
	}
	a.sh-mail:hover{background-position:0 1px;}
	a.sh-feed:hover{background-position:-70px 1px;}
	a.sh-tweet:hover{background-position:-140px 1px;}
	a.sh-su:hover{background-position:-210px 1px;}
	a.sh-digg:hover{background-position:-280px 1px;}
	a.sh-face:hover{
	  background-position:-350px 1px;
	}
	#text{
	  margin-top:3em;
	  font-weight:bold;
	  font-family:helvetica,arial,sans-serif;
	}
	#text a{
	  text-indent:0;
	  height:auto;
	  text-align:center;
	  font-size:11px;
	  padding-top:35px;
	  color:#999;
	  text-decoration:none;
	}

Vejam agora o exemplo. Esse post foi originalmente publicado no blog Web Developer Juice.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Centralizar imagem na horizontal e vertical com CSS
• ie-css3.js: Pseudo seletores CSS3 no Internet Explorer
• Menu estilo cardápio com CSS
• CSS Dropdown menu sem JavaScript ou hacks
• O que é o Acid Test?

ie-css3.js é uma biblioteca JavaScript que permite ao Internet Explorer identificar os Pseudo-seletores CSS3 e aplique estilos aos mesmos em sua página. Sua utilização é muito simples, basta incluir o arquivo JavaScript em sua página que você já pode começar a utilizar os seletores CSS3.

Requerimentos

Esse script depende do Framework DOM Assistant para que funcione corretamente, basta incluí-los no <head> de sua página:

<head>
	<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
	<script type="text/javascript" src="ie-css3.js"></script>
</head>

Seletores suportados

Dentre os seletores que agora estarão disponíveis, podemos utilizar os seguintes: :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, nly-child, :first-of-type, :last-of-type, nly-of-type, :empty

Considerações

Por se tratar de uma biblioteca que ainda está em desenvolvimento, algumas considerações devem ser feitas:

• As chamadas dos arquivos CSS devem ser feitas através da tag <link />, e já dentro dela você pode utilizar @import sem problema algum. Estilos inline não funcionam.
• O arquivo CSS deve estar hospedado no mesmo domínio da página em questão.
• O protocolo file:// não funcionará por questões de segurança.
• Seletor :not() não é suportado.
• A emulação não é dinâmica, uma vez aplicado os estilos as visualizações no DOM não podem ser feitas.

Esse script é compatível com as versões 5,6,7 e 8 do Internet Explorer.

Via: aNieto2K

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Abas com CSS utilizando :target
• CSS Hacks para IE, Firefox, Opera, Safari, Konqueror
• Compatiblidade CSS no Internet Explorer
• Border-image no Firefox 3.1
• Centralizar imagem na horizontal e vertical com CSS

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• BlueTrip CSS Framework
• 22 JavaScript Frameworks
• CSS Frameworks

Esse template extremamente simples nos mostra um pouco do que poderemos utilizar futuramente da CSS3, principalmente em se tratar de bordas arredondadas e fontes que não estão instaladas no PC do usuário. Ele funciona corretamente em browsers como o Firefox 3.5+ e Safari 4+. Nos browsers que não suportam essa especificação, ocorre uma pequena degradação no layout, mas nada que impeça ele de ser usado.

Download. Vi no site allcreatives.net.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• ie-css3.js: Pseudo seletores CSS3 no Internet Explorer
• CSS3 Multi-column layout
• Inset Text com CSS3
• Cores CMYK em CSS: úteis ou inúteis?
• Cores em CSS3

A popularidade dos monitores wide screen aumenta a cada dia, ou seja, os monitores aumentam na largura, já os sites, é o oposto. Levando em consideração que a resolução mais comum hoje em dia é a de 1024×768, a maioria dos sites hoje não utiliza todo esse espaço disponível nas laterais do site.

Nessa hora quem se dá bem são os layouts flexíveis, mas pecam em manter uma linha útil de comprimento. Especialistas em design dizem que o comprimento de texto ideal para uma linha deve ser entre 8 a 12 palavras. A mídia impressa, especialmente os jornais, não está nem aí para isso, sabe por quê? Eles podem dividir o texto em várias colunas.

Como um Web Designer, você pode tentar manter o fluxo de texto bem equilibrado entre várias colunas. Mas como você sabe a web não é um meio onde você possui total controle sobre a apresentação final da informação.

Seu layout pode ir para o espaço caso seus usuários utilizem um tamanho de fonte diferente da que você especificou. Da mesma forma quando você passa do texto estático do HTML para um texto que vem do banco de dados, você pode perder todo o controle sobre a estrutura. Sua marcação HTML então deve acomodar todo o conteúdo em um ambiente como o tamanho desconhecido.

Esse problema não é novo. Aliás, muito poucas pessoas têm considerado o problema, inclusive os membros do W3C.

CSS3 module: Multi-column layout

O modulo Multi-column layout das CSS3 proposta pelo W3C visa estender o modelo de box atual do CSS. A intenção do módulo é que é permitir que o conteúdo flua para várias colunas dentro de um elemento. Ele oferece novas propriedades CSS que permitem aos desenvolvedores especificar em quantas colunas um elemento deve ser processado. O navegador se encarrega de formatar o texto de modo que as colunas sejam balanceadas.

A proposta de novas propriedades são as seguintes:

• ‘column-count’: Determina o número de colunas em que o conteúdo do elemento deve fluir.
• ‘column-width’: Determina a largura ideal de cada coluna.
• ‘columns’: Declaração curta para as propriedades ‘column-width’ e ‘column-count’.
• ‘column-gap’: Determina o padding(área) entre as colunas.
• ‘column-rule-color’: Determina a cor da borda entre as colunas.
• ‘column-rule-style’: Determina o estilo da borda, o mesmo previsto na CSS 2.1.
• ‘column-rule-width’: Determina a largura da borda entre as colunas.
• ‘column-rule’: Declaração curta para as propriedades ‘column-rule-color’, ‘column-rule-style’ e ‘column-rule-width’.
• ‘column-span’: Determina quantas colunas um elemento abrange.

Para ver uma descrição detalhada de cada um desses elementos, visite o W3C Working Draft.

Suporte dos browsers

Os browsers atuais que possuem suporte a essa especificação são os seguintes:

• Firefox 2.0+
• Safari 3.1+
• Google Chrome 1.0+
• Internet Explorer 8 e Opera 10 não davam suporte até o fechamento desse post.

Alternativas via JavaScript

Michael van Ouwerkerk, em 2002, escreveu um JavaScript que divide o conteúdo de um elemento e reorganizá-lo em várias colunas. Dúvidas sobre como implementar, basta visitar o site do desenvolvedor.

Exemplo

Para esse exempo, vamos utilizar a seguinte marcação HTML:

<div id="intro">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Aenean eget erat id massa sodales.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Aenean eget erat id massa sodales.</p>
    ....
    </div>

Como podem ver, tudo muito simples, mas o grande segredo está no CSS e é onde iremos colocar em prática as propriedades CSS mostradas acima:

#intro {
	-moz-column-count:4;
	-moz-column-gap:20px;
	-webkit-column-count:4;
	-webkit-column-gap:20px;
	column-count:4;
	column-gap:20px;
}

Veja aqui o exemplo em ação onde o texto foi dividido em 4 colunas.

Referências

Esse post foi escrito com base no original de A List Apart e sofreu algumas alterações.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• ie-css3.js: Pseudo seletores CSS3 no Internet Explorer
• CSS3 Template Layout: ‘Nearly Circular’
• Inset Text com CSS3
• Cores CMYK em CSS: úteis ou inúteis?
• Cores em CSS3

Primeiro passo – Definir uma cor primária

O primeiro passo é escolher uma cor para o texto, ela deve ser mais escura que o fundo do site. Isso irá dar ma sensação de profundidade aos usuários

Segundo passo – Definir uma cor para o relevo

Para obter o efeito de 3D precisamos ter uma linha fina de sombreamento em torno de nosso texto. Ao seguir o texto, ele normalmente vai ser uma sombra, dando a ilusão de profundidade. A tonalidade da cor deve ser mais leve que a cor de fundo. Para chegar a cor correta, utilize algum programa para edição de imagens e obtenha tonalidade desejada.

Código

.inset-text {
	  font-size: 60px;
	  color: #566F89;
	  text-shadow: 1px 1px 0px #E4F1FF;
	  font-weight: bold;
 }

Já expliquei em um post anterior a sintaxe de text-shadow, aconselho você a dar uma lida lá caso o código acima não fique claro para você. Mas esse código é bem simples de entender, o que fizemos foi simplesmente colocar uma sombra de 1px ao texto e delocá-la 1 px na horizontal e 1 px na vertical e depois definir um valor 0 para o blur.

Exemplo

Vejam aqui um exemplo de Inset text com CSS3. Esse tutorial foi baseado no post do blog StylizedWeb

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• ie-css3.js: Pseudo seletores CSS3 no Internet Explorer
• CSS3 Template Layout: ‘Nearly Circular’
• CSS3 Multi-column layout
• Cores CMYK em CSS: úteis ou inúteis?
• Cores em CSS3

Se você tem interesse em aprender a desenvolver um menu desse tipo, vamos utilizar de listas de definição para o desenvolvimento do menu. Observe abaixo a marcação HTML:

<dl>
    	<dt>Nome do prato</dt>
        <dd class="price">Valor</dd>
        <dd class="ingredients">Descrição dos ingredientes</dd>
</dl>

Para cada listagem de prato vamos utilizar de uma lista de definição com uma tag dt que conterá o nome do prato, uma tag dd com uma classe que foi definida como “price” para conter o valor do prato e uma outra tag dd com uma classe “ingredients” que conterá a descrição dos ingredientes. Utilize de quantas tags dt e dd forem preciso para inserir pratos na lista.

Com a marcação HTML pronta, vamos partir para o CSS:

dl {background: url(dot.gif) repeat-x 0 1.6em; margin:0 0 1em; overflow:auto; width:100%}
dt, dd.price{background-color:#fff; font-size:1.8em; font-weight:bold}
dt {color:#F70000; float:left; padding-right:3px}
dd {margin:0}
dd.price{color:#aaa; float:right; padding-left:3px}
dd.ingredients{color:#555; font:italic 1.2em Georgia,Times,sans-serif; float:left; padding:3px 0; width:100%}

O CSS não tem muito segredo, mas vou listar alguns pontos chave para que funcione corretamente.

• Na tag dl foi utilizado overflow:auto somente para “limpar o float”, experimente removê-lo para ver o que acontece.
• Na tag dd com a classe ingredients é utilizado width:100% pois ele simula um clear:both. A diferença é que alí a tag ocupa todo o espaço disponível, evitando problemas.

HTML e CSS ok, vamos ao exemplo de um Menu estilo cardápio com css. Você pode estilizá-lo como quiser. Esse é um bom exemplo para criação de um cardápio on-line para restaurantes ou prefácio de algum livro.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Centralizar imagem na horizontal e vertical com CSS
• CSS Sprites
• ie-css3.js: Pseudo seletores CSS3 no Internet Explorer
• CSS Dropdown menu sem JavaScript ou hacks
• O que é o Acid Test?