Pinceladas da Web

Uma das coisas que eu aprendi nessa minha nova jornada foi a tornar o meu CSS modular, mas o que seria isso? É basicamente você dividir o CSS do seu site em vários arquivos, onde você ganha mais agilidade em uma possível atualização, o site no browser do usuário também carrega mais rápido, pois evita de se carregar CSS desnecessário, e mais outros milhares de benefícios.

Se você não tem nem idéia por onde começar, comece divindo o CSS em arquivos do tipo, um para o topo, outro para o menu, outro para conteúdo e outro para rodapé, depois é só criar as chamadas para o CSS no header do seu site. Você vai ver como sua vida irá melhorar e muito com isso.

<update> Acho que faltou um exemplo claro para o pessoal entender melhor o poder da modularização, pois bem, dêem uma olhada nesse site que fizemos recentemente lá na empresa onde trabalho: www.hottoys.com.br, ele é composto de 2 arquivos php, e todas as alterações feitas no layout são graças as CSS. </update>

Se você utiliza o Flickr, ou já utilizou, sabe do que eu estou falando, existe uma maneira bastante simples de se conseguir um efeito similar ao utilizado no Flickr somente com CSS. E o mais interessante e que esse código funciona em todos os browsers, ótimo para você que quer fazer um álbum de fotos on-line e quer adicionar algum comentário dentro da foto. Primeiramente, vejam esse exemplo. Agora vamos ao nosso código HTML:

<div id="foto">
  <div class="nota1">
    <a href="#">
	<div class="contorno">
	<div class="texto">O rosto cheio de barro!!!</div>
	</div>
    </a>		
  </div>
</div>

Basicamente utilizamos de uma div que contém todo o código, e onde é inserida a imagem, após criamos uma div para o quadrado onde você quer colocar a nota, outra para o contorno e uma outra para o texto. O resto é puro CSS:

CSS

#foto {
	position:relative;
	width:760px;
	height:570px;
	margin:0 auto;
	background:url(annalu.jpg) no-repeat;
}
a { 
	color:#fff; 
	text-decoration:none; 
	position: absolute; /*Muito Importante para poder posicionar os retangulos onde eu quiser*/ 
	width: 100px; /* Tamanho de todos os retangulos */ 
	height: 120px; /* Tamanho de todos os retangulos */ 
}
a:hover { 
	border: 1px solid #fff; /* Borda interior branca */ 
	cursor: pointer; 
}
/* Borda exterior amarela */ 
.contorno{ 
	display: block; 
	width: 104px; 
	height: 124px; 
	position: absolute; 
	top: -3px; 
	left: -3px; 
}
a:hover .contorno { 
	border: 1px solid #D4D82D; 
}
/* Posicao de cada nota */ 
.nota1 a{ 
	top: 75px; 
	left: 280px; 
}
/* Regras para mostrar o texto de cada nota */ 
.texto {
	position: absolute;
	left: -10000px;
	bottom: -35px;
	width: 100px;
	text-align:center;
	color:#000000;
	background-color:#FFFFD3;
	font:11px Geneva, Arial, Helvetica, sans-serif;
	-moz-border-radius: 8px; /* Bordas redondas, funciona somente no Firefox */
}
a:hover .texto{ 
	left:2px; 
}

Como podem ver no CSS, basta colocar position:relative para a div que vai conter a foto, com isso, você consegue posicionar absolutamente onde quiser as notas que posteriormente você vai adicionando. Dêem uma olhada nesse segundo exemplo.

Referências

• Leandono´s Blog – Añadir notas en imágenes (similar a Flickr) utilizando CSS