Você está em: Home » Arquivos de julho 2010

Redimensionar imagem com CSS - background-size

29 julho 2010
CSS/HTML
21 comentários

Neste tutorial veremos como redimensionar imagens usando CSS, através da propriedade "background-size".

Se a imagem que será redimensionada estiver em uma tag html <img src="..."/>, utilizamos width e height na própria tag ou no CSS:

/* Créditos: 10calco.blogspot.com */
seletor img {
width:xx; /* largura */
height:xx; /* altura */
}

Porém se a imagem estiver no CSS, como no exemplo abaixo:

#div {
background-image: url(imagem.jpg);
}

Usaremos o background-size. E nosso exemplo fica assim:

#div {
background-image: url(imagem.jpg);
background-size:100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
/* Créditos: 10calco.blogspot.com */

Os valores 100% 100% representam respectivamente largura e altura, que devem ser alterados para os valores desejados nas cinco linhas.

Lembrando que essa é uma técnica de CSS3 que ainda não está totalmente funcional, então por isso foram acrescentados os códigos "-webkit-", "-o-", "-khtml-" e "-moz-".

-09/09/2010: Acrescentado propriedade "-moz-background-size", o que torna o código funcional com Mozilla Firefox.

Esta técnica não funciona no Internet Explorer, para isso veja:

redimensionar imagens no ie com css e html.

Links recomendados:

Continuar lendo ... "Redimensionar imagem com CSS - background-size"

Como colocar fundo degrade no blogger

06 julho 2010
Blogger , CSS/HTML
0 comentários

Alterar o background do blogger é muito fácil mesmo para quem não conhece muito (ou nada) de html.

Para começar acesse: Painel de Controle > Design > e clique em Editar Html.
Em seguida localize o trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

O que nos interessa no momento é a parte em negrito, que deverá ser substituída pelo código a seguir:

background:#FFFFFF url("Endereço da imagem")
top repeat-x fixed;

Onde:
#FFFFFF = cor de fundo;
url("Endereço da imagem") = endereço da imagem (oh!);
top= é a posição da imagem;
repeat-x = indica que a imagem irá repetir horizontalmente;
fixed = mantem a imagem fixa na página mesmo com o rolamento da mesma.

» Exemplo 1, degradê horizontal:

body {
background:#FFFFFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEA06zUyWAoR_j08gl7ugEN2jYdozGAy-Ed_6b9IuAg9-w-IqDrIY0JGqJIaeELMRaDL6ddCQAWaYjeO1iNFYibVOewsRJB8J33G9ZTRRYL8Jon1q-VxipEWJuTlUT7mVeIBkCvQySeOk/") top repeat-x fixed;
margin:0;
...
...
}

» Exemplo 2, degradê vertical(repeat-y), partindo da esquerda(left) para o centro:

body {
background:#000000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTZLJklexVPaHS-w-Skija4MJfaYMjp0h_UbPS0h5ym_c4KRJvEMmpLcqwRsoSk66O4zc5OP35j6XZlsmquDy0mRt16FkzjPgSUagC1tnYBc2une4ZcHqZ2ne__ykhkIi2xP5hCS_XJgG/") left repeat-y fixed;
margin:0;
...
...
}