Dolphin cursor CSS
<a href="#">Pointer</a> body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
background: hsl(240, 100%, 90%);
}
html,
button {
cursor: url("media/cursor-default-dolphin.svg"), auto;
}
a {
cursor: url("media/cursor-pointer-fin.svg"), pointer;
font-size: 2rem;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
padding: 1.5rem 1rem;
border: 2px solid hsl(240, 70%, 70%);
background-color: white;
text-decoration: none;
}
@media (hover: none) {
body::before {
content: "There must be a pointing device to test the cursor styles.";
color: red;
background: rgb(246, 207, 207);
border: 1px solid red;
max-width: 400px;
position: absolute;
top: 0;
margin: 0.5rem;
padding: 0.1rem;
}
} Description
Using a custom dolphin-related images for the cursor. Just wanted to get this out of my system after dipping into the world of Douglas Adams again. Don’t try this at home kids!
So long, and thanks for all the fish.