GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Background xadrez com css [RESOLVIDO]

Olá heatcold :smiley:

Que pena. Estou procurando e tbm não achei um jeito ainda.

[list]Pq gostaria de mudar o layout dinamicamente, para quaisquer cores que o usuário escolher.[/list]
[list]Com imagem pode ficar pesado, mesmo usando background-repeat.[/list]
[list]É possível fazer layout avançado com css, que pensei que algo mais simples seria fácil.[/list]

Obrigado pela atenção heatcold.

flw :thumbup:

Mais alguém :?:

Pela última vez.

Mais alguém :cry: :?: :cry:

Diretamente na tag body creio que não, mas usando uma tabela você pode usar os atributos even e odd da CSS 3:

<style type="text/css">
   td:odd{background: #CCC}
   td:even{background: #FFF}
</style>

Pesquise um pouco mais a respeito pra saber se existe em outras tags: http://www.internetbootcamp.net/007/evenodd.html

Esperto ter ajudado

Muito obrigado pela dica spidermanx :smiley:

vou pesquisar mais sobre o assunto…

…inicialmente não deu certo…

devido ser uma tabela, assim não posso posicionar minhas divs :wink:

Mesmo assim obrigado, pela atenção.

Bem, nesse caso se você está usando conceito “tableless”, será que o CSS não entende isso:

<style type="text/css">  
   div:odd{background: #CCC}  
   div:even{background: #FFF}  
</style>

Faz os testes ae e posta o resultado pra gente ficar sabendo.

Agora quanto a “zebrar” o background do body na raça, realmente pesquisei um pouco e não encontrei nada.

Sim, é exatamente isto :smiley:

Infelizmente :frowning: não está entendendo. Usei na própria página HTML e no StyleSheet…

É eu já pesquisei bastante (e já tem um bom tempo) e também ainda não achei nada…

Achava que seria uma coisa fácil, como já mencionei:

Mas tudo bem, vou continuar pesquisando…

Sim, com certeza. Se eu achar a solução vou fazer questão de postar.

Mais um vez, muito obrigado pelas dicas e pela atenção spidermanx :smiley:

Skenta a cabeça não meu chapa, tamo aqui pra resolver as treta que aparece, é pra isso que esse fórum serve 8)

E na programação a gente tem que usar a filosofia do João Canabrava: “O meu pobrema é seu pobrema!”, kkkkkkkkkkkkk

Eu também vou brincando uns testes aqui, pois achei bem interessante esse quebra-cabeça, qualquer possível solução eu posto beleza?

abrax.

[quote=spidermanx]Skenta a cabeça não meu chapa, tamo aqui pra resolver as treta que aparece, é pra isso que esse fórum serve 8)

E na programação a gente tem que usar a filosofia do João Canabrava: “O meu pobrema é seu pobrema!”, kkkkkkkkkkkkk

Eu também vou brincando uns testes aqui, pois achei bem interessante esse quebra-cabeça, qualquer possível solução eu posto beleza?

abrax.[/quote]

:lol: É isso ai, mais cedo ou mais tarde vamos achar uma solução, o importante é não desistir.

E por falar em fazer alguns testes, fiz um programinha muito do bobo aqui só pra ver o comportamento das div’s e deu certo:

<html>
	<head>
		<style type="text/css">
			div:nth-child(odd){background: #CCC;}
			div:nth-child(even){background: #EEE;}
			div{float: left; height: 100%}
		</style>
	</head>
	<body>
		<div>Coluna 1</div>
		<div>Coluna 2</div>
		<div>Coluna 3</div>
	</body>
</html>

O que estava faltando para ele achar as divs é o seletor padrão “nth-child”:

div:nth-child(odd)...
div:nth-child(even)...

Faz um copi/cola ae e vê no que dá, outra coisa importante, testei no IE 9 e infelizemente não funcionou, porém no Firefox 10 e Chrome 17 e uns quebrados funcionou lindo, bunitu! kkkkkkkkkk, creio que para o IE deve ter alguma solução, mas ai deixo contigo, deixa eu ir que a Mary Jane tá me chamando, rsrsrs.

Realmente não funciona no IE. caso seu cliente seja “dependente” dele, fica bem complicado arrumar solução.

[quote=spidermanx]E por falar em fazer alguns testes, fiz um programinha muito do bobo aqui só pra ver o comportamento das div’s e deu certo:

<html>
	<head>
		<style type="text/css">
			div:nth-child(odd){background: #CCC;}
			div:nth-child(even){background: #EEE;}
			div{float: left; height: 100%}
		</style>
	</head>
	<body>
		<div>Coluna 1</div>
		<div>Coluna 2</div>
		<div>Coluna 3</div>
	</body>
</html>

O que estava faltando para ele achar as divs é o seletor padrão “nth-child”:

div:nth-child(odd)...
div:nth-child(even)...

Faz um copi/cola ae e vê no que dá…[/quote]

Funciona :smiley: é bem por ai mesmo…

Complementando seu teste, mudei de div para body, pois ambos são tags e podem receber regras CSS,
só que não faz este zebrado, porque pelo que tenho visto precisa de mais de um componente, e boby é apenas um…

Mesmo assim já estamos avançando. Vou fazer uns teste aqui agora com body background repeat e estrutura de repetição com javascript, para ver se com um único componente (body) funciona, porque assim posso posicionar as demais divs do site livremente…

Não tem problema. Não é para cliente, é para aprendizado mesmo.

:smiley: Também sou fã do homem aranha…

Engraçado é quando um professor (meu antigo professor) de Java e fã do homem aranha diz uma frase assim na sala de aula:

“Eu vou ensina para vocês a parte visual de Java. Mas lembre-se, com grandes poderes vêm grandes responsabilidades”

:lol: :lol: :lol:

Por que não usa tabela?

http://srinivasang87.blogspot.com.br/2008/11/jquery-chess-board.html

[quote=Schuenemann]Por que não usa tabela?

http://srinivasang87.blogspot.com.br/2008/11/jquery-chess-board.html[/quote]

Obrigado pela ideia :smiley:

Mas, o problema é que quero fazer que este tabuleiro de xadrez seja o background de minha página :wink: Porém, tudo isto pode ser resolvido se eu usar uma imagem (como somente um quadrado branco e outro preto e usar background repeat no corpo da página), acho que vou fazer isto mesmo, estava tentando fazer sem imagens de fundo (basicamente) à toa, só espero que está funcionalidade (de fazer sem imagem) venha em alguma versão futura do HTML.

:thumbup:

Você não está fazendo um jogo de xadrez? Acho que faz todo o sentido o tabuleiro ser uma tabela.

Se quiser, pode tentar gerar uma imagem em tempo de execução e colocá-la como plano de fundo: http://www.codeproject.com/Articles/221941/HTMLImage-Generating-Dynamic-Image-using-Plain-Jav
Daí pode definir as cores. Talvez alguma biblioteca simplifique o que o cara fez naquele post.

Mas eu usaria uma tabela.

Não. Eu estou fazendo um site que tem conteúdos sobre jogo de xadrez (e não um jogo).

Por exemplo, o background color do body do GUJ é um azul claro, algo do tipo:

<BODY BGCOLOR=#C0D9D9> </BODY>

Eu queria fazer isto (para alternar entre as cores preto e branco):

<BODY BGCOLOR=#FFFFFF; #000000> </BODY>

[quote=Schuenemann]Se quiser, pode tentar gerar uma imagem em tempo de execução e colocá-la como plano de fundo: http://www.codeproject.com/Articles/221941/HTMLImage-Generating-Dynamic-Image-using-Plain-Jav
Daí pode definir as cores. Talvez alguma biblioteca simplifique o que o cara fez naquele post.[/quote]

Obrigado pelo link, vou verificar e depois posto o resultado.

P.S.: Em anexo tem uma imagem para você entender o que eu quero fazer.

:thumbup:

body {
    background-image:
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    background-image:
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    -moz-background-size:100px 100px;
    background-size:100px 100px;
    -webkit-background-size:101px 101px;
    background-position:0 0, 50px 50px;
}

Achei esse código acho que no stackOverFlow. Se quiser pode testar aqui:
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body

Agora só ver com alguém que entenda de CSS para arrumar conforme você quer.

Eu vi isso a alguns meses, estudando HTML5 com uso de CSS3

Como o colega mostrou acima, usamos funções do navegador, e existe até mesmo alguns javascript que permite usar os efeitos em navegadores antigos.

Veja se este link pode ajuda-lo:
http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

Muito obrigado a todos que me ajudaram ao decorrer desses quase 6 meses :smiley:

Problema resolvido :smiley:

Exatamente isto que eu queria. :smiley:

Muito bom, tem diversos gradients que vão além do que eu precisava (por enquanto). :smiley:

:thumbup:

//