Heart-it

Developer
Tulula Smith
Size
2,057 Kb
Views
10,120
  1. Heart-it Previews
  2. Heart-it HTML Codes
  3. Heart-it CSS Codes

How do I make an heart-it?

My first time making something like this using CSS so I stuck with a basic method and basic image to sort of get used to making something like it. Quite enjoyed it though.. What is a heart-it? How do you make a heart-it? This script and codes were developed by Tulula Smith on 10 November 2022, Thursday.

Heart-it Previews
IQ Test

Heart-it - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heart-it</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="heart"></div>
</div>
<!--
Radial grdients dont seem to function right for me and i'm not sure why. They were working for me.
Gives a nice retro effect though.
-->
</body>
</html>

Heart-it - Script Codes CSS Codes

:root { --outline:black; --fill-1:red; --fill-2:darkred; --shine:white;
}
body { background: radial-gradient(#200, #700);
}
.heart {	position:absolute;	top:calc(50% - .5em);	left:calc(50% - .5em);	width:1em;	height:1em;	background:var(--fill-1);	box-shadow: /* Outline */	var(--outline) 0 5em,	var(--outline) 0 -4em,	var(--outline) 1em -5em,	var(--outline) 2em -5em,	var(--outline) 3em -5em,	var(--outline) 4em -4em,	var(--outline) 5em -3em,	var(--outline) 5em -2em,	var(--outline) 5em -1em,	var(--outline) 5em 0,	var(--outline) 4em 1em,	var(--outline) 3em 2em,	var(--outline) 2em 3em,	var(--outline) 1em 4em,	var(--outline) -1em 4em,	var(--outline) -2em 3em,	var(--outline) -3em 2em,	var(--outline) -4em 1em,	var(--outline) -5em 0em,	var(--outline) -5em -1em,	var(--outline) -5em -2em,	var(--outline) -5em -3em,	var(--outline) -4em -4em,	var(--outline) -3em -5em,	var(--outline) -2em -5em,	var(--outline) -1em -5em,	/* Shade */	var(--fill-2) 0 4em,	var(--fill-2) 1em 3em,	var(--fill-2) 2em 2em,	var(--fill-2) 3em 1em,	var(--fill-2) 4em 0,	var(--fill-2) 4em -1em,	var(--fill-2) 4em -2em,	var(--fill-2) 4em -3em,	/* Shine */	var(--shine) -3em -2em,	var(--shine) -2em -3em,	/* Fill */	var(--fill-1) 0 1em,	var(--fill-1) 0 2em,	var(--fill-1) 0 3em,	var(--fill-1) 1em 2em,	var(--fill-1) 1em 1em,	var(--fill-1) 2em 1em,	var(--fill-1) 1em 0,	var(--fill-1) 2em 0,	var(--fill-1) 3em 0,	var(--fill-1) 0 -1em,	var(--fill-1) 1em -1em,	var(--fill-1) 2em -1em,	var(--fill-1) 3em -1em,	var(--fill-1) 0 -2em,	var(--fill-1) 1em -2em,	var(--fill-1) 2em -2em,	var(--fill-1) 3em -2em,	var(--fill-1) 0 -3em,	var(--fill-1) 1em -3em,	var(--fill-1) 2em -3em,	var(--fill-1) 3em -3em,	var(--fill-1) 1em -4em,	var(--fill-1) 2em -4em,	var(--fill-1) 3em -4em,	var(--fill-1) -1em 3em,	var(--fill-1) -1em 2em,	var(--fill-1) -2em 2em,	var(--fill-1) -1em 1em,	var(--fill-1) -2em 1em,	var(--fill-1) -3em 1em,	var(--fill-1) -1em 0,	var(--fill-1) -2em 0,	var(--fill-1) -3em 0,	var(--fill-1) -4em 0,	var(--fill-1) -1em -1em,	var(--fill-1) -2em -1em,	var(--fill-1) -3em -1em,	var(--fill-1) -4em -1em,	var(--fill-1) -1em -2em,	var(--fill-1) -2em -2em,	var(--fill-1) -4em -2em,	var(--fill-1) -1em -3em,	var(--fill-1) -3em -3em,	var(--fill-1) -4em -3em,	var(--fill-1) -1em -4em,	var(--fill-1) -2em -4em,	var(--fill-1) -3em -4em;
}
.container {	position:absolute; width:11em; height:11em;	top:calc(50% - 5.5em);	left:calc(50% - 5.5em); transition:1s ease;
}
.container:hover{ transform:scale(1.5);
}
Heart-it - Script Codes
Heart-it - Script Codes
Home Page Home
Developer Tulula Smith
Username Tulula
Uploaded November 10, 2022
Rating 4
Size 2,057 Kb
Views 10,120
Do you need developer help for Heart-it?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tulula Smith (Tulula) Script Codes
Name
Foodie
2d Array functions
Drive Clock
Responsive Test
Currency Conversion
Overlay Text BROKEN-trying to fix
Wireframe
Hole
Bar-graph Test
Booty Button
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!