Como redimensionar elementos e criar gradientes com css3

Video: 058 CSS3 Resize Possibilidade de redimensionar manualmente os elementos

Você pode fazer literalmente centenas de truques em seu site com CSS3. Entre os truques chave está redimensionando elementos da sua página e criar gradientes para seu fundo.

Como redimensionar elementos com CSS3

Você não tem nenhuma dúvida ouviu falar de redimensionar a janela do navegador. Com CSS3, agora você pode dar aos visitantes a capacidade de redimensionar qualquer tag ou forma textarea elemento usando o redimensionar propriedade. o redimensionar valor pode ser ajustado para Nenhum, ambos, horizontal ou vertical, e é tipicamente combinado com o transbordar propriedade definida como auto.

Video: 16. Tutorial CSS: Degradados

No exemplo a seguir, um recipiente grande pode ser redimensionado 300 pixels tanto horizontalmente e verticalmente, e qualquer conteúdo transbordamento reflui automaticamente para se ajustar às dimensões mudança do recipiente, acrescentando barras de posicionamento quando aplicável:

div {width: 300px; redimensionar: ambas-overflow: auto}

Como criar gradientes com CSS3

No passado, quando os designers queria um fundo do inclinação para um elemento, eles criar um gráfico e depois repeti-lo ao longo do X ou Y-eixo para preencher o espaço. Usando CSS3, você pode criar seus próprios gradientes mais rápido-carregamento.

Video: CSS3 - Aula 15 - Preenchimentos Gradientes

Acredite ou não, você pode criar o efeito de gradiente usando o imagem de fundo propriedade emparelhado com os valores para o tipo de gradiente, posição, cor de paragem, e valor de cor. Embora a sintaxe para o CSS é ligeiramente diferente para o WebKit do que Mozilla, os resultados são idênticos:

.gradiente {/ * Safari & Chrome * / background-image: -webkit de gradiente (linear, inferior esquerdo, superior esquerdo, cor-stop (0, # 74B4DB), cor-de paragem (1, # F7ECCA)) - / * Firefox background-image * /: -moz-linear de gradiente (inferior centro, 0pt # 74B4DB, # F7ECCA 100%) - altura: 200 px;}

Além da técnica mostrada aqui, você também pode criar efeitos de gradiente mais complexas usando o editor de gradiente on-line gratuitamente na website ColorZilla.

Video: Illustrator Cs6 - Gradiente

Para saber ainda mais sobre essas dez técnicas e trabalhar com CSS3 em geral, visita CSS3.info e W3C.