WP SITES

2966

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Colored Numbered Circles Using Pure CSS & HTML

Here’s some very basic numbers you can use which are very easy to install.

To increase the size, you can wrap the HTML using the WordPress Heading tags or simply add a font-size to each CSS rule.

colored number circle

See the Pen oKrFg by Brad Dalton (@braddalton) on CodePen.

Installation

  1. Simply copy all the CSS code and paste it at the end of your child themes style.css file
  2. Wrap your numbers using the span tags in your text editor
<h1><span class="blue">3</span></h1>

You could also generate CSS for a box shadow effect and add it to each CSS rule.

-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);

with box shadow

Reader Interactions

Comments

  1. Hello Brad,

    I’m want to use these circles in the four home page special widgets areas in the minimum pro theme. Couple of questions…. How would you add a hover effect (color change) to the circles? Are the circle responsive?

    Thanks

    Reply

    • You could use something like this:

      {
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
	  filter: alpha(opacity=10);
	  -moz-opacity: 0.1;
	  -khtml-opacity: 0.1;
	  opacity: 0.1;
}

      The CSS for Media Queries depends on a lot of different variables.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *