November 17, 2023
WEB DESIGN CODE SHOWCASE: CURSORS, BACKGROUNDS & UX/UI RESOURCES
WRITTEN BY 
FRANCO, CYBERSECURITY ANALYST.
This showcase presents comprehensive snippets detailing the creation of distinctive cursors, captivating backgrounds, seamless animations, and additional web design elements. Elevate your skill set with these refined coding demonstrations.
QUICK NAVIGATION
PART: I
CURSORS
Introducing the Cursors Section: A detailed exploration into the realm of cursor design in web development. This segment unveils practical coding examples that showcase the art of crafting and customizing engaging cursors. Discover how these small but impactful elements contribute to enhancing user interaction and refining the website's visual appeal.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="cursor"></div>
</body>
</html>
CSS:
body {
margin: 0;
height: 100vh;
//cursor: none;
background: rgb(27, 27, 27);
}
.cursor {
width: 20px;
height: 20px;
border: 1px solid white;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
animation: cursorAnim .5s infinite alternate;
pointer-events: none;
}
.cursor::after {
content: "";
width: 20px;
height: 20px;
position: absolute;
border: 8px solid gray;
border-radius: 50%;
opacity: .5;
top: -8px;
left: -8px;
animation: cursorAnim2 .5s infinite alternate;
}
@keyframes cursorAnim {
from {
transform: scale(1);
}
to {
transform: scale(.7);
}
}
@keyframes cursorAnim2 {
from {
transform: scale(1);
}
to {
transform: scale(.4);
}
}
@keyframes cursorAnim3 {
0% {
transform: scale(1);
}
50% {
transform: scale(3);
}
100% {
transform: scale(1);
opacity: 0;
}
}
.expand {
animation: cursorAnim3 .5s forwards;
border: 1px solid red;
}
p {
color: white;
font-family: 'arial';
text-align: center;
margin-top: 50px;
font-size: 1.4em;
a {
color: teal;
}
}
Javascript:
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 500)
})
HTML:
<div id="trailer">
<i id="trailer-icon" class="fa-solid fa-arrow-up-right"></i>
</div>
<div class="interactable"></div>
CSS:
body {
background-color: #1b1b1b;
height: 100vh;
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 4vw, 100px);
}
body:hover > #trailer {
opacity: 1;
}
#trailer {
height: 20px;
width: 20px;
background-color: white;
border-radius: 20px;
position: fixed;
left: 0px;
top: 0px;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 500ms ease;
display: grid;
place-items: center;
}
#trailer:not([data-type=""]) > #trailer-icon {
opacity: 1;
}
#trailer-icon {
font-size: 6px;
line-height: 4px;
opacity: 0;
transition: opacity 400ms ease;
}
.interactable {
aspect-ratio: 1 / 1.5;
width: clamp(120px, 40vmin, 600px);
background-position: center 50%;
background-size: 100%;
opacity: 0.4;
transition: background-size 400ms ease, opacity 400ms ease;
}
.interactable:hover {
background-size: 105%;
opacity: 0.8;
}
Javascript:
const trailer = document.getElementById("trailer");
const animateTrailer = (e, interacting) => {
const x = e.clientX - trailer.offsetWidth / 2,
y = e.clientY - trailer.offsetHeight / 2;
const keyframes = {
transform: `translate(${x}px, ${y}px) scale(${interacting ? 8 : 1})`
}
trailer.animate(keyframes, {
duration: 800,
fill: "forwards"
});
}
const getTrailerClass = type => {
switch(type) {
case "video":
return "fa-solid fa-play";
default:
return "fa-solid fa-arrow-up-right";
}
}
window.onmousemove = e => {
const interactable = e.target.closest(".interactable"),
interacting = interactable !== null;
const icon = document.getElementById("trailer-icon");
animateTrailer(e, interacting);
trailer.dataset.type = interacting ? interactable.dataset.type : "";
if(interacting) {
icon.className = getTrailerClass(interactable.dataset.type);
}
}
PART: II
BACKGROUND
Introducing the Backgrounds Section: Explore the art of designing captivating backgrounds in web development. This section showcases practical code examples that demonstrate how backgrounds enhance user interaction and elevate a website's visual appeal.
HTML:
<div id="blob"></div>
<div id="blur"></div>
CSS:
body {
background-color: black;
height: 100vh;
margin: 0rem;
overflow: hidden;
}
@keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}
#blob {
background-color: white;
height: 34vmax;
aspect-ratio: 1;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(to right, aquamarine, mediumpurple);
animation: rotate 20s infinite;
opacity: 0.8;
}
#blur {
height: 100%;
width: 100%;
position: absolute;
z-index: 2;
backdrop-filter: blur(12vmax);
}
Javascript:
const blob = document.getElementById("blob");
window.onpointermove = event => {
const { clientX, clientY } = event;
blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, { duration: 3000, fill: "forwards" });
}
PART: III
UX/UI
Unlock UX/UI expertise with this curated resources. Dive into articles, tools, and guides for enhancing your design skills and crafting exceptional user experiences.
01. rotato.app for animated device mockups.
02. flecto.io for custom creative SVG backgrounds.
03. iterationx.com for the easiest way to give feedback.
04. basicons.xyz for consistent free icon package.
05. uiball.com loaders for your website.
06. designsystems.surf for huge collection of design systems.
07. octopus.do for AI-powered sitemaps.
08. huemint.com for defining visual brand identity.
09. shadergradient.co for beautiful animated gradients with ready-to-use code.
10. lottielab.com for animation simply.
11. dark.design for dark UI inspiration.
12. colourcontrast.cc this tool has everything you need.
13. shapefest.com for thousands of 3D illustrations.
14. durves.com for generating dots pattern.
15. If you're seeking design inspiration, I highly recommend exploring the following websites. awwwards.com, uijar.com, screenlane.com, collectui.com, lookup.design.
Thanks a bunch for checking out this article! Hope you had a blast reading it.