X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Acesso Premium Free

Acesso a nossa biblioteca completa de artigos Hub Premium, arquivos de projeto e os primeiros 10% de cada Tutorial-Video da Biblioteca Tutorial on-line .

Criar sua conta gratuita agora!

Configurando Fundos Tiled Usando CSS
Traduzido pelo Google Translate

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

Passo 1

Primeira primeira coisa - precisamos de um gráfico para telha! Provavelmente o melhor lugar para fazer isso é no Photoshop . Você pode usar um gráfico amolecida, de modo que ele vai aparecer como uma marca d'água, um logotipo, ou realmente qualquer coisa que você gostaria. Certifique-se que o gráfico não é muito grande, e salvá-lo como um PNG, JPEG ou GIF. Agora estamos prontos para usá-lo em nosso layout.

Passo 2

A seguir, vamos carregar a imagem em nosso layout via CSS. Isso vai exigir um pouco de codificação manual, mas não é nada muito complicado de retirar. Primeiro, encontre a regra CSS que você gostaria de aplicar o gráfico de fundo para. Isto poderia ser um seletor de ID que está controlando um elemento div, uma dominação de classe, ou quaisquer outras regras que você possa ter em uso. No meu exemplo, eu vou aplicar um gráfico de fundo para um elemento de corpo redefinido.

Adicionar no "background-image" propriedade, seguido por dois pontos completo, em seguida, "url". Em seguida, entre parênteses, digite o caminho para o gráfico, seguido por um ponto e vírgula. Por exemplo, aqui está como o meu código é:

background-image: url (images / background.png);

Note que meu gráfico, "background.png" está localizado dentro de uma pasta chamada "imagens". Certifique-se de salvar seus arquivos e visualizar o seu trabalho no seu browser. Observe como as telhas de fundo gráfico por padrão. Poderíamos deixar as coisas como elas são, ou continuar a personalizar ainda mais as coisas usando as propriedades CSS adicionais.

Passo 3

Se você gostaria de controlar o comportamento ladrilhos, você pode adicionar no "background-repeat" propriedade. Você pode então definir o valor para "repetir", "repeat-x", "repeat-y", ou "no-repeat". Repetir e repetir-x y-force azulejos apenas horizontalmente ou verticalmente, enquanto que no-repeat não permite tiling.

Passo 4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link