Home > Perspective > Code Snippets

Code Snippets

HTML & CSS

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.

Advertisements
Categories: Perspective
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: