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.
See the Pen oKrFg by Brad Dalton (@braddalton) on CodePen.
Installation
- Simply copy all the CSS code and paste it at the end of your child themes style.css file
- 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);
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
You could use something like this:
The CSS for Media Queries depends on a lot of different variables.
Nice one Brad
Might give this one a try.
Good for step by step tutorials amongst other things Keith.
Softens it up a bit as well.