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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems