Gordonmac Dot Com

Mostly a web development blog

CSS navigation with animated underline effect

Posted: March 16th, 2016 | Posted in: CSS, Tutorials

Just part of something I’ve been working on. The requirement was for a simple navigation, but it also had to have something different. I’m really starting to love CSS transforms! See the Pen Navigation with Animated Underline by Gordon Mackay (@gordonmacdotcom) on CodePen. The HTML <nav class=”nav–top”> <ul> …
Read more…

How to toggle responsive CSS navigation

Posted: February 25th, 2016 | Tags: | Posted in: CSS, jQuery, Tutorials

There are probably hundreds of ways to implement visibility toggling for navigation in responsive states, but this is the way I do it, it’s simple and sane. See the Pen Basic Responsive Navigation Toggle by Gordon Mackay (@gordonmacdotcom) on CodePen. The HTML Nothing exciting about the HTML markup …
Read more…

Creating a “hero panel” with video background

Posted: February 2nd, 2016 | Posted in: CSS, jQuery, Tutorials

Responsive video backgrounds (as featured on the homepage of the current version of this site) are pretty popular at the moment. They’re pretty cool if you want something a bit different from a static hero panel. Here’s how I did mine. See the Pen A “hero panel” with video …
Read more…