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.
Rebuilding my website: 2020
Posted 25th November 2020
No comments
It’s been seven years since I last re-designed my personal website. Here is a look at the technologies that I used to build my new website.
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.