Hi! I'm Håvard Brynjulfsen,
a front-end web designer based in Bergen, Norway.

UX design enthusiast. CSS lover.

Sometimes I create stuff. Other times I just code stuff. Occasionally I even write some stuff. Currently at Bouvet

Day to day I work as a front-end designer at Bouvet, but here's some of the stuff I've done personally recently.

Noel.fun

A small blog built with Eleventy containing a collection of my favorite fun facts. Read, have a laugh, share with friends on Twitter. Awarded 'Most loved one page website distinction' from One Page Love.

About the project

StageOS

In 2020 Microsoft developer Stephanie Eckles launched a collaboration project urging fellow developers to restyle her website stylestage.dev using only CSS without altering the HTML. This was my contribution.

About the project

This is my blog. Or stories. Or whatever you wanna call it. Here you'll find a bunch of my writing, some of which has been published to the likes of UXCollective.cc on Medium and CSS-Tricks.

Creativity is only impressive when there’s restrictions

Why “form follows function” is a valid design principle in today’s web design landscape.

How to Create a Shrinking Header on Scroll Without JavaScript

Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real estate for other content...

Users will break your design and it's not their fault

Enter the uncomfortable zone of designing for variable "x".

I'm an avid user of CodePen and huge fan of their community. It's become somewhat a daily hobby of mine to use this platform to recreate Dribbble shots or explore the many possiblities CSS has to offer.

A few of my pens have been featured in the CodePen Spark newsletter and in The Most Hearted Pens of 2020 and The Most Hearted Pens of 2021 lists.

Here are some of my personal favorites.

3D Pause Button

A skeuomorphic styled component created by utilizing box-shadows and gradients.

3D Switch

Skeuomorphism is dead - or at least in hibernation. When it eventually comes back I'll be ready to create 3D components like this one using only CSS.

Checkbox group styled as tiles

Checkboxes doesn't have to be boring.

Context menu

Another Dribbble recreation showing of the beautiful icon pack 'Feather', featured in the 184th editon of the CodePen Spark.

Skeleton loading using only a few lines of CSS

Skeleton or ghost loading is present in most applications today and here's an example of how you can create one with some CSS.

Sliding Tabs Using Only CSS Transitions

This Dribbble shot recreation landed the 62nd place in the Most Hearted Pens of 2020 and demonstrates how to create a tab component with a sliding focus effect on click.

More pens