Playing Around with CSS - Transparent Nav Bar

We’ve finished our first two weeks of class, and it’s been a great experience so far. I definitely feel a lot more comfortable creating things with HTML and CSS. I had some background in being able to read HTML/CSS since I dabbled in SEO and UI design in the past, but being able to create things from scratch is a load of fun! I found that the first two weeks of the course were manageable, though there were definitely days when I went home completely brain-exhausted, but I guess it’s called a bootcamp for a reason!

Going into next week will be a bit daunting since we’ll be getting into Javascript. I tried to do as much prep work as possible through Codecademy, etc etc, but I’m sure it’ll be another brain workout. Pretty excited though!

I wanted to show off this little fixed navigation bar that I created with HTML and CSS. I’ve been having fun adding in some subtle animations and touches.

  • subtle box-shadow on the white navigation bar to differentiate it from the body
  • breadcrumbs underline on  the Home link, to show where the user is
  • :hover and transition on the green underline for navigation links
  • :hover and transition outline on the text/password boxes
  • box-shadow on the text/password boxes on :focus
  • autofocus on the username box on page-load for simple user-experience streamlining

See the Pen jbdOMX by Duncan Leung (@duncanleung) on CodePen.

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!