Colocar uma imagem como fundo de página inteira.


Css normal:

html {
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Css para fazer a imagem expandir na vertical:

Aqui usamos um elemento inline, que será capaz de redimensionar a imagem em qualquer navegador. Montamos um min-height que o mantém enchendo a janela do navegador na vertical, e definir uma largura de 100%, o que mantém o preenchimento horizontalmente. Também estabeleceu um min-width da largura da imagem para que a imagem nunca fique menor do que realmente é.

#bg {
 position:fixed;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
}
#bg img {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 min-width:50%;
 min-height:50%;
}
<div id="bg">
 <img src="images/bg.jpg" alt="">
</div>

Método jQuery:

<html>
<head>
 
<style>
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
</style>
 
<script>
$(window).load(function() {    
 
 var theWindow        = $(window),
     $bg              = $("#bg"),
     aspectRatio      = $bg.width() / $bg.height();
 
 function resizeBg() {
 
  if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
      $bg
       .removeClass()
       .addClass('bgheight');
  } else {
      $bg
       .removeClass()
       .addClass('bgwidth');
  }
 
 }
 
 theWindow.resize(function() {
  resizeBg();
 }).trigger("resize");
 
});
 
</script>
</head>
<body>
<img src="images/bg.jpg" id="bg" alt="">
</body>
</html>

fonte : http://www.crashcoder.com/css-tutorials-how-to-set-full-image-as-background-in-website/

CSS3 Animation – Crie Animações Utilizando CSS3 Facilmente

Cada vez mais o CSS3 é compatível com os navegadores atuais. A cada nova versão do Chrome, FireFox e Internet Explorer (hein!?) podemos utilizar mais recursos deste novo padrão para folhas de estilo. E com certeza o recurso de animação é um dos mais utilizados, ainda mais para quem pretende migrar doFlash para a dobradinha HTML5/CSS3.

Para ajudar quem pretende criar suas primeiras páginas animadas vamos apresentar agora uma ferramenta muito útil, quase um framework, que irá ajuda-lo a criar praticamente qualquer tipo de animação e o melhor, totalmente compatível com navegadores desktop e mobile, claro, IE 8 e 9 não rodam tudo, mas a versão 10 já esta bem melhor e compatível.

CSS3 Animation Cheat Sheet

Crie Animações CSS3

CSS3 Animation Cheat Sheet é uma biblioteca CSS para criação de animações variadas em qualquer projeto web, inclusive os mobile. Utilizando este conjunto de códigos você será capaz de criar elementos animados e até interações avançadas com seus usuários e visitantes.

Basicamente é só escolher o tipo de animação que deseja e colocar a “classe” correspondente nos elementos corretos na estrutura do seu HTML. Simples assim. Você utilizará o CSS3 @keyframes e não precisará se preocupar com o posicionamento do elemento que será animado, ele vai permanecer no mesmo lugar. Caso o seu usuário utilize um navegador antigo não precisa se preocupar, ele só não verá a animação, mas nenhum conteúdo será escondido.

Fala sério! Não é demais poder utilizar uma ferramenta como o CSS3 Animation Cheat Sheet?

Download e Informações

CSS3 Animation

O CSS3 Animation Cheat Sheet pode ser baixado e utilizado livremente em qualquer tipo de projeto web para desktop ou mobile. Para utiliza-lo corretamente basta seguir a documentação no site oficial. Tudo muito simples e fácil. Não esqueça de chamar o jQuery (Não o Jim Carrey!) no seu código.

• CSS3 Animation Cheat Sheet

Teste bastante e crie sites mais dinâmicos e muito mais interessantes. Com certeza sabendo como usar o recurso de Animação do CSS3 você terá um projeto de sucesso.

fonte : http://www.tekzoom.com.br/css3-animation-crie-animacoes-utilizando-css3-facilmente/

CSS 3 com font-face compatível, saiba como usar e converter suas fontes

Há muito tempo nós Web Designers sonhamos em poder utilizar qualquer tipo de fonte em nossos sites, a funcionalidade @font-face do CSS 3 veio para cumprir esse maravilhoso recurso com classe, de forma simples e compatível.

Veja como utilizar a propriedade @font-face de forma compatível com os principais navegadores do mercado.

De forma simples podemos generalizar o uso dessa função da seguinte maneira:

1.@font-face {

2.font-family: 'BankGothicMdBTMedium';

3.src: url('bankgthd-webfont.ttf') ;

4.}

5..elemento { font-family: 'BankGothicMdBTMedium'; }

Com isso você estará utilizando a fonte Bank Gothic no elementado de classe "elemento".

Agora vamos vamos mais a fundo nesse propriedade deixando mais compatível.

Essa fonte utilizada tem como extensão .ttf, ou seja, é uma fonte do tipo truetype. Esse tipo de fonte é compatível com alguns navegadores no mercado, porém navegadores como o IE não consegue ler essa terminação. Para o IE utilizamos fontes do tipo .EOT.

E caso o usuário já tenha essa fonte no computador, é preciso baixar novamente? Não, vamos ver agora como seria o código completo para termos total flexibilidade e compatibilidade com essa função:

1.@font-face {

2.font-family: 'BankGothicMdBTMedium';

3.src: url('bankgthd-webfont.eot');

4.src: local('BankGothicMdBTMedium'), url('bankgthd-webfont.woff')format('woff'), url('bankgthd-webfont.ttf') format('truetype'),url('bankgthd-webfont.svg#webfontMYjN7z0O') format('svg');

5.}

6..elemento { font-family: 'BankGothicMdBTMedium'; }

Dessa forma temos total compatibilidade com os navegadores mais populares do mercado. Não se assuste com o código apenas vá nesse site e envie sua fonte que ele converte para .EOT e gera todo o código necessário automaticamente!

Converter fontes para .EOT e gerar código @font-face compatível

Conheça o @font-face Generator e converta suas fontes.

fonte : http://www.leomiranda.com/dicas-css/css-3-com-font-face-compativel-saiba-como-usar-e-converter-suas-fontes.html