Bordas internas em imagens com CSS

Postado por: Pedro Rogério em

Bordas internas em imagens com CSS

Você alguma vez já tentou fazer aqueles efeitos de bordas internas em imagens semelhantes a utilizadas no sites da Globo.com e não conseguiu ou não teve saco algum para descobrir como fazer? Pois bem, vou postar aqui uma forma muito simples de conseguir esse efeito que acabei encontrando aqui.

Primeiro vamos a marcação HTML, bem simples, utilizaremos listas para estruturar as imagens:

<ul>
	    <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
</ul>

No HTML nenhum segredo até agora, agora vamos iniciar o processo de verdade aplicando o CSS:

img {border:none}
ul {margin:0; padding:0; width:236px}
ul:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
ul li {list-style-type:none; float:left; margin:0 3px 3px 0}
ul li a, ul li a img {float:left; overflow:hidden}
ul li a:hover {border:4px solid #f00}
ul li a:hover img {margin:-4px}

Agora vamos a explicação de cada item:

  • Linha 1: Retirei as bordas padrão do link, que por default são azuis, nesse momento minha imagem não pode ter borda alguma.
  • Linha 2: Defini uma largura para meu objeto container (ul) para que as imagens ficassem uma ao lado da outra.
  • Linha 3: Uma técnica utilizada para “limpar floats”, prometo fazer um post sobre isso qualquer dia desses.
  • Linha 4: Adicionei float:left para colocar as imagens uma do lado da outra.
  • Linha 5: É obrigatório o uso de float e oveflow:hidden para que as imagens não fiquem sambando na tela.
  • Linha 6: É aí onde eu defini a cor e espessura da borda da imagem.
  • Linha 7: Onde a mágica toda acontece, quando eu defini 4px de borda para a imagem no hover do link, para que o efeito ocorra corretamente eu preciso deslocar as margens da imagem com seus valores negativos nas 4 direções (top, right, bottom e left), por isso o valor de margin:-4px.

Agora vejam o exemplo em funcionamento.

Central Server

Centralizar div na horizontal e vertical com CSS

Postado por: Pedro Rogério em

Quando você inicia seus estudos com CSS, uma das primeiras coisas que quer aprender é a centralizar divs na página independente da resolução do usuário. Existe uma forma muito simples de fazer isso somente com a utilização de CSS. Observe a seguinte marcação HTML:

<div id="box"></div>

O que nós vamos fazer agora é centralizar essa div na tela do usuário utilizando o seguinte CSS:

#box {background-color:#ff0000; height:480px; left:50%; position:absolute; top:50%; width:640px}

A primeira vista você pode pensar que somente definindo position:absolute e as coordenadas left e top com 50% para a div funcionarão, mas vejam nesse exemplo o que acontece. Infelizmente assim não conseguiremos centralizar a div horizontalmente nem verticalmente, o segredo para que isso aconteça é muito simples, temos que adicionar margens negativas ao elemento que você deseja centralizar, da seguinte forma:

#box {background-color:#ff0000; height:480px; left:50%; margin:-240px 0 0 -320px; position:absolute; top:50%; width:640px}

Agora se repararem nesse exemplo, verão que a div estará sempre centralizada na tela independente da resolução do usuário. O segredo é utilizar as margens top e left com valores negativos. A base para se chegar a esses valores é a seguinte: Para a margin-top você deve pegar a altura total do elemento e dividir por 2, como temos alí uma div com um height de 480px, o valor final é de 240px, e para margin-left pegamos a largura total do elemento, que alí é de 640px, dividimos por 2, e chegamos ao valor de 320px. A partir daí basta utilizar esses valores negativos.

Testei e funciona perfeitamente nos seguintes Browsers: IE6, IE7, Firefox 2.0.0.18, Firefox 3, Safari 3(Win), Opera 9.5, Opera 10 Alpha, Google Chrome e Flock.

jQuery Delay Plugin

Postado por: Pedro Rogério em

jQuery Delay Plugin é um plugin desenvolvido para jQuery criado para que possamos definir um tempo de espera antes da execução de uma função específica:

$(document).ready(function(){

	// Ao clicar no link é disparada a funcao
	$("a").click(function(){

		// Delay de 1 segundo...
		$(this).delay(1000,function(){

			// É mostrada a div com o efeito slideToggle
			$("div").slideToggle('slow');

			// Agora temos um Delay de 3 segundos
			$(this).delay(3000,function(){

				// Mudamos a cor de fundo da Div para azul
				$("div").css("backgroundColor","blue");

			});

		});

	});
});

Vocês podem ver o plugin em ação nesse link.

Estrutura mínima de um documento XHTML

Postado por: Pedro Rogério em

Para aquelas pessoas que estão começando agora no mundo do desenvolvimento web e não sabem como iniciar um documento XHTML, vou mostrar nesse post um exemplo muito simples que pode até ser usado com um template para futuros arquivos html:

<!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="pt-br" lang="pt-br">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Exemplo de XHTML Strict</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <p>…Conteúdo do XHTML aqui…</p>
</body>
</html>

Vamos as explicações:

  • Doctype: Utilize sempre Doctype Strict, pois assim você força o browser a seguir corretamente os padrões web, dentro do possível, sempre que possível.
  • xml:lang=”pt-br” lang=”pt-br”: Aqui é onde você define a linguagem do seu documento previsto no XML document schemas
  • title, meta, stylesheet e scripts: Todos eles são definidos dentro da Tag head do seu HTML, title para título da página, meta para meta tags, stylesheet para o CSS e scripts são onde você irá adicionar seus arquivos JavaScript.
  • body: É aí dentro que você irá construir sua página, todo o código HTML virá dentro da tag body.

Como podem ver não existem muitos segredos ao se escrever documentos XHTML.