HomeCSSCSS Art | Valentine's Special Speed Art

CSS Art | Valentine’s Special Speed Art

Hey everyone! Welcome to today’s tutorial. In today’s tutorial, we will create a valentine’s day special art.
 
To create this art we will use HTML and CSS. This is just a fun tutorial. But these kinds of CSS art are a fun way to practice various properties for beginners. You can experiment with a lot of CSS properties while trying to create this type of
stuff.
 
If you are interested in more of such tutorials, please check out this playlist here. This playlist consists of a bunch of CSS art tutorials from my youtube channel.

Video Tutorial:

If you would like to learn by coding to a video tutorial rather than reading this blog post, check out the video here down below. I post new tutorials, tricks and resources on my youtube channel regularly. So subscribe to my channel to get access to all these useful resources.

 

Project Folder Structure:

Before we go on to code anything we need to create the project folder structure. We create a project folder called – ‘CSS Art’. Inside this folder, we have two files – index.html and style.css. These are the HTML document and the stylesheet respectively.

HTML:

We begin with the HTML code. First copy the code provided below and paste it into your HTML document. This creates the basic layout needed for our art.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Art</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <!-- Google Fonts-->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <i class="fa-solid fa-heart"></i>
      <div class="bread">
        <div class="bottom"></div>
        <div class="leg"></div>
      </div>
      <div class="jam">
        <div class="lid"></div>
        <div class="label">
          <div class="strawberry"></div>
          <div class="hand"></div>
        </div>
      </div>
      <h3>I loaf you berry much!</h3>
    </div>
  </body>
</html>

CSS:

We would be using CSS to shape all the divs into various elements. However, for heart, I have chosen to use an Icon. I am using ‘Font Awesome Icons’ for this purpose. You can find the link to the font awesome CDN in the head section of our HTML.

Next, we shape and position these elements using CSS. For this purpose copy the code below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #f5d7ab;
}
.container {
  height: 350px;
  width: 350px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.bread {
  width: 150px;
  height: 40px;
  background-color: #f59362;
  border-radius: 40px;
  position: absolute;
  top: 80px;
  right: 50px;
}
.bread:before {
  content: "";
  position: absolute;
  width: 130px;
  height: 25px;
  background-color: #f5c493;
  border-radius: 30px;
  left: 10px;
  top: 8px;
}
.bottom {
  background-color: #f5c493;
  width: 130px;
  height: 95px;
  border: 8px solid #f59362;
  position: absolute;
  top: 32px;
  left: 9px;
  border-top: none;
  border-radius: 0 0 15px 15px;
}
.bread:after {
  position: absolute;
  content: "";
  background-color: #202020;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  top: 48px;
  left: 55px;
  box-shadow: 25px 0 #202020;
}
.bottom:before {
  position: absolute;
  content: "";
  height: 22.5px;
  width: 45px;
  background-color: #ffffff;
  margin: auto;
  left: 0;
  right: 0;
  top: 40px;
  border-radius: 0 0 22.5px 22.5px;
}
.bottom:after {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  background-color: #f59362;
  top: 25px;
  left: 20px;
  border-radius: 50%;
  box-shadow: -10px 10px #f59362, 0 20px #f59362, 65px 0 #f59362,
    75px 10px #f59362, 65px 20px #f59362;
}
.leg {
  position: absolute;
  height: 55px;
  width: 4px;
  background-color: #202020;
  top: 127px;
  left: 60px;
  box-shadow: 25px 0 #202020;
}
.leg:before {
  position: absolute;
  content: "";
  height: 4px;
  width: 15px;
  background-color: #202020;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  box-shadow: 36px 0 #202020;
}
.jam {
  background-color: #f53162;
  height: 110px;
  width: 110px;
  position: absolute;
  bottom: 85px;
  left: 70px;
  border-radius: 15px;
}
.jam:before {
  content: "";
  position: absolute;
  height: 55px;
  width: 8px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  left: 8px;
  bottom: 10px;
}
.jam:after {
  content: "";
  position: absolute;
  height: 15px;
  width: 8px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  left: 8px;
  top: 15px;
}
.lid {
  background-color: #62c4c4;
  height: 20px;
  width: 85%;
  position: absolute;
  left: 7.5%;
  top: -20px;
  border-radius: 5px;
}
.label {
  background-color: #ffffff;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.strawberry {
  position: absolute;
  background-color: #319362;
  height: 13px;
  width: 13px;
  top: 10px;
  left: 13px;
  border-radius: 0 13px;
}
.strawberry:before {
  position: absolute;
  content: "";
  background-color: #27774f;
  height: 13px;
  width: 13px;
  border-radius: 0 13px;
  top: 0;
  left: 10px;
  transform: rotateY(-180deg);
}
.strawberry:after {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  background-color: #f53162;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  top: 8px;
  left: 0;
}
.hand {
  height: 4px;
  width: 107px;
  background-color: #202020;
  position: absolute;
  right: -139px;
}
.hand:after {
  position: absolute;
  content: "";
  background-color: #202020;
  height: 15px;
  width: 4px;
  border-radius: 4px;
  left: -3px;
  bottom: 0;
  box-shadow: -35px -40px #202020;
}
.fa-heart {
  color: #f53162;
  font-size: 20px;
  position: absolute;
  left: 150px;
  top: 160px;
  animation: heartbeat 5s infinite;
}
@keyframes heartbeat {
  60% {
    font-size: 50px;
    transform: translateY(-160px);
  }
  100% {
    font-size: 50px;
    transform: translateY(-160px);
  }
}
h3 {
  width: 100%;
  position: absolute;
  text-align: center;
  bottom: 20px;
  font-family: "Poppins", sans-serif;
  color: #f53162;
  letter-spacing: 4px;
  text-transform: capitalize;
}

Your CSS art is now ready. That’s it for this tutorial. If you have any issues while creating this code you can download the source code by clicking on the download code button below. Also if you have queries, suggestions or feedback do drop them in the comments below.

See you next time with yet another exciting tutorial. Happy Coding!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

fourteen + 14 =

Most Popular

CSS Custom Scrollbar

CSS Animation Tutorial

MCQ – 23/06/22