Skip to content

Diary of a front end developer

Welcome to an opinionated exploration of front end web development through the eyes of a developer who’s been building since the 90s. It contains live experiments (via CodePen), development set-up, guides, and industry musing. Covering all aspects of building for modern web, including code, user experience (UX), accessibility (a11y) and design, this is the diary of a front end developer.

CSSJSDesignAnimationMobile

Latest posts

Custom checkboxes with CSS

Along similar lines to this post on radio controls in forms, we can simply style checkboxes by using :after or :before pseudo-elements on the controls label. The HTML <input type=”checkbox” class=”form__checkbox” id=”checkbox1″ /> <label for=”checkbox1″ class=”my-label”>Checkbox 1</label> SCSS &:checked + .my-label:before { // the on styling for the box, using a url for a tick …

Continue reading Custom checkboxes with CSS

Custom radio buttons with CSS

Using a┬ácombination of :after and :before selectors on the controls <label> to position pseudo-elements over the real form control. This selector lets us use the :checked state of the element to apply a style to the controls label: // SCSS .checkbox:checked + .checkbox-label:after { // … adds a ‘spot’ to indicate checked status } We …

Continue reading Custom radio buttons with CSS

Animated CSS reveal on page load

I’m still playing with animations on page load and put together a little demo and some notes. What do we want to animate? @keyframes fadeinanimation { from { opacity: 0; } to { opacity: 1; } } Now we can apply the animation to our elements (the .fadein class): .fadedin { opacity: 0; animation: fadeinanimation …

Continue reading Animated CSS reveal on page load