CSS no Lanche

O nome pode sor meio estranho, mas vamos a uma breve explicação do que são CSS Sprites. Você já viu aqueles botões que possuem o estado “on” e “off”? Aquela técnica pode ser desenvolvida através da utilização de CSS Sprites, onde em uma única imagem você pode guardar todos os estados do botão e efetuar o efeito através da troca de posicionamento de background no CSS, ou até mesmo salvar em uma única imagem todas as imagens utilizadas no site, como faz o Google.com e o Youtube.

O site From the Couch disponibiliza um vídeo ensinando a técnica de CSS Sprites, em inglês:

Via: CSSBlog ES

Manter a organização no CSS é fundamental em qualquer projeto, aliás, organização não deve se resumir somente ao CSS. Eu, particularmente em cada projeto declaro as propriedades CSS em ordem alfabética, muitas pessoas me crucificariam por isso, no começo pode parecer estranho, mas depois se torna mecânico e você consegue produzir o CSS normalmente. Mas como eu gosto de colocar aqui também a visão de outros desenvolvedores, vou deixar aqui a dica que encontrei no blog Aloe Studios de como organizar melhor seu CSS.

Todas as declarações devem se resumir na seguinte ordem:

1. Display & Fluxo
2. Posicionamento
3. Dimensões
4. Margens, Padding, Bordas, Outline
5. Tipografia
6. Background
7. Opacidade, Cursores…

Traduzindo isso para o CSS, as declarações ficariam da seguinte forma:

Continuar lendo »

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.