So, I created a prior post with the first version of this ham sandwich. But, as time went by, a major improvement came to mind. I thought, instead of the sandwich spinning, and changing size, when hovered on, it would look much better if it came apart when hovered on. So, I edited my code and improved the sandwich in a few other ways too.
Now I submit the changed code as a second entry for the contest:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ham Sandwich</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section>
<div class="top-bread">
<div class="top-crust">
<div class="top-center"></div>
</div>
</div>
<div class="mayo-and-hot-sauce">
<div class="blob primary-blob"></div>
<div class="blob blob-one"></div>
<div class="blob blob-two"></div>
<div class="blob blob-three"></div>
<div class="blob blob-four"></div>
<div class="blob blob-five"></div>
<div class="blob blob-six"></div>
<div class="blob blob-seven"></div>
<div class="blob blob-eight"></div>
</div>
<div class="ham-edge-one">
<div class="ham-layer-one"></div>
</div>
<div class="ham-edge-two">
<div class="ham-layer-two"></div>
</div>
<div class="bottom-bread">
<div class="bottom-crust">
<div class="bottom-center"></div>
</div>
</div>
</section>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
:root{
--ham-background: linear-gradient(
45deg,
rgb(180,100,120),
rgb(220,140,160),
rgb(180,100,120),
rgb(220,140,160)
);
--ham-border-background: linear-gradient(
45deg,
rgb(200,120,140),
rgb(240,160,180),
rgb(200,120,140),
rgb(240,160,180)
);
--ham-background-two: linear-gradient(
45deg,
rgb(220,140,160),
rgb(180,100,120),
rgb(220,140,160),
rgb(180,100,120)
);
--ham-border-background-two: linear-gradient(
45deg,
rgb(240,160,180),
rgb(200,120,140),
rgb(240,160,180),
rgb(200,120,140)
);
--trans-animation: margin-top 2s cubic-bezier(.99,-0.01,1,.99);
}
body{
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
section{
height: 300px;
width: 600px;
display: grid;
justify-content: center;
}
section:hover{
.mayo-and-hot-sauce{
margin-top: -130px;
}
.ham-edge-one{
margin-top: -70px;
}
.ham-edge-two{
margin-top: -70px;
}
.bottom-bread{
margin-top: -70px;
}
}
.top-bread{
display: grid;
z-index: 1;
}
.top-crust{
width: 350px;
height: 130px;
transform: skewX(-50deg);
border-radius: 25px 50px 5px 50px;
background-color: rgb(150,90,60);
display: flex;
align-items: center;
justify-content: center;
padding: 0px 40px 20px 0px;
}
.top-center{
height: 100%;
width: 100%;
background: rgb(220,170,120);
border-radius: 25px 30px 5px 25px;
box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
.mayo-and-hot-sauce{
height: 0px;
display: grid;
margin-top: -168px;
margin-left: 0px;
background: rgb(255,180,170);
border-radius: 200px 10px 200px 10px;
transform-style: preserve-3d;
transition: var(--trans-animation);
}
.blob{
background: rgb(255,180,170);
box-shadow: 0px 0px 4px 2px rgb(255,180,170);
z-index: -1;
transform: translateZ(-100px);
}
.primary-blob{
position: absolute;
width: 330px;
height: 114px;
margin-top: 10px;
margin-left: 10px;
background: inherit;
transform: skewX(-50deg);
border-radius: 10px 40px 1px 30px;
}
.blob-one{
width: 40%;
margin-left: 245px;
margin-top: 15px;
border-radius: 30px 10px 25px 0px;
height: 35px;
transform: rotate(10deg);
}
.blob-two{
width: 80%;
height: 40px;
margin-left: 45px;
margin-top: 25px;
border-radius: 0px 10px 90px 0px;
transform: rotate(2deg);
}
.blob-three{
width: 80%;
height: 20px;
width: 30px;
margin-left: 20px;
margin-top: 0px;
border-radius: 0px 0px 25px 50px;
transform: rotate(20deg);
}
.blob-four{
width: 80%;
height: 20px;
width: 50px;
margin-left: 220px;
margin-top: -20px;
border-radius: 0px 0px 50px 50px;
transform: rotate(10deg);
}
.blob-five{
width: 50px;
height: 25px;
margin-left: 90px;
margin-top: -22px;
transform: rotate(-20deg);
border-radius: 0px 0px 115px 80px;
}
.blob-six{
height: 40px;
width: 50px;
margin-left: -40px;
margin-top: -45px;
border-radius: 16px 0px 10px 20px;
transform: rotate(-20deg);
}
.blob-seven{
height: 30px;
width: 60px;
margin-top: -30px;
margin-left: 130px;
border-radius: 0px 0px 25px 40px;
transform: rotate(-15deg);
}
.blob-eight{
height: 60px;
width: 30px;
margin-left: 330px;
margin-top: -120px;
border-radius: 0px 0px 20px 0px;
transform: rotate(20deg);
}
.ham-edge-one{
width: 374px;
height: 130px;
transform: skewX(-50deg);
border-radius: 10px 30px 10px 25px;
background: var(--ham-border-background);
padding: 0px 3px 3px 0px;
z-index: -1;
margin-top: -180px;
margin-left: -15px;
transition: var(--trans-animation);
}
.ham-layer-one{
width: 370px;
height: 128px;
background: var(--ham-background-two);
border-radius: 10px 27px 10px 24px;
}
.ham-edge-two{
width: 374px;
height: 130px;
transform: skewX(-50deg);
border-radius: 10px 30px 10px 25px;
background: var(--ham-border-background-two);
padding: 0px 3px 3px 0px;
z-index: -2;
margin-top: -205px;
margin-left: -14px;
transition: var(--trans-animation);
}
.ham-layer-two{
width: 370px;
height: 128px;
background: var(--ham-background);
border-radius: 10px 27px 10px 24px;
}
.bottom-bread{
display: grid;
z-index: -3;
margin-top: -220px;
transition: var(--trans-animation);
}
.bottom-crust{
width: 350px;
height: 130px;
transform: skewX(-50deg);
border-radius: 25px 50px 5px 50px;
background-color: rgb(150,90,60);
display: flex;
align-items: center;
justify-content: center;
padding: 0px 40px 20px 0px;
}
.bottom-center{
height: 100%;
width: 100%;
background: rgb(220,170,120);
border-radius: 25px 30px 5px 25px;
box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
Also, here's a link to the project in codePen.
If anyone has any improvement to suggest, please do. 😁
Top comments (1)
It looks so delicious!
I really like the hover effect.