Borda interna em imagens

O efeito de borda interna nas imagens é muito utilizado pelo portal Globo.com. Neste post vou mostrar como é simples aplicar esse efeito em suas imagens usando poucas linhas de CSS.

HTML

Montamos uma lista inserindo um link para cada imagem:

1
2
3
4
5
6

<ul>
	<li><a href="#"><img src="imagem.gif" /></a></li>
	<li><a href="#"><img src="imagem.gif" /></a></li>
	<li><a href="#"><img src="imagem.gif" /></a></li>
	<li><a href="#"><img src="imagem.gif" /></a></li>
</ul>

CSS

O uso do “overflow:hidden” é obrigatório para as imagens se manterem fixas. No “a:hover” definimos a espessura da borda e no “a:hover img” deslocamos negativamente as margens da imagem:

1
2
3
4
5

*{ margin: 0; padding: 0; border: 0; outline: 0; list-style: none; text-decoration: none; }
ul li { float: left; margin-right: 5px; }
ul li a,ul li a img { overflow: hidden; float: left; }
ul li a:hover { border:5px solid #999; }
ul li a:hover img { margin:-5px; }

CSS Reset – O que é e como usar?

Aprenda como funciona, como usar, pra que serve e o que é o CSS Reset, uma ótima artimanha para ser usada em todos os seus sites e garantir o básico para um site que seja igual em todos os navegadores.

Hoje vou falar sobre uma coisa simples, rápida e MUUITO útil… o CSS Reset ou CSS Reseter.

Há um grande problema quando implementamos um layout em HTML e CSS e vamos testar em outros browsers como o Internet Explorer ou Safari… Alguns elementos não se comportam da mesma forma, mesmo que esse comportamento não tenha sido definido/sobrescrito por você… por exemplo o H1, H2 e H3… Eles têm tamanhos diferentes em cada browser, mesmo usando a mesma fonte eles vão aparecer – se você não definir esse tamanho – com tamanhos diferentes.

O que é?

O CSS Reset é – basicamente – um arquivo que “limpa” os estilos padrões de todos os elementos HTML que já possuem uma formatação padrão. Ele tira cores, tamanhos de fonte, margins, paddins, efeitos e decorações… Quase tudo de quase todos os elementos vira “padrão”, como um texto sem formatação/alteração nenhuma.

Como usar?

Da forma mais simples do mundo: inserindo o arquivo no seu site como um CSS normal, antes de qualquer outro CSS que seu site usar.

Se você inserir em um site pronto você pode ver seu site se desfigurar todo, isso vai significar que você se baseou em estilos padrões de alguns elementos, o que é errado… Já que esse estilo pode mudar entre navegadores/futuras versões.

É altamente recomendável que você insira/use esse arquivo sempre que for começar a implementar um site.

E como é esse arquivo?

Existem vários CSS Reset rolando pela Internet… Todos funcionam da mesma forma mas alguns atingem mais elementos que outros… Mas teoricamente não há diferença.

Esse aqui é o que eu uso no meu site pessoal:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Espero que tenham gostado!