Patterns são pequenas imagens que quando colocadas ao lado umas das outras formam um padrão preenchendo uma determinada área..
Stripe Generator 2.0 permite criar fundos de repetição de listas. Basta escolher o tamanho e o espaçamento, cores, direcção das listas, sombra e estilo de fundo (sólido ou dois tipos de gradientes).
Pode-se visualizar o fundo numa tela cheia antes de fazer o download. Depois é só fazer o download da imagem criada.
Tartan Maker
Este gerador permite criar fundos em xadrez parecidos com texturas de tecidos. Muito interessante mesmo! Basta escolher as cores e usar as barras deslizantes para determinar o tamanho, a direcção e efeito do xadrez. A medida que se vai criando, pode-se ver o efeito em tela cheia clicando na opção “Go fulscreen” na área do “Preview”.
Este gerador permite criar fundos pontilhado, com variação de tamanhos e cores, em degradê ou não. Tudo que se tem que fazer é colocar as cores no ponto, escolher cores de fundo junto com a altura do padrão e ele faz o resto. Há também um botão de "random", que pode criar algumas combinações de cores.
No Firefox: Clicar com o botão direito do rato sobre a imagem, depois clicar na opção "Exibir imagem de fundo". Clicar novamente com o botão direito do rato sobre a imagem e salvar.
No Chrome e Internet Explorer: Clicar com o botão direito do rato sobre a imagem e depois clicar na opção "Salvar imagem como...".
Stripemania
Stripemania é um gerador de imagens de fundo com riscas. Escolhee a largura da faixa e espaçamento, direcção das listas e as cores, e gerar um padrão de repetição de distribuição.
BgPatterns é possivelmente o mais conhecido e poderoso criador de patterns online. Pode-se escolher entre uma variedade de formas e personalizar o tamanho, rotação, posicionamento, cor, textura, e muito mais. Excelente!
Tipo: Tutorial
Plataforma: Páginas Web.
Ferramentas: Patterns
Grau de Dificuldade: Fácil
Depois de se fazer a imagem desejada para o background e feito o download da mesma para o nosso computador, temos que a hospedar online.
Implementação:
- No Caso de ser no Blogger
Passo 1 - Abrir o painel principal do blogger;
Passo 2 - Entrar na página HTML e procurar na zona do CSS a tag body
Passo 3 - Esta deve começar assim body {
Passo 4 - Logo abaixo cola a seguinte linha: background-image: url(URL-DA-IMAGEM) repeat;
Passo 5 - Substitua onde diz URL-DA-IMAGEM pela url da sua imagem;
Passo 6 - Grave e verificar se está tudo bem, caso exista algum problema verifique se efectou tudo bem, repita os passos caso seja necessário;
- No Caso de ser num Web Site
Passo 1 - Editar o CSS do website;
Passo 2 - Procurar por body
Passo 3 - Logo abaixo cola a seguinte linha: background-image: url(URL-DA-IMAGEM) repeat;
Passo 4 - Clique em Salvar;
Passo 5 - Grave e verificar se está tudo bem, caso exista algum problema verifique se efectou tudo bem, repita os passos caso seja necessário;
Definições CSS para repetição de imagens:
- repeat; A imagem repete-se por todo o fundo (background);
- repeat-y; A imagem repete-se só na vertical do background;
- repeat-x; A imagem repete-se só na horizontal do background;
- no-repeat; A imagem não se repete;
Também podemos seguir este passos e utilizar esta técnica numa outra tag que não seja o body, basta fazer o mesmo mas na tag onde desejamos o fundo repetido.
0 comentários :
Enviar um comentário