Gordonmac Dot Com

Mostly a web development blog

Category: Tutorials

Little nuggets of information about Wordpress, CSS, SASS, PHP, SEO and Adobe products.

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…

Hamburger-Menu-Blue-Version-01

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…

CSSlogo

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…

sasslogo

I love SASS (Syntactically Awesome StyleSheets)

Posted: January 19th, 2016 | Tags: | Posted in: CSS, Tutorials

I’ve always enjoyed writing CSS, doing the calculations required to get the percentage widths for page elements is almost therapeutic in some ways, so the idea of using a preprocessor to develop CSS for websites was, for me, for a long time, something I couldn’t really get into. …
Read more…