• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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. James says

    March 1, 2014 at 6:32 pm

    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

    Log in to Reply
    • Brad Dalton says

      March 3, 2014 at 11:51 am

      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.

      Log in to Reply
  2. Keith Davis says

    February 15, 2014 at 5:31 pm

    Nice one Brad
    Might give this one a try.

    Log in to Reply
    • Brad Dalton says

      February 15, 2014 at 5:58 pm

      Good for step by step tutorials amongst other things Keith.

      Softens it up a bit as well.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.