Como construir um fundo de azulejos para o seu html5 e css3 local
Muitas vezes, você quer uma imagem de fundo para cobrir toda a página em seu site HTML5 e CSS3. Isso pode ser mais difícil do que parece, porque você não sabe o quão grande é a página será no navegador do usuário.
Conteúdo
Pior, imagens grandes podem dar uma enorme quantidade de espaço e abrandar a experiência do usuário. A solução comum é usar uma imagem em mosaico que é projetado para repetir em segundo plano. Gimp tem algumas ferramentas muito úteis para a construção de imagens lado a lado.
Lembre-se que o fundo de repetição propriedade CSS permite que você especifique como um fundo repete. A configuração padrão repete o fundo infinitamente em ambos os eixos X e Y. Você também pode definir o fundo para repetir horizontalmente (repeat-x), Verticalmente (repetir-y), Ou não é de todo (no-repeat).
Video: Make a Responsive Table Using HTML5 & CSS3
O objetivo de um fundo de azulejos é fazer um relativamente pequeno gráfico preencher toda a página e olhar como uma imagem maior. O segredo é criar a imagem de modo que é difícil ver onde a imagem se repete. Aqui está uma maneira de fazer um fundo de azulejos em Gimp. Claro, você pode adaptar esta técnica para seus próprios fins.
Criar uma nova imagem.
O tamanho da sua imagem é importante. imagens menores são muito mais eficientes para download, mas o padrão é muito mais óbvio. Comece com 256 por 256 pixels.
Construir um padrão aleatório.
Video: Responsive Full Page Background Image CSS3 | XO PIXEL
Você pode usar a técnica de filtro de Plasma ou tentar uma técnica semelhante, escolhendo Filtros → Renderizar → Nuvens → Diferença Clouds. O filtro Difference Clouds cria uma imagem em tons de cinza, mas com uma série de opções interessantes. A opção Tileable cria um padrão que está pronto para telha. Jogar com estas opções até chegar algo interessante.
Ajustar o contraste.
Para o melhor efeito, você quer uma distribuição relativamente uniforme de valores de claro para escuro. A maneira mais fácil de fazer isso é através da ferramenta de normalização automática (Cores → Auto → Normalize).
Escolher um gradiente.
Você vai adicionar cores para o seu padrão usando uma técnica chamada mapeamento gradiente. Use a caixa de diálogo Gradient (Windows → Dockable Diálogos → gradientes) para escolher um gradiente. cores mais escuras em sua imagem de mapa para as cores do lado esquerdo do gradiente e cores mais leves Roteiro para a esquerda. Você pode ajustar as cores, então não se preocupe se as cores não são exatamente o que você quer.
Use a ferramenta Gradient Map (Cores &# 10154- Mapa &# 10154- Gradient Map) para mapear as cores do gradiente para o seu padrão de nuvens.
Deslocamento da imagem para verificar se há azulejos.
A maneira mais fácil de ver se as telhas imagem bem é compensar a imagem. Isso coloca as bordas no centro para que você possa ver como a imagem vai olhar quando várias cópias são próximas umas das outras. Abra o diálogo Deslocamento escolhendo Camada → Transformar → Deslocamento. A caixa de diálogo Deslocamento tem uma y botão / 2 calhar x / 2,. Clique no botão para ver como sua imagem parece.
Limpar a imagem, se necessário.
Se você escolheu a opção Tileable quando você construiu a imagem da nuvem, a nova imagem ficará bem. Se não, você pode ter algumas costuras visíveis. Use as ferramentas de manchas e clone para limpar essas emendas, se necessário. Aplique a correção da ferramenta uma segunda vez para verificar se suas costuras boa aparência.
Aplicar filtros para obter o efeito desejado.
Você pode querer colorir sua imagem ou esbater-lo um pouco para cobrir qualquer tipo de artefato de sua limpeza. Lembre-se que imagens de fundo deve ser extremamente escuro ou extremamente leve com um contraste muito baixo se você quiser texto legível.
Teste a imagem ao salvar a imagem no formato XCF e um formato web-friendly (como PNG), construir uma página simples usando a imagem como um fundo, e carregar a página em seu navegador para garantir que ele telhas da maneira esperada.
Video: HTML5 and CSS3 Beginner Tutorial 27 - Background Images
