Aula Imagens fixas no final


Por: @


Imagens fixas no final

Escrita por ßFolgada
Nível: Básico


Olá. Bom, gente, a aula de hoje vai ser sobre imagem fixa no final, ou pé do style, como neste exemplo aqui.

Em um todo é relativamente simples e sem mistérios ou qualquer tipo de edição absurda, não precisa ser nenhum expert em photoshop para conseguir fazer isso ok? Ok. Vamos lá.

Abra o photoshop e crie um documento com dimensão de 4000px de largura e 2000px de altura e o fundo transparente, como na imagem a seguir:



Vá e crie outro documento, este com a dimensão de 1500px de largura e 2000px de altura. Use o balde de tinta para tingir da cor que deseja e abra a imagem que deseja usar no fundo, jogando-a dentro desse documento, diminua a imagem e a coloque rente a beira, no fundo do arquivo, como nessa imagem:



Repita o mesmo processo para fazer o outro lado, colocando a imagem no outro canto do arquivo, como a imagem a seguir:



Agora, após salvar ambas as imagens, você irá coloca-las no primeiro arquivo que criou, deixando cada uma em uma extremidade. Como nessa imagem:



Repare que fica um vão entre ambas, esse vão deve possuir 1000px de largura, nem menos, nem mais. Certifique-se disso, pois é ai que se encaixa a base do style e assim as imagens ficam na “borda” dela corretamente.

Tudo certo até aqui? Sim? Então, hora de upar a nossa imagem. Lembre-se é a de 4000px por 2000px já pronta. Você pode upar por onde tiver preferência, mas vou deixar aqui dois lugares que gosto de usar. Imgur eTumblr. Imagens:





Com sua imagem upada vamos à parte do código. Você vai abrir o seu modelo e procurar pela id (#) #fundo e depois de background coloque o seguinte código: url(COLE AQUI A URL DA IMAGEM) no-repeat center bottom fixed; e entre os parênteses coloque o link que você adquiriu quando upou sua imagem.

Agora, uma explicação rápida sobre o que cada um dos termos após os parênteses faz:

No-repeat: faz com que a imagem não se repita.
Center: quer dizer que a imagem vai permanecer sempre no centro.
Bottom: Faz com que a imagem fique no em baixo, no pé.
Fixed: Ele fixa a imagem, de modo que ela não se mova.

Imagem exemplo:



E o resultado será esse:



Dúvidas? Deixe um comentário, que estarei respondendo cada uma delas. Muito obrigada pela atenção e espero que tenham gostado.


Folgada,
Beta Style

Gostou da Aula? Compartilhe!

Gostou? Deixe seu Comentário!

Muitos usuários deixam de postar por falta de comentários, estimule o trabalho deles, deixando um comentário.

Para comentar e incentivar o autor, Cadastre-se ou Acesse sua Conta.


Carregando...