I'm starting in CSS and WordPress, I would like to create a pattern of circle-shaped articles with numbers in the center.
My idea is for a bingo site, so I would like to update only the numbers, leaving the circle format as the default.
Something like that. Is it possible?
Use display: flex properties for vertical and horizontal alignment of number, background fault%, box-shadow to create a shadow and border-radius: 50% to create a circle:
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> With divs :
More or less this, main property is 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>Use circular gradient border only:
#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>Bonus: This video is a must-have for anyone looking to get deeper into CSS borders link
In CSS using border-radius = 100% I believe it's the simplest way