Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Quadriculado (xadrez) CSS

25-01-2017 13:27

Olá!
Eu preciso usar um quadriculado (xadrez) numa página, mas tem de ser responsivo, e gostaria que fosse em CSS puro. Fiz várias pesquisas, inclusive, encontrando, nos resultados, códigos que fazem um tabuleiro de xadrez, mas que não são responsivos, e, quando são, usam JavaScript, ou jQuery, ou são muito grandes.
Pretendo algo o mais simples possível, mas que permita algumas personalizações, como mudar o fundo do quadrado e a cor da borda no efeito hover.
Eu encontrei um código bem simples, que está abaixo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> ul { position:relative; margin:0; padding:0; } li { width:25%; height:60px; display:block; float:left; list-style-type: none; margin:0; padding:0; background-color:#eee; box-sizing: border-box; } li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>

Estou tentando as adaptações que pretendo: eu inseri bordas, consegui incluir a cor de fundo e a borda no efeito hover (mas a cor de fundo está mudando somente na cor mais clara), centralizei o conteúdo, ficando assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> ul { position:relative; margin:0; padding:0; } li { width:25%; height:60px; line-height:60px; text-align:center; display:block; float:left; list-style-type: none; margin:0; padding:0; background-color:#eee; box-sizing: border-box; border: 1px solid #0000FF; } li:hover{ background-color:#ffffb7; border: 1px solid #00FF00; } li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; } </style> </head> <body> <div id="tab"><div id="cel_tab"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> </ul> </body> </html>

Mas veja que, assim, as bordas grudam uma na outra, o que quero evitar. E, no momento, para fazê-lo, mudei o valor de margin de li de 0 para 1px.
Porém, com isso, o quadriculado perde a sequência de cores, deixando de haver a alternância entre a mais clara e a mais escura.
Para tentar contornar isso, alterei o valor da largura de li de 25% para 24.8%, e, aparentemente, a sequência voltou ao normal.
Mas, se uso o modo responsivo do navegador (estou testando no Firefox), a sequência de cores é perdida, não se ajustando o todo à largura.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> ul { position:relative; margin:0; padding:0; } li { width:24.8%; height:60px; line-height:60px; text-align:center; display:block; float:left; list-style-type: none; margin:1px; padding:0; background-color:#eee; box-sizing: border-box; border: 1px solid #0000FF; } li:hover{ background-color:#ffffb7; border: 1px solid #00FF00; } li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> </ul> </body> </html>

Há ideia de como se pode corrigir isso para que a sequência de cores não seja perdida, mantendo-se a responsividade?
E, também, como se pode fazer para a cor de fundo mudar quanto à cor mais escura do xadrez, também?
Grato.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Quadriculado (xadrez) CSS

25-01-2017 13:58

Veja se é isso


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> ul { position:relative; margin:0; padding:0; vertical-align: middle; } li { width:20%; height:60px; line-height:60px; text-align:center;     height:60px; display:block; float:left; list-style-type: none; margin:2px; padding:0; background-color:#eee; box-sizing: border-box; border:1px solid #000; } /* hover da cor clara */ li:hover{background-color:yellow} li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; } /* hover da cor escura */ li:nth-child(8n+2):hover, li:nth-child(8n+4):hover, li:nth-child(8n+5):hover, li:nth-child(8n+7):hover { background-color:yellow; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 15:15

Conforme você fez, colocando 20% de largura na li, o alinhamento do todo fica à esquerda. Eu gostaria que fosse ocupada toda a largura do navegador (por isso os 25%), ou centralizar o todo.

Do jeito que ficou, há sobras na lateral direita no navegador, sem o teste do responsivo e com ele.

Você tem alguma sugestão de como manter 25% de largura na li? E, também, de como centralizar se largura de percentual menor que 25%?

Grato.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 15:49

Encontrei isto aqui (traduzi pelo Google): https://css-tricks.com/how-nth-child-works/. Estou tentando entender.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Quadriculado (xadrez) CSS

25-01-2017 16:47

Eu tenho aqui o exemplo que você postou e parece estar correto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> ul { position:relative; margin:0; padding:0; } li { width:25%; height:60px; line-height:60px; text-align:center; display:block; float:left; list-style-type: none; margin:0; padding:0; background-color:#eee; box-sizing: border-box; border: 1px solid #0000FF; } li:hover{ background-color:#ffffb7; border: 1px solid #00FF00; } li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; } /* hover da cor escura */ li:nth-child(8n+2):hover, li:nth-child(8n+4):hover, li:nth-child(8n+5):hover, li:nth-child(8n+7):hover { background-color:yellow; } </style> </head> <body> <div id="tab"><div id="cel_tab"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> </ul> </body> </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 16:59

Obrigado. Eu vou ver.

Encontrei um exemplo interessante que informa sobre as percentagens (e é responsivo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> * { font-family: sans-serif; box-sizing: border-box; } ul { padding: 0; } li { float: left; text-align: center; color: #fff; font-weight: bold; background-color: mediumaquamarine; list-style: none; border: 2px solid #fff; padding: 8px; } /* one item */ li:first-child:nth-last-child(1) { width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { width: 25%; } /* five items */ li:first-child:nth-last-child(5), li:first-child:nth-last-child(5) ~ li { width: 20%; } </style> </head> <body> <ul> <li>A</li> </ul> <ul> <li>A</li> <li>B</li> </ul> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> </body> </html>

Está neste link: http://codepen.io/mattlubner/pen/RWPYdx.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 17:07

Nesse meu exemplo que você citou, há a questão de se atribuir valor para a margem em li (para as bordas não ficarem grudadas) e a sequência se perder. Isso é que eu gostaria de evitar. Atribuí o valor de 1px à margem, houve o espaço entre as bordas, e a sequência se perdeu.

Com base no código que postei informando sobre as percentagens, há como você me ajudar a construir um xadrez com cada largura de 25%? Naquele exemplo há um espaço entre os elementos.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 17:38

Mesclei o código que postei inicialmente e o código que informa sobre as larguras, fiz algumas tentativas, mas a melhor foi a que manteve os valores de li:nth-child do código que postei no início, mas intercalou coluna verde com cinza, sem formar o xadrez. Mas há espaço entre os elementos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> * { font-family: sans-serif; box-sizing: border-box; } ul { padding: 0; } li { float: left; text-align: center; color: #fff; font-weight: bold; background-color: mediumaquamarine; list-style: none; border: 2px solid #fff; padding: 8px; width: 25%; } li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc;width: 25%; } </style> </head> <body> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </body> </html>

O que faltaria para formar o xadrez?
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 17:49

Cara, consegui!

Vou tentar colocar as bordas e o hover.

Veja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> * { font-family: sans-serif; box-sizing: border-box; } ul { padding: 0; } li { float: left; text-align: center; color: #fff; font-weight: bold; background-color: mediumaquamarine; list-style: none; border: 2px solid #fff; padding: 8px; width: 25%; } li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc;width: 25%; } </style> </head> <body> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> </ul> </body> </html>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Quadriculado (xadrez) CSS

25-01-2017 17:51

Deu certo ai.

Montei também um exemplo aqui. Cada elemento com 25%. Para manter o espaço usei uma borda que não e vista. Testa ai.

<style> ul{ 100%; position:relative; margin:0; padding:0; } li{ width:25%; height:60px; line-height:60px; text-align:center; display:block; float:left; list-style-type: none; margin:0; padding:0; background-color:#eee; box-sizing: border-box; border: 2px solid white; } li:nth-child(1) { background-color: white; } li:nth-child(2) { background-color: gray; } li:nth-child(3) { background-color: white; } li:nth-child(4) { background-color: gray; } li:nth-child(5) { background-color: gray; } li:nth-child(6) { background-color: white; } li:nth-child(7) { background-color: gray; } li:nth-child(8) { background-color: white; } li:nth-child(9) { background-color: white; } li:nth-child(10) { background-color: gray; } li:nth-child(11) { background-color: white; } li:nth-child(12) { background-color: gray; } li:nth-child(1):hover, li:nth-child(2):hover, li:nth-child(3):hover, li:nth-child(4):hover, li:nth-child(5):hover, li:nth-child(6):hover, li:nth-child(7):hover, li:nth-child(8):hover, li:nth-child(9):hover, li:nth-child(10):hover, li:nth-child(11):hover, li:nth-child(12):hover { background-color: yellow; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 17:55

Vou ver o que você montou. Nesse código que mesclei eu disse das bordas, mas elas existem, só que são brancas e formam o espaço entre os elementos.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 18:29

Ainda não tentei colocar borda no código que adaptei, mas o que você montou está sem bordas, e, se tento colocá-las, no trecho de código abaixo, o espaço em branco entre os elementos é anulado:

li:nth-child(1) { background-color: white;border: 1px solid black; } li:nth-child(2) { background-color: gray; border: 1px solid black;} li:nth-child(3) { background-color: white;border: 1px solid black; } li:nth-child(4) { background-color: gray; border: 1px solid black;} li:nth-child(5) { background-color: gray;border: 1px solid black; } li:nth-child(6) { background-color: white; border: 1px solid black;} li:nth-child(7) { background-color: gray;border: 1px solid black; } li:nth-child(8) { background-color: white; border: 1px solid black;} li:nth-child(9) { background-color: white;border: 1px solid black; } li:nth-child(10) { background-color: gray; border: 1px solid black;} li:nth-child(11) { background-color: white;border: 1px solid black; } li:nth-child(12) { background-color: gray; border: 1px solid black;}

Eu tentei inserir a borda parcialmente, mas não adiantou.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Quadriculado (xadrez) CSS

25-01-2017 18:32

Você quer adicionar a borda e ainda manter o espaço entre os li?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

25-01-2017 19:16

Isso mesmo. E que a borda da li mude de cor no hover, como mude a cor do fundo.

Fiz uma tentativa no código que adaptei na minha mensagem de n.° 9, criando uma div com uma borda e a inserindo dentro da li, funcionou com o padding que lá está. Mas, se coloco uma largura, já faz perder tudo. Pensei em tentar no código que você montou, mas os dois usam a borda branca na li como espaço entre elas.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Quadriculado (xadrez) CSS

25-01-2017 19:38

Testa esse CSS no código do post 9

<style> * { font-family: sans-serif; box-sizing: border-box; } ul { padding: 0; } li { display:block; float: left; text-align: center; color: #fff; font-weight: bold; background-color: mediumaquamarine; list-style: none; border:2px solid white; padding: 8px; width: 25%; } /* blocos verdes */ li:nth-child(8n+1), li:nth-child(8n+3), li:nth-child(8n+6), li:nth-child(8n+8) { width: 25%; -webkit-box-shadow:inset 0px 0px 0px 2px #000; -moz-box-shadow:inset 0px 0px 0px 2px #000; -o-box-shadow:inset 0px 0px 0px 2px #000; -ms-box-shadow:inset 0px 0px 0px 2px #000; box-shadow:inset 0px 0px 0px 2px #000; } /* blocos verdes hover */ li:nth-child(8n+1):hover, li:nth-child(8n+3):hover, li:nth-child(8n+6):hover, li:nth-child(8n+8):hover { width: 25%; background-color:yellow; -webkit-box-shadow:inset 0px 0px 0px 2px gray; -moz-box-shadow:inset 0px 0px 0px 2px gray; -o-box-shadow:inset 0px 0px 0px 2px gray; -ms-box-shadow:inset 0px 0px 0px 2px gray; box-shadow:inset 0px 0px 0px 2px gray; } /* blocos cinzas */ li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; width: 25%; -webkit-box-shadow:inset 0px 0px 0px 2px #000; -moz-box-shadow:inset 0px 0px 0px 2px #000; -o-box-shadow:inset 0px 0px 0px 2px #000; -ms-box-shadow:inset 0px 0px 0px 2px #000; box-shadow:inset 0px 0px 0px 2px #000; } /* blocos cinzas hover */ li:nth-child(8n+2):hover, li:nth-child(8n+4):hover, li:nth-child(8n+5):hover, li:nth-child(8n+7):hover { background-color:red; width: 25%; -webkit-box-shadow:inset 0px 0px 0px 2px green; -moz-box-shadow:inset 0px 0px 0px 2px green; -o-box-shadow:inset 0px 0px 0px 2px green; -ms-box-shadow:inset 0px 0px 0px 2px green; box-shadow:inset 0px 0px 0px 2px green; } </style>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS  #resolvido

25-01-2017 20:18

É isso.

Eu deixei o padding com o valor zero e inseri altura para aceitar o conteúdo (pensei que não fosse aceitar, mas aceitou).

E, também, deixei bordas e espaço entre as li menores, alterando os valores de 2px para 1px (a quem precisar, é só aumentar tais valores).

Veja como ficou:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> * { font-family: sans-serif; box-sizing: border-box; } ul { padding: 0; } li { display:block; float: left; text-align: center; color: #fff; font-weight: bold; background-color: mediumaquamarine; list-style: none; border:1px solid white; padding: 0; width: 25%; height:100px; line-height:100px; } /* blocos verdes */ li:nth-child(8n+1), li:nth-child(8n+3), li:nth-child(8n+6), li:nth-child(8n+8) { width: 25%; -webkit-box-shadow:inset 0px 0px 0px 1px #000; -moz-box-shadow:inset 0px 0px 0px 1px #000; -o-box-shadow:inset 0px 0px 0px 1px #000; -ms-box-shadow:inset 0px 0px 0px 1px #000; box-shadow:inset 0px 0px 0px 1px #000; } /* blocos verdes hover */ li:nth-child(8n+1):hover, li:nth-child(8n+3):hover, li:nth-child(8n+6):hover, li:nth-child(8n+8):hover { width: 25%; background-color:yellow; -webkit-box-shadow:inset 0px 0px 0px 1px gray; -moz-box-shadow:inset 0px 0px 0px 1px gray; -o-box-shadow:inset 0px 0px 0px 1px gray; -ms-box-shadow:inset 0px 0px 0px 1px gray; box-shadow:inset 0px 0px 0px 1px gray; } /* blocos cinzas */ li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; width: 25%; -webkit-box-shadow:inset 0px 0px 0px 1px #000; -moz-box-shadow:inset 0px 0px 0px 1px #000; -o-box-shadow:inset 0px 0px 0px 1px #000; -ms-box-shadow:inset 0px 0px 0px 1px #000; box-shadow:inset 0px 0px 0px 1px #000; } /* blocos cinzas hover */ li:nth-child(8n+2):hover, li:nth-child(8n+4):hover, li:nth-child(8n+5):hover, li:nth-child(8n+7):hover { background-color:red; width: 25%; -webkit-box-shadow:inset 0px 0px 0px 1px green; -moz-box-shadow:inset 0px 0px 0px 1px green; -o-box-shadow:inset 0px 0px 0px 1px green; -ms-box-shadow:inset 0px 0px 0px 1px green; box-shadow:inset 0px 0px 0px 1px green; } </style> </head> <body> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> </ul> </body> </html>

Muito obrigado, novamente.
1
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Quadriculado (xadrez) CSS

26-01-2017 17:07

Permita uma observação, somente, por favor.

Percebi ao adaptar no meu código: sobre a UL, com o CSS como está, fica um espaço em branco, que atrapalha o layout. Para sanar isso, incluí margin: 0px no código dela. Para mim, resolveu.

Ficou assim:

ul { padding: 0;margin: 0px; }

Grato
1

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado