
Working with Fixed Headers in CSS
Posted 6th December 2024
No comments
Lots of websites use fixed headers as part of their design, but there are often unintended consequences to implementing such a design element.

Multi-line gradient hyperlinks
Posted 18th February 2021
No comments
Use cascading style sheets to create a gradient underline link that will span multiple lines.

Styling the colour of <pre><code> horizonal scrollbars
Posted 4th December 2020
No comments
Despite the absence of a proper scrollbar colouring standard in Cascading Style Sheets (CSS), there is a way to colour the horizontal scrollbar in a <pre><code> block that will work in Edge, Safari, Firefox and Chrome.

Fix a DIV to the top of a page with CSS
Posted 7th February 2014
No comments
Use pure CSS to position a DIV at the top of a web page so that when users scroll down, the DIV will remain visible at the top.

Responsive images made easy
Posted 17th January 2014
3 comments
In this era of ‘Responsive Web Design’ where websites need to function well on smartphones and tablets as well as desktop computers, finding a solution for a website’s images can be tricky.

Cross-domain support for embeded @font-face fonts in Firefox and Internet Explorer
Posted 13th October 2013
3 comments
A simple approach to getting cross-domain support for embedded @font-face fonts in Firefox and Internet Explorer.

Creating a pure CSS ‘Print Friendly’ page accessible via a hyperlink
Posted 20th September 2013
No comments
In this tutorial, I shall demonstrate how to create a ‘Print Friendly’ version of your website with pure CSS and how to employ a small piece of JavaScript to make it accessible via a single click.

Simple CSS menu separators for navigation
Posted 9th September 2013
1 comment
Use CSS to Insert an unobtrusive image or a symbol as a separator between unordered or ordered list items that function as a navigation menu.

Getting started with Responsive Web Design
Posted 9th April 2012
11 comments
This article provides new users with ten easy-to-follow steps for designing a website on Responsive Web Design principles from scratch. RWD may look complicated, but this article will make it easy for you.

Create a clickable corner ribbon for your website
Posted 22nd January 2012
3 comments
Using CSS and simple HTML, easily create a promotional “ribbon” in the corner of your website that will link to another page.