Author Archive

Code Snippets

February 9, 2017 Leave a comment


At the current time I am not writing much front-end (HTML/CSS).  I work in Javascript some but mostly lately I’ve been writing Java in AEM (Adobe Experience Manager).  As I started posting more frequently I looked back at some things I worked on for the front-end.  It reminded me that HTML/CSS are pretty powerful and I am posting some examples of things I worked on a while back.

Circle with Outer Arc
This is a pure CSS implementation of a circle with an arc that indicates a percentage.  The classes are designed to use only one class on a DOM element to adjust the percentage represented.  My example represents ¾, but the classes can be set up to represent tenths or any percentage that someone is willing to put in the effort for.

See the Pen Circle with arc by Dennis M Mohr (@themohr) on CodePen.

Animated Hover Overlay A CSS transition effect that eases in an overlay when the element is hovered over.  It’s pretty singular in use but I did apply a BEM (Block Element Modifier) approach to make things reusable.

See the Pen Animated Hover Overlay Component by Dennis M Mohr (@themohr) on CodePen.

Categories: Perspective