Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Sobrepor imagem na index usando css

sobrepor imagemVamos aprender agora a sobrepor imagem com CSS. A CSS  usa o espaço tri-dimensional  das páginas ou seja: -altura, largura e profundidade. Nas lições anteriores vimos as duas primeiras dimensões, altura e largura. Agora vamos aprender a sobrepor imagem  colocando os elementos em camadas usando uma regra da CSS camadas ou   layers (camadas).  Resumindo, camadas significam como os elementos se sobrepõem uns aos outros, por isso o termo sobrepor imagem.

Para sobrepor imagem usando camadas  definimos o elemento usando um número de índice chamado de  (z-index). O comportamento da sobreposição das camadas ou imagens é que os elementos com número ou índice maior se sobrepõem àqueles com menor número ou  índice. Assim podemos sobrepor imagem uma após outra usando regras básicas e uma hierarquia própria.

Vamos usar um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um z-index, veja que neste caso ao sobrepor imagem em sequencia, forma uma pequena escada:

sobrepor imagem

No caso mostrado acima, foi possível sobrepor  imagem usando os números índice  em uma seqüência direta (de 1 até 5), contudo o mesmo resultado poderia ser obtido com uso de outros cinco  números diferentes, e em outran seqüência. O que vale é a cronologia dos números  ou (a ordem) que equivale ao seu valor.

Nós temos que nos preocupar com nossos usuários quando usando os nosso negócios online. Pois estes estão a procuram de informação de qualidade e também de um futuro negócio online. Seja criterioso e organizado na hora de posicionar os elementos nas suas páginas. Tenha o hábito de sobrepor imagem para melhorar o visual do seu dite.

Agora vamos aprender na prática a sobrepor imagem em uma página:

Agora, como já dissemos em todas as postagens, você deve usar um editor de códigos, que eu recomendo o Notepad+ +, e salvar os arquivos que vamos criar na pasta indicada pelo seu servidor local, aquele que você instalou no seu computador para testar as usas páginas.

Digite o código abaixo em seu editor de código, e salve o arquivo como estilo. css, essas serão as nossas regras de CSS para estilizar a nossa imagem.

Os textos de verde são apenas comentários e não influencia no resultado final na hora da visualização dos códigos. Você também encontrará links dentro dos comentários para recordar alguma regra que não se lembre.

#dez_de_espada {  /* ID criada para identificar os elementos dentro do código HTML no arquivo index.html*/
position: absolute; /* posição da imagem na página */
left: 40%; /* distancia da imagem para a margem esquerda da página */
bottom: 50%; /* distancia da imagem para o rodapé da página */
width: 250px; /* largura da borda na imagem */
height: 200px; /* altura da borda na imagem */
border-width: 4px; /* espessura da borda na imagem */
border-style: outset; /* estilo da borda na imagem */
border-color: red; /* cor da borda na imagem */
z-index: 1; /* identificação da camada na imagem para ser sobreposta por outras imagens */
}

/* as demais regras não serã comentadas, pois contem as mesmas regras da anterior*/
#valete_de_espada {
position: absolute;
left: 41%;
bottom: 51%;
z-index: 2;
}
#dama_de_espada{
position: absolute;
left: 42%;
bottom: 52%;
z-index: 3;
}
#rei_de_espada {
position: absolute;
left: 43%;
bottom: 53%;
z-index: 4;
}
#azes_de_espada {
position: absolute;
left: 44%;
bottom: 54%;
z-index: 5;
}

 

Agora digite o código abaixo e salve como index.html na mesma pasta em que você salvou o arquivo estilo.css. Salve também dentro desta mesma pasta o arquivo da imagem que você usará para criar o seu efeito de camadas.

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* título da página */
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* link para chamar o arquivo estilo.css */
</head>
<body>
<div id=”dez_de_espada”> /* z-index: 1; */
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
<div id=”valete_de_espada”> /*z-index: 2; */
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
<div id=”dama_de_espada”> /*z-index: 3; */
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
<div id=”rei_de_espada”> /*z-index: 4;*/
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
<div id=”azes_de_espada”> /*z-index: 5; */
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
</body>
</html>

 

Agora basta clicar no botão abaixo e visualizar o resultado, com certeza é o mesmo que você conseguir ao abrir o seu arquivo index.html no seu navegador.

 

visualizar

 

Note que ao sobrepor imagem com fundo transparente, conseguimos criar o efeito 3D, ou seja, parece que a imagem está saindo do quadro que usamos para sobrepor imagem.

Este método parece complicado mas é muito simples, com essas regras de CSS você pode usar a sua criatividade e incrementar o seu site, tonando-o muito bonito e mais atraente para os seu usuários. Com certeza os seus negócios online, serão um sucesso depois que você dominar a CSS.  Com essas regras você pode ainda, colocar imagens sobre textos, texto sobre texto, etc. 

Muito bem, aqui termina as nossa aulas sobre CSS, foram várias postagens aprendendo sobre estes recursos tão importante para a criação de negócios online. Parabens por você ter participado de todas as nossas postagens aulas, mas eu te peço que continue estudando muito. Em breve eu estarei postando aqui algumas aulas onde vamos criar e programas um site todinho em código puro. Por isso eu te peço que pratique tudo que estudamos para usar depois na construção deste site.

Não se esqueça de deixar o seu comentário para que possamos avaliar o nosso trabalho e saber onde podemos melhorar.

 

 

voltar

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • Thanks for your article. Another item is that being a photographer includes not only issues in taking award-winning photographs but also hardships in acquiring the best camera suited to your needs and most especially situations in maintaining the quality of your camera. It is very accurate and obvious for those photography enthusiasts that are straight into capturing the actual nature’s captivating scenes : the mountains, the forests, the particular wild or perhaps the seas. Visiting these daring places unquestionably requires a photographic camera that can live up to the wild’s severe conditions.

    traduzido com Google Tradutor
    Obrigado pelo seu artigo. Outro ponto é que ser um fotógrafo inclui não apenas questões em tirar fotografias premiadas, mas também dificuldades em adquirir a melhor câmera adequado às suas necessidades e mais especialmente as situações em manter a qualidade de sua câmera. É muito preciso e claro para os entusiastas da fotografia que estão diretamente para a captura de cenas cativantes da verdadeira natureza: as montanhas, as florestas, os particulares selvagens ou talvez os mares. Visitar esses lugares ousados​​, sem dúvida, requer uma câmera fotográfica que pode viver de acordo com as condições severas do silvestres.

  • I just want to tell you that I’m all new to blogging and truly loved your web page. Almost certainly I’m planning to bookmark your website . You absolutely come with remarkable articles and reviews. Thanks a lot for sharing with us your web-site.

    Tradução:
    Eu só quero te dizer que eu sou tudo novo para blogs e realmente amava sua página web. Quase de certeza que estou planejando para marcar seu website. Você absolutamente vêm com notáveis ​​artigos e resenhas. Muito obrigado por compartilhar conosco o seu web-site.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.