CSS Box Graphic Module Design for Product Display and Animation
The box graphics were created using HTML and CSS code. The module is easy to configure and fully responsive. It can be used as a presentation of a digital product in a store, a box cover, or as an animated package. The code can be customized to your needs and expanded in any way. To place the box on a page, copy the HTML code and place it inside the body tag, and the CSS code - preferably in an external style sheet.
The code has appropriate modifiers in the form of CSS variables. The box graphics are completely responsive, and we control the size of the box by changing the font size on the parent element. By default, the box size adapts to the screen width. We can also edit the box name by modifying the headers in the HTML code. The box can be used as a graphic element - make the desired changes and take a screenshot, and then place the generated image, for example, in a store.
<div class="module-box">
<div class="box-top"></div>
<div class="box-content">
<div class="box-main">
<h2 class="box-heading">Box CSS</h2>
<h3 class="box-headline">Compsoul</h3>
</div>
</div>
<div class="box-side"></div>
</div>.module-box {
--background: #efe7dc;
--color-white: 255, 255, 255;
--color-dark: 50, 50, 50;
--url: url("https://compsoul.dev/uploads/images/blog/css/css-box.png");
background: var(--background);
font-size: 1vw;
font-variant-numeric: lining-nums;
height: 34em;
margin: 10em auto !important;
position: relative;
transition: transform 0.2s;
text-align: left;
width: 26em;
}
.module-box:hover {
transform: translate(0, -2em);
}
.module-box:before {
background: linear-gradient(125deg, rgba( var(--color-dark), 0) 40%, rgba( var(--color-dark), 0.2) 100%),
linear-gradient(rgba( var(--color-dark), 0) 99.5%, rgba( var(--color-dark), 0.8) 100%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.module-box:after {
background: rgba( var(--color-dark), 0.6);
border-radius: 100%;
bottom: 0;
box-sizing: border-box;
content: "";
filter: blur(1em);
height: 5em;
left: 0;
position: absolute;
right: -6em;
transform: skew(-60deg);
transform-origin: bottom;
transition: 0.2s bottom, 0.2s filter;
z-index: -2;
}
.module-box:hover:after {
bottom: -2em;
filter: blur(1.5em);
}
.module-box .box-content {
box-sizing: border-box;
height: 100%;
position: relative;
}
.module-box .box-content:before {
background: var(--background);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.module-box .box-content:after {
background: rgb( var(--color-dark) );
bottom: 0;
box-sizing: border-box;
content: "";
filter: blur(0.6em);
height: 4em;
left: 0.4em;
position: absolute;
right: 0;
transform: skew(-45deg);
transform-origin: bottom;
transition: opacity 0.2s;
z-index: -2;
}
.module-box:hover .box-content:after {
opacity: 0.2;
}
.module-box .box-main:before {
background: var(--url) no-repeat right -4em bottom -4em;
background-size: auto 100%;
bottom: 0;
content: "";
height: 28em;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
.module-box .box-heading {
border-bottom: 0.1em solid rgb( var(--color-dark) );
color: rgb( var(--color-dark) );
display: inline-block;
font-size: 2em;
letter-spacing: 0.36em;
margin: 0;
padding: 1em 0 0 1em;
text-align: left;
text-transform: uppercase;
}
.module-box .box-headline {
color: rgb( var(--color-dark) );
font-size: 4em;
font-weight: 700;
margin: 0;
padding: 0 0.5em;
text-align: left;
text-transform: uppercase;
}
.module-box .box-side {
background: var(--background);
box-sizing: border-box;
content: "";
height: 100%;
position: absolute;
right: -4em;
top: 0;
transform: skewY(-45deg);
transform-origin: left;
width: 4em;
}
.module-box .box-side:before {
background: var(--url) no-repeat right 0em bottom -4em;
background-size: auto 100%;
bottom: 0;
content: "";
height: 28em;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
.module-box .box-side:after {
background: linear-gradient(rgba( var(--color-dark), 0.3) 100%, rgba( var(--color-dark), 0.3) 100%),
linear-gradient(rgba( var(--color-dark), 0) 99.5%, rgba( var(--color-dark), 0.8) 100%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
}
.module-box .box-top {
align-items: center;
background: rgb( var(--color-dark) );
display: flex;
height: 4em;
left: 0;
position: absolute;
top: -4em;
transform: skewX(-45deg);
transform-origin: bottom;
width: 100%;
}
.module-box .box-top:after {
background: linear-gradient(125deg, rgba( var(--color-dark), 0.05) 60%, rgba( var(--color-dark), 0.1) 100%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.module-box.second {
--background: #86C8BC;
}
.module-box.third {
--background: #FEBE8C;
}
.module-box.fourth {
--background: #FF8C8C;
}
.module-box.fifth {
--background: #3BACB6;
}Box CSS
Compsoul
The module can be configured by editing a few variables that are located in the CSS code of the main module element:
- background - a variable responsible for the color of the box. We can create several classes that store different settings. An example of using such a solution can be found at the end of the CSS code.
- color-white - a variable storing the code of a light shade color.
- color-dark - a variable storing the code of a dark shade color.
- url - a variable storing the URL address of the graphics on the box.
The module can be expanded as desired by adding more variables and animations. I encourage you to experiment (if you know what I mean ;)