Grafika pudełka w CSS

idealne rozwiązanie dla prezentacji produktów cyfrowych
Kartonowe pudełko wykonane za pomocą CSS

Grafika pudełka w CSS łatwe i responsywne rozwiązanie prezentacji produktu cyfrowego

Grafika pudełka została wykonana za pomocą kodu HTML i CSS. Moduł jest łatwy w konfiguracji i w pełni responsywne. Może być wykorzystywane jako prezentacja produktu cyfrowego w sklepie, okładka pudełka lub jako animowane opakowanie. Kod można dostosować do własnych potrzeb i rozbudowywać w dowolny sposób. Aby umieścić pudełko na stronie, należy skopiować kod HTML i umieścić go wewnątrz znacznika body, a kod CSS - najlepiej w zewnętrznym arkuszu styli.

Kod posiada odpowiednie modyfikatory w postaci zmiennych CSS. Grafika pudełka jest całkowicie responsywna, a rozmiar pudełka kontrolujemy poprzez zmianę wielkości fontu na elemencie nadrzędnym. Domyślnie rozmiar pudełka dostosowuje się do szerokości ekranu. Możemy również edytować nazwę pudełka poprzez modyfikację nagłówków w kodzie HTML. Pudełko może być używane jako element graficzny - należy dokonać pożądanych zmian i wykonać zrzut ekranu, a następnie umieścić tak wygenerowany obraz, na przykład, w sklepie.

<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.pl/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

Konfiguracja modułu odbywa się poprzez edycję kilku zmiennych, które znajdują się w kodzie CSS głównego elementu modułu:

  • background - zmienna odpowiadająca za kolor pudełka. Możemy stworzyć kilka klas, które przechowują różne ustawienia. Przykład zastosowania takiego rozwiązania możemy znaleźć na końcu kodu CSS.
  • color-white - zmienna przechowująca kod koloru odcienia jasnego.
  • color-dark - zmienna przechowująca kod koloru odcienia ciemnego.
  • url - zmienna przechowująca adres URL grafiki znajdującej się na pudełku.

Moduł można dowolnie rozbudować, dodając więcej zmiennych i animacji. Zachęcam do eksperymentów (o ile wiesz, o co mi chodzi ;)