CSS no Lanche

Você pode estar se perguntando o por que de utilizar técnicas desse tipo para proteger imagens de serem salvas no browser, digo-lhe que os motivos são vários e um deles é o copyright(imagens com direitos reservados), que muitas vezes os usuários não respeitam.

Essa técnica é utilizada pelo Flickr, não é 100% segura mas pode lhe evitar um pouco de dor de cabeça. Vamos a explicação da técnica: Iremos utilizar uma imagem transparente de 1px de largura e altura que ficará por cima da imagem real, com isso, quando o usuário tentar salvar a imagem, provavelmente irá clicar com o botão direito do mouse encima dela e escolherá a opção “Salvar imagem como”, e é aí que ele irá somente conseguir salvar a imagem transparente. A Marcação HTML utilizada no exemplo é a seguinte:

<div id="box">
  <img src="imagem_real_aqui" alt="" title="" />
  <img src="spaceball.gif" class="img_oculta" alt="" title="" />
</div>

Utilizamos a classe img_oculta que é a imagem transparente que ficará por cima da imagem real, utilizando técnica de position:relative e position:absolute:

#box {height:343px; margin:0 auto; position:relative; width:500px}
.img_oculta {height:343px; left:0; position:absolute; top:0; width:500px}

Simples, agora a imagem transparente sobrepõe a imagem real, “impedindo de ser salva”, vejam aqui nesse exemplo criado .

Provavelmente você já deve ter tentado desenvolver um site onde possuia pouco conteúdo e gostaria de deixar o rodapé sempre no rodapé independente de possuir conteúdo ou não. Eu particularmente já passei por muitos problemas com isso, onde, quando o conteúdo excedia a área visível do site o rodapé não acompanha a área do conteúdo e ficava por cima do mesmo quebrando todo o layout. Veja um exemplo desse problema aqui.

Nesse exemplo fazemos o uso da seguinte marcação HTML:

<div id="header">
	...Conteúdo...
</div>
<div id="content">
	...Conteúdo...
</div>
<div id="rodape">
	...Conteúdo...
</div>

Uma marcação HTML simples, o grande segredo está no CSS:

html, body {height:100%}
#content {
	height:auto !important;
	height:100%;
	min-height:100%;
}
#rodape {
	position:absolute;
	bottom:0px;
	width:100%;
}

Essa seria basicamente a estrutura necessária para deixar o rodapé sempre no rodapé, mas esse código ainda não é satisfatório pois ocorre o problema do rodapé sobrepôr o conteúdo. Vamos agora a uma solução Crossbrowser:

<div id="wrap">
	<div id="header"></div>
    <div id="main"></div>
</div>
<div id="footer"></div>

Agora vamos a marcação CSS:

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 40px;}  /* deve ser a mesma altura do rodapé */
#footer {
	position: relative;
	margin-top: -40px; /* A mesma altura do rodapé, o valor deve ser negativo */
	height: 40px;
	clear:both
}

Agora vocês podem ver um exemplo do rodapé sempre no rodapé através de uma solução Crossbrowser. Essa solução foi retirada do site CSS Sticky Footer.

Os elementos HTML possuem, por padrão, uma formatação que diferencia-se de browser para browser. Utilizar técnicas de Reset CSS é uma boa pedida para minimizar os seus problemas no dia-a-dia.

Se não você não conhece nenhuma técnica de Reset CSS, aconselho a dar uma olhada em meu post onde eu mostro 10 Técnicas de Reset CSS, e recentemente eu acabei descobrindo um site, o CSS-Reset.com, que hospeda algumas dessas técnicas nos servidores do Google App Engine, evitando assim consumir banda de seu servidor. As técnicas são as seguintes:

• Eric Meyer’s Reset
• Yahoo User Interface Reset
• Ed Eliot’s Reset

Sua utilização é muito simples, basta adicionar a URL completa do arquivo CSS ao seu site. Se atentem a um exemplo de utilização:

<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://www.css-reset.com/css/yui.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://www.css-reset.com/css/ejeliot.css" media="screen, projection" rel="stylesheet" type="text/css" />

Via: WebIntenta