Subtle Ways to Make Your Website Prettier

• Sat, Jun 25, 2022
• 2-minute read

Table of Contents

Sometimes, the only things you need to make your website better looking are a few CSS and JavaScript lines. Here are four simple lines of code to make your website looks prettier and smoother.

Make scroll smoother

Add the following CSS line to make the scrolling smoother.

html {
	scroll-behavior: smooth;
}

Site without scroll-behavior: smooth:

Use CSS transition

Add the following CSS line to enable transitions on hover. This can also be applied to other HTML elements like the anchor tag a. The transition takes three parameters:

1. Property of the element on which transitions will be applied (all, color, width, height, etc.)
2. Duration (in milliseconds)
3. Transition effect (ease-in, ease-out, ease-in-out, ease, or a cubic-bezier function).

button {
	transition: all 0.4s ease-in-out;
}

Site without transition:

Make backgrounds fixed

When I first encountered a fixed-background I was amazed at how cool it is, and I thought some crazy JavaScript was involved in this. Little did I know, it only involved one CSS line!

Disclaimer: I used the site by HTML5 UP for this demo. Check out their site for free HTML5 site templates!

.background {
	background-attachment: fixed;
}

Site without fixed-background:

Use animations

For adding animations, I recommend the use of the Animation On Scroll Library because of how easy it is to use. The set-up may be a bit involved at first, but you’ll get used to it!

On your HTML head, load the library CSS:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />

On your HTML file just before the </body> tag, load the library JS:

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

On you JavaScript file, initialize the library:

AOS.init();

On your element that will be animated, apply this:

<div data-aos="fade-left"></div>

You can change the value of data-aos to other animation effects (fade-right, fade-up, fade-down, zoom-in, zoom-out, etc.). You could also change other settings like duration, offset, etc. See more here.

In the demo below, I placed data-aos="fade-right" on the div element on the left, and data-aos="fade-right" on the div element on the right. This creates an effect like the two elements are closing in together when the site is loaded.

Site without animation: