CSS Halloween: The Squid Sport is a Float




I’m persevering with my CSS Halloween Ugly Sweater Sequence. Hyperlinks to earlier posts are above. Final week I did Amongst Us, at present I’m constructing the masks from Squid Sport.

That is the fundamental sweater. Click to see how it was made. A black background with a row of white packing containers full of bats and eyes. Below {that a} row of alternating white and orange packing containers. Then, the sweater torso, a big open space of yellow fading to orange, after which darkish purple, adopted by the rows of packing containers in reverse order. The step so as to add the gradient to the sweater is here.

I positioned a character div in that torso div. Contained in the character div is a div for a selected character for this submit it has a category of guard.



Add the Character

<div class="torso"> 
`
`
`
   <div class="character">
     <div class="guard"></div>  
   </div character>
`
`
`
</div>
Enter fullscreen mode

Exit fullscreen mode

/* CHARACTER //////////////// */

.guard {
    show: flex;
    justify-content: heart;
    align-items: heart;
    place: absolute; 
    overflow: seen;
    }
Enter fullscreen mode

Exit fullscreen mode

I began with the circle from the earlier train then made it taller and thinner. By adjusting the peak, width, and border radius.
Much like final week’s train, I’ll make one character then regulate the code to make others.





.guard {
    peak: 220px;
    width: 185px;
    background:rgba(0, 0, 0, 1);
    show: flex;
    justify-content: heart;
    align-items: heart; 
    overflow: seen;
    flex-direction: column;

    border-top-right-radius: 45%;
    border-top-left-radius: 45%;
    border-bottom-right-radius: 54%;
    border-bottom-left-radius: 54%; 
    border: 6px stable #000;}

Enter fullscreen mode

Exit fullscreen mode

A black oval.
Subsequent a body was added to divide the masks into three sections. For this horizontal and vertical traces had been added to make a T form. I needed to preserve adjusting the margin-top as I added components to the masks.

<div class="guard">    
    <div class="flex-container">
        <div class="maskframe">
          <div class="centerLine"></div>
        </div>
    <div class="maskframe">
          <div class="verticalLine"></div>
    </div>
      </div>
</div>
Enter fullscreen mode

Exit fullscreen mode


.maskframe {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    show: flex;
    justify-content: heart;
    align-items: heart; 
    border-top: 0;
    overflow: seen;
    }

.centerLine {
    background-color: #333;
    peak: 12px;
    width: 194px;
    margin-left: -6px;  
    z-index: 5;
    margin-top: 15px; 
}
.verticalLine {
    background-color: #333;
    peak: 140px;
    width: 14px;
    margin-top: 0px;    
    z-index: 0;
}

Enter fullscreen mode

Exit fullscreen mode



Black oval with a dark gray T on the it.

The guards have totally different shapes on their masks. The shapes are outlines. So there isn’t a background colour, simply border colours. The sq. wants much less code so I made that first. A div with class of sq. was added to the maskframe earlier than the centerline div. After including it I needed to regulate the location of the road from the earlier step.

<div class="guard">    
    <div class="flex-container">
      <div class="maskframe">
        <div class="sq."></div>
        <div class="centerLine"></div>
      </div>
        <div class="maskframe">
      <div class="verticalLine"></div>
    </div>
   </div>
</div>
Enter fullscreen mode

Exit fullscreen mode

.sq. {
    peak: 40px;
    width: 40px;
     /* add one line right here to make a circle */
    border-top: 10px stable  rgba(255, 255, 255, 0.75);
    border-right: 10px stable rgba(255, 255, 255, 0.75);
    border-bottom: 10px stable rgba(255, 255, 255, 0.75);
    border-left: 10px stable rgba(255, 255, 255, 0.75);
}
Enter fullscreen mode

Exit fullscreen mode

The sq. define was stable white. That did not seem like it was hooked up to the masks. So the opacity was lowered t0 0.75 rgba(255, 255, 255, 0.75); to fade it and make the form merge visually to the masks.

mask. A oval with a square on the forehead.

Subsequent I added to ovals to make the hoodie. I wrapped these divs across the earlier guard div. The hoodie class in the principle pink hoodie. The hoodieInner is an oval of darkred that provides an off heart ring across the masks. There’s a margin-left: 20px; so as to add house between the guards that will probably be added quickly.

<div class="hoodie">
  <div class="hoodieInner">
    <div class="guard">    
       <div class="flex-container">
        <div class="maskframe">
                     <div class="sq."></div>
             <div class="centerLine"></div>
        </div>

        <div class="maskframe">
          <div class="verticalLine"></div>
            </div>
          </div>
    </div>
   </div>
</div>
Enter fullscreen mode

Exit fullscreen mode

.hoodie {
    background-color: #b93d51;
    peak: 300px;
    width: 225px;
    border: 4px stable darkred;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    show: flex;
    justify-content: heart;
    align-items: heart;
    margin-left: 20px; 
}

.hoodieInner {
    peak: 234px;
    width: 192px;
    background: darkred;

    show: flex;
    justify-content: heart;
    align-items: heart; 
    overflow: seen;
    border: 4px stable darkred;
        border-top-right-radius: 45%;
    border-top-left-radius: 45%;
    border-bottom-right-radius: 54%;
    border-bottom-left-radius: 54%; 
}

Enter fullscreen mode

Exit fullscreen mode

This guard appears to be like good now, time so as to add the others. The whole lot is similar apart from the form outlines on the masks foreheads.

Someone wearing a mask and a hoodie.

To make he circle I simply wanted so as to add border radius: 50%. to the code used for the sq..

.circle {
    peak: 40px;
    width: 40px;
    border-radius: 50%;
    border-top: 10px stable  rgba(255, 255, 255, 0.75);
    border-right: 10px stable rgba(255, 255, 255, 0.75);
    border-bottom: 10px stable rgba(255, 255, 255, 0.75);
    border-left: 10px stable rgba(255, 255, 255, 0.75);
}
Enter fullscreen mode

Exit fullscreen mode

The triangle nevertheless takes extra code. To make a triangle with CSS you make a sq. utilizing borders, give the facet you need the triangle base on a colour make the opposite sides clear. Discover there isn’t a background colour. You can give all sides a distinct colour to have a 4 colour sq. product of wedges.

To make the triangle seem like an overview, I had so as to add a second triangle inside the primary one. For the internal triangle the border colour needed to match the background colour om the guard.

Because the triangle form moved the maskframe round I had so as to add new lessons and regulate the margins on the middle and vertical line to masks those on the opposite guards.

“CSS
.triangle {

border-right: 40px stable clear;
border-bottom: 60px stable rgba(255, 255, 255, 0.75);
border-left: 40px stable clear;
margin-bottom: 54px;
show: flex;
justify-content: heart;
align-items: heart;
Enter fullscreen mode

Exit fullscreen mode

}

.triangleInner {

border-right: 34px stable clear;
border-bottom: 50px stable #000;
border-left: 34px stable clear;
margin-left: -73px;
    margin-top: -48px;
Enter fullscreen mode

Exit fullscreen mode

}

.centerLineTriangle {
background-color: #333;
peak: 12px;
width: 194px;
/border: 2px stable #333;/
margin-left: -6px;

z-index: 5;
margin-top: -45px;
}

.verticalLineTriangle {
background-color: #333;
peak: 128px;
width: 14px;
/border: 2px stable #333;/
margin-top: -16px;

z-index: 0;
}
`

Three people wearing masks and hoodies. The hoodies are pink and masks are black. The only difference is each has a shape on their forehead. triangle, square, and circle.

This was one other enjoyable problem. I discovered tips on how to make a hoodie and with some adjustments I could make robes in future initiatives.


-$JarvisScript git push



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#CSS #Halloween #Squid #Sport #Float