Tips For Making Websites Better With CSS
- Written by who people like to call the CSS Wizard (aka @SalladShooter)
So you know how to make websites now? But you want to add some flair to make it look nice for everyone? Here are some tips to accomplish that.
Light Mode and Dark Mode:
Some websites like Google when you change if you are on Light Mode or Dark Mode changes the appearance of your screen to fit that mood. To achieve this we can use @media a useful CSS identifier that can be used for many things. We can also incorporate CSS Variables to easily change everything on your website. We will first change the body, but if any there are other elements you want to change you can change their color too the same way as this (the variables will be defined then so you don’t need to put it in @media).
You can use this for light/dark mode based on the user’s browser’s preferred color scheme:
@media (prefers-color-scheme: light) {
:root {
--background: white;
--foreground: black;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background: #131b2b;
--foreground: white;
}
}
body {
background-color: var(--background);
color: var(--foreground);
}
To achieve both you must put both of them in your CSS file.
Animations:
Animations can make things feel alive. Such as scrolling animations, hover animations, animations when the website starts. The way you can accomplish them is by using @keyframes and then the animation name. You can use CSS to change how the element moves or looks.
Animation When Website Starts:
To make a simple moving up animation for when the website starts you can use this →
@keyframes moveUp {
0% { opacity: 0; transform: translateY(10em); }
75% { opacity: 0.75; transform: translateY(-0.5em); }
100% { opacity: 1; transform: translateY(0em); }
}
Then you can use it like so →
body {
animation: ease-in-out moveUp 1s forwards;
}
It makes a nice move in sequence when the website starts. You can take it a step further by adding one to all your elements and delay some so it’s like a domino effect.
Hover Animation:
In this example we will be using the same moveUp keyframe.
@keyframes moveUp {
0% { opacity: 0; transform: translateY(10em); }
75% { opacity: 0.75; transform: translateY(-0.5em); }
100% { opacity: 1; transform: translateY(0em); }
}
To make hover animations (animations that occur when your cursor is on top of the element) you need to use :hover beside your element.
I am going to use a div to show the example.
div:hover {
animation: ease-in-out moveUp 1s forwards;
}
The :hover tells the website when there is a cursor on top of it do whatever is inside of it.
Scrolling Animations:
This one will be more complicated and require some JS.
First make a .reveal class in CSS and make it have this code →
.reveal {
position: relative;
opacity: 0;
}
Then make a .reveal.active class →
.reveal.active {
transform: translateY(0);
opacity: 1;
}
For the JS it checks if there is a .reveal being used then it will execute what you tell it to do animation wise →
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 25;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
Now make a .active.#animationName and put the animation you want to use inside (I will be using moveUp again) →
.active.moveUp {
animation: ease-in-out moveUp 1s forwards;
}
In the HTML you can now have your element setup like this (this is an example and can be used for any element) →
<h1 class="style-class reveal moveUp">Text</h1>
This is the end!
You can add a ton more things to make your website look good but these are a few things to make you look like a professional. I hope everyone enjoyed! Make sure to reply with your comments, questions, and suggestions below.
— @SalladShooter
- Claim
