Making a wooden planter with CSS

[INTRODUCTION] Hi! You might have seen I’ve been building a new project – a farm made with Vue!
On it, I’m trying to use HTML and CSS to create and style all farm items such as vegetables, fruits, animals, backgrounds and so much more. As the project has now progressed further, I am able to share how
I’ve made some of them ?

In this portfolio piece, we’ll be creating a vegetable (or a fruit) planter with plain HTML and CSS.

Let’s see how to make one!

First, we need to imagine the shape of our planter. Usually, they are quite boxy and since we’re making a 2D one – we’re only concerned with the front side of it. We’ll need to create some wooden planks and then rotate them to give us that ‘planter look’. That being said, we need to start typing some code.

<div class="garden-plot">
  <!-- This is where we'll place our wooden planks -->
 </div>

Awesome! ? We have our ‘garden-plot’ sorted out,
let’s go ahead and create two vertical planks as well as three horizontal planks:

<div class="garden-plot">

  <!-- This is where we'll place our wooden planks -->

  <div class="vertical-planks">
    <div class="vertical-planky"></div>
    <div class="vertical-planky"></div>
  </div>

   <div class="horizontal-planks">
     <div class="horizontal-planky"></div>
     <div class="horizontal-planky"></div>
     <div class="horizontal-planky" ></div>
  </div>
 
</div>

Good job! ? I know it’s not looking like much right now but we’ve got the foundation covered!
Let’s add some styling so that our planter looks a bit more – like a planter.
We’ll need to pick some colours, rotate a couple of things and position it all in place..

The code below will set the size of our ‘garden-plot’,
it will position our plank wrappers (vertical and horizontal planks) and it will position the planks inside:

   .garden-plot {
        position: relative;
        display: flex;
        margin: 20px;
        height: 200px;
   }

    .vertical-planks {
        display: flex;
        justify-content: space-between;
        width: 200px;
    }

    .horizontal-planks {
        position: absolute;
        top: 8px;
        z-index: 1;
        left: -5px;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

Now that’s been done, we’ll go ahead and add styling for the actual planks themselves.
The code below will set the height and width of each plank, it will colour them to a chosen
colour, give a bit of spacing to the bottom of each plank and drop a nice but subtle shadow for each one.

The code for our vertical planks has an added bonus to it, slightly rounded corners on the top.
This helps it look a bit less – edgy, and can be done using ‘border-top-left-radius‘ or ‘border-top-right-radius’ in CSS.

    .horizontal-planky {
        height: 25px;
        width: 210px;
        background:#a9633d;
        margin-bottom: 2px;
        box-shadow: 0 4px 2px -2px #5f3721;
    }

    .vertical-planky {
        height: 90px;
        width: 20px;
        background:#a9633d; 
        box-shadow: 0 4px 2px -2px #5f3721;

        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

Your vegetable planter should now be looking a lot more like an actual planter,
it’s the right shape and colour but it’s missing a plant name.

Let’s add the last finishing touch to it and write the words ‘Lettuce’ on one of our
horizontal planks and apply some styling to it as well:

<div class="garden-plot">

  <!-- This is where we'll place our wooden planks -->

  <div class="vertical-planks">
    <div class="vertical-planky"></div>
    <div class="vertical-planky"></div>
  </div>

   <div class="horizontal-planks">
     <div class="horizontal-planky"></div>
     <div class="horizontal-planky"></div>
     <div class="horizontal-planky" ></div>


    <!-- PLANT NAME -->
    <p class="plant-name"> lettuce </p>
  </div>
 
</div>

   .plant-name {
        color: #582806;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;

        position: absolute;
        top: 10px;
    }

That’s all there is to it! Congratulations on making it this far!

If the post was a bit too long to read, you can have a play on codepen instead ?

See the Pen by Likii (@likiipedia) on CodePen.