-1

Estou iniciando em CSS e WordPress, gostaria de criar um padrão de artigos com formato de círculo com números no centro.

Minha ideia é para um site de bingo, aí gostaria de atualizar somente os números, deixando o formato de círculo como padrão.

Algo como isso. É possível?

inserir a descrição da imagem aqui

0

4 Respostas 4

4

Use propriedades de display: flex para alinhamento vertical e horizontal do número, background degradê, box-shadow para criar uma sombra e border-radius: 50% para criar um círculo:

ul, li{
   margin: 0; padding: 0;
   list-style: none;
}

ul.circulo li, div.circulo{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   float: left;
   margin: 4px;
   font-size: 30px;
   font-weight: bold;
   color: #555;

   background: -moz-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(16%, #f5f5f5), color-stop(100%, #999999));
   background: -webkit-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: -o-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: -ms-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#999999',GradientType=0 );
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#999999',GradientType=0 );

   -webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow:    2px 2px 2px 0px rgba(50, 50, 50, 0.75);
   box-shadow:         2px 2px 2px 0px rgba(50, 50, 50, 0.75);
}
<h2>Com LI:</h2>

<br />

<ul class="circulo">
   <li>01</li>
   <li>02</li>
   <li>03</li>
   <li>04</li>
   <li>05</li>
</ul>

<br clear="all" /><br />

<h2>Com DIV:</h2>

<br />

<div class="circulo">01</div>
<div class="circulo">02</div>
<div class="circulo">03</div>
<div class="circulo">04</div>
<div class="circulo">05</div>

Com divs:

7
  • Nova trick: display:flex, não sabia dessa! nice solução Commented 13/11/2017 às 22:10
  • Isso mesmo! Só tem um problema, acabou modificando todas as listas do blog. Como alterar somente quando usar essa classe? Acho que é aqui o problema: ul, li{ margin: 0; padding: 0; list-style: none; } Commented 14/11/2017 às 18:44
  • @NetoOliveira E ae, blz? É só um exemplo. Você pode aproveitar o código para fazer como quiser, com divs, por exemplo. :)
    – Sam
    Commented 14/11/2017 às 18:46
  • Como ficaria com DIVS? Commented 14/11/2017 às 18:47
  • @NetoOliveira Incluí na resposta com LI e com DIV.
    – Sam
    Commented 14/11/2017 às 18:52
0

Mais ou menos isso, propriedade principal é o border-radius:

.circulo{
 border: 1px solid #000;
 border-radius:30px;
 width:50px;
 height:50px;
 text-align:center;
 vertical-align: middle;
 background-color: #ffe;
 line-height:50px;    
 box-shadow: 2px 2px 5px #999;
}
<div class='circulo'>666</div>

0

É só utilizar borda circular com degradê:

#num {
  width: 75px;
  height: 75px;
  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
  display: flex;
  flex-flow: column;
  align-items: center;       /* alinhar verticalmente   */
  justify-content: center;   /* alinhar horizontalmente */
  font-size: xx-large;
  font-family: sans, serif;
  border: 1px solid #ccc;
  border-radius: 100%;
}
<div id="num">10</div>

Bônus: esse vídeo é imperdível para quem quer começar a se aprofundar em bordas CSS https://www.youtube.com/watch?v=b9HGzJIcfDE

-2

no CSS utilizando border-radius = 100% creio que é a forma mais simples

1
  • Engraçado quando eu entrei aqui na pergunta do cara ninguém tinha respondido e tinha umas 15 visitas e quando eu decido postar pra tentar ajudar recebo ponto negativo e como vejo abaixo tudo a mesma coisa usando border-radius e mascarando com outras opções tudo bem se quiser ajudar mas não precisa dar ponto negativo ridícula atitude desses caras. Commented 14/11/2017 às 4:32

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .