Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Guirossler

Background + mask

Por , em Desenvolvimento frontend

Recommended Posts

Guirossler    0

Guirossler
Postado

Boa Noite!

 

(já procurei, mas não encontrei, se procurei mal me desculpe)

 

estou com a seguinte duvida.

 

preciso fazer um degrade no "body", isso tranquilo

 

mas preciso de um 'mask' por cima de todo o site (com uma imagem que se repete x,y)

 

não estou conseguindo fazer essa 'mask' aparecer quando tem scroll.

 

assim que consigo fazer:

fe79d9e7.png

 

____________

 

+- a estrutura que preciso

 

body (degrade repeat-x)

estrutura (margin: 0 auto; width:670px; background: #fff)

efeito (100%)

texto (que fique dentro da estrutura por cima do efeito)

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Boa Noite!

 

(já procurei, mas não encontrei, se procurei mal me desculpe)

 

estou com a seguinte duvida.

 

preciso fazer um degrade no "body", isso tranquilo

 

mas preciso de um 'mask' por cima de todo o site (com uma imagem que se repete x,y)

 

não estou conseguindo fazer essa 'mask' aparecer quando tem scroll.

 

assim que consigo fazer:

fe79d9e7.png

 

____________

 

+- a estrutura que preciso

 

body (degrade repeat-x)

estrutura (margin: 0 auto; width:670px; background: #fff)

efeito (100%)

texto (que fique dentro da estrutura por cima do efeito)

 

Poste seu html para que eu possa ajudar.

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guirossler    0

Guirossler
Postado

a imagem está assim

 

<body>
	<div id="mask"></div>

	<div id="estrutura"></div>
</body>

 

 

já fiz assim tbm:

<body>
	<div id="mask">

		<div id="estrutura"></div>


	</div>
</body>

 

mas dessa maneira ele fica somente no fundo. não consigo fazer ele aparecer na frente da estrutura.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Tenha a textura em tons de cinza separada.

 

Faça uma mascara em degrade amarelo para as laterais, e com transparência (teste no seu editor favorito como fica). Use em PNG8 (alpha) ou PNG32.

 

E use outra máscara para esse tom claro do centro.

 

Creio que fique mais simples fazer duas laterais para o site.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

Isso ocorre porque a tela é maior que a imagem que cobre o degrade e a area branca.

 

Na div aonde você inseriu esta imagem, defina a repetição verticalmente. Assim ela ficará na tela inteira, não importa a resolução ou scroll.

 

Provavelmente voce inseriu um "background" na div "mask". Complete seguindo este exemplo.

 

#mask{
background:url(minhaimagem.jpg) repeat-y;
}

 

Teste e volte a postar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guirossler    0

Guirossler
Postado

na imagem na verdade são 2 prints.

 

a textura só vai até a barra até o scroll.

 

a parte sem textura é pra baixo.

 

Tenha a textura em tons de cinza separada.

 

Faça uma mascara em degrade amarelo para as laterais, e com transparência (teste no seu editor favorito como fica). Use em PNG8 (alpha) ou PNG32.

 

E use outra máscara para esse tom claro do centro.

 

Creio que fique mais simples fazer duas laterais para o site.

 

não entendi ;(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

Vou te dar uma sugestão...

 

Tirando o background em degradê ( que está ok ), crie um filete (um pedaço da imagem) que irá se repetir verticalmente e horizontalmente de ponta a ponta.

 

Então no CSS ficaria assim:

 

body {
background: url(meudegrade.png) repeat-x;
}

#mask{
background: url(textura.png) repeat;
}

#estrutura{
background:#FFF;
width:670px;
margin:0 auto;
}

 

no HTML:

 

<body>
<div id="mask">
 <div id="estrutura">
Meus textos
 </div>
</div>
</body>

 

Faça o teste e volte a postar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guirossler    0

Guirossler
Postado

Vou te dar uma sugestão...

 

Tirando o background em degradê ( que está ok ), crie um filete (um pedaço da imagem) que irá se repetir verticalmente e horizontalmente de ponta a ponta.

 

Então no CSS ficaria assim:

 

body {
background: url(meudegrade.png) repeat-x;
}

#mask{
background: url(textura.png) repeat;
}

#estrutura{
background:#FFF;
width:670px;
margin:0 auto;
}

 

no HTML:

 

<body>
<div id="mask">
 <div id="estrutura">
Meus textos
 </div>
</div>
</body>

 

Faça o teste e volte a postar

 

 

funciona em parte isso.

 

resolve o problema de não ir até o fim da pagina.

mas também ele não fica na frente do branco ;(

 

consegui galera..

 

acho até que era isso que falaram antes.

 

		
<div id="filete">
<div id="mask">

	<div id="estrutura">

	</div>
</div>
</div>

 

aonde o filete é o bg #fff ;D

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito