150ml of Vanilla CSS

In this post(150ml of Vanilla CSS), we are going to create a cool vanilla box. we used HTML & CSS for this.Named it "150ml of Vanilla CSS".

In this post(150ml of Vanilla CSS), we are going to create a cool vanilla box. we used HTML & CSS for this.

we mainly used SVG code for this because we want this fast-loading as performance is a more important feature for our webpage.

Named it “150ml of Vanilla CSS”.????

Let’s see the code we use or you can download the source code packed in .zip file.

HTML Code:


<div class="b">
  <div class="b--top">
    <div class="label--top">
      <svg viewBox="0 0 256 361" preserveAspectRatio="xMidYMid" width="72" aria-hidden="true" focusable="false">
        <path d="M127.84 360.09 23.66 331.17.45 70.77h255.1l-23.24 260.36-104.47 28.96Z" fill="#264DE4"></path>
        <path d="m212.42 314.55 19.86-222.5H128v245.9l84.42-23.4Z" fill="#2965F1"></path>
        <path d="m53.67 188.64 2.86 31.93H128v-31.93H53.67ZM47.92 124l2.9 31.93H128V124H47.92ZM128 271.58l-.14.04-35.57-9.6-2.27-25.48H57.96l4.47 50.15 65.42 18.16.15-.04v-33.23Z" fill="#EBEBEB"></path>
        <path d="M60.48 0h38.68v16.18h-22.5v16.17h22.5v16.18H60.48V0Zm46.42 0h38.68v14.07h-22.5v2.8h22.5v32.36H106.9V34.46h22.5v-2.81h-22.5V0Zm46.42 0H192v14.07h-22.5v2.8H192v32.36h-38.68V34.46h22.5v-2.81h-22.5V0Z"></path>
        <path d="m202.13 188.64 5.76-64.65h-80v31.94h45l-2.9 32.7h-42.1v31.94h39.33L163.5 262l-35.62 9.62v33.22l65.47-18.14.48-5.4 7.5-84.08.79-8.57Z" fill="#FFF"></path>
      </svg>
    </div>
  </div>
  <div class="b--left">
    <div class="label--left">
      <h1>Vanilla<sup>*</sup><span>CSS</span></h1>
      <hr/>
      <ul>
        <li><sup>*</sup> No installs</li>
        <li><sup>*</sup> No dependencies</li>
        <li><sup>*</sup> No bullshit</li>
      </ul><span class="dose">150ml</span>
    </div>
  </div>
  <div class="b--right">
    <div class="label--right">
      <h2>Precautions:</h2>
      <p>May cause nausea and/or confusion to <strong>some full-stack developers.</strong> Increase recommended dosage until symptoms disappear completely.</p>
      <p><strong>Beware:</strong> Some high-end features may be incompatible with specific browsers.</p><span class="icons">
        <svg viewBox="0 0 262 336" width="24" aria-hidden="true" focusable="false">
          <g stroke="var(--text)" stroke-linecap="round" stroke-linejoin="round">
            <g fill="none" stroke-width="8">
              <path d="M7.25 167H133z" stroke-width="14"></path>
              <path d="m129 168-15 158H39.9L11.2 168"></path>
              <path d="M16.5 196H126l-2 26H21l4.7 26h95.5l-2.2 26H30.6l4.6 26H116m-20.6 26 5.6-159H70.9L76 326H59.9L40.2 167"></path>
            </g>
            <path d="m59.3 64.5 159.7.4c14 15.6 37 68.1 38 81.1l-80 4c-2-27-14-51.1-16-54.9zM177 155l-27 175 62-115 28 116 16-174z" stroke-width="4"></path>
            <circle cx="187" cy="31" r="30" stroke="none"></circle>
            <path d="M28.6 138C56 124 55.8 103 58 103c26 11 51 14 67 10-46.6 36-23 37-29.4 35-19.7-7-48.3 14-67-10m48.9-28c25.5 0 25.5-8 30.5-10.3 0 0 3 10.3 9 15.3" fill="none" stroke-width="6"></path>
          </g>
        </svg>
        <svg viewBox="0 0 24 24" width="32" fill="var(--text)" aria-hidden="true" focusable="false">
          <path d="M19.562 12.098l1.531 2.652c.967 1.674.393 3.815-1.28 4.781-.533.307-1.136.469-1.75.469H16v2l-5-3.5 5-3.5v2h2.062c.088 0 .174-.023.25-.067.213-.123.301-.378.221-.601l-.038-.082-1.531-2.652 2.598-1.5zM7.737 9.384l.53 6.08-1.73-1-1.032 1.786c-.044.076-.067.162-.067.25 0 .245.177.45.41.492l.09.008H9v3H5.938c-1.933 0-3.5-1.567-3.5-3.5 0-.614.162-1.218.469-1.75l1.031-1.786-1.732-1 5.53-2.58zm6.013-6.415c.532.307.974.749 1.281 1.281l1.03 1.786 1.733-1-.53 6.08-5.532-2.58 1.732-1-1.031-1.786c-.044-.076-.107-.14-.183-.183-.213-.123-.478-.072-.631.11l-.052.073-1.53 2.652-2.599-1.5 1.53-2.652c.967-1.674 3.108-2.248 4.782-1.281z"></path>
        </svg></span>
    </div>
  </div>
  <div class="b--bottom"></div>
</div>

CSS Code:

@import url("https://rsms.me/inter/inter.css");

:root {
	--h: 226;
	--s: 100%;
	--size: clamp(14rem, -0.4rem + 64vw, 18rem);

	--tz: calc(var(--size) / 2);

	--shade-light: hsl(var(--h) var(--s) 96%);
	--shade-mid: hsl(var(--h) var(--s) 94%);
	--shade-dark: hsl(var(--h) var(--s) 92%);

	--text: #323232;
}

html {
	height: 100%;
	font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
	html {
		font-family: "Inter var", sans-serif;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

svg {
	max-height: 100%;
	pointer-events: none;
}

body {
	font-family: "Inter", sans-serif;
	height: 100vh;
	display: grid;
	place-content: center;
	background: hsl(var(--h), var(--s), 88%);
	color: var(--text);
}

.b {
	width: var(--size);
	height: var(--size);
	position: relative;
	transform-style: preserve-3d;
	transform: rotate3d(-0.1, 0.2, -0.035, 45deg);
}

.b--top,
.b--right,
.b--bottom,
.b--left {
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: inherit;
}

.b--top {
	background-color: var(--shade-light);
	transform: rotateX(90deg) translateZ(var(--tz));
}

.b--right {
	background-color: var(--shade-dark);
	transform: translateZ(var(--tz));
}

.b--bottom {
	transform: rotateX(-90deg) translateZ(var(--tz));
	box-shadow: 6px -16px 25px 12px hsla(var(--h) var(--s) 36% / 25%);
}

.b--left {
	background-color: var(--shade-mid);
	transform: rotateY(-90deg) translateZ(var(--tz));
}

.b--right,
.b--left {
	height: 120%;
}
.b--bottom {
	bottom: -20%;
}

/*--Labels--*/

.label--top {
	display: grid;
	place-content: center;
	height: 100%;
	box-shadow: inset 0 -2rem 0 var(--shade-mid),
		inset 0 -4rem 0 -1px hsl(var(--h), var(--s), 60%);
}

.label--right,
.label--left {
	height: 100%;
	padding-inline: 1rem;
	padding-block: 2rem;
}

.label--right {
	opacity: 0.8;
}

.label--left {
	box-shadow: inset -2rem 0 0 var(--shade-mid),
		inset -4rem 0 0 -1px hsl(var(--h), var(--s), 60%);
}

h1 {
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
}

h1 span {
	display: block;
	font-size: 4rem;
	font-weight: 900;
}

h2 {
	font-size: 1rem;
}

hr {
	border: none;
	height: 1px;
	background-color: var(--text);
	margin-block: 0.5rem;
}

ul {
	list-style: none;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
}

p {
	font-size: 0.75rem;
	padding: 0.5rem;
	margin-block-end: 0.5rem;
	border: 1px solid var(--text);
	border-radius: 0.5rem;
}

.dose,
.icons {
	font-size: 1.75rem;
	display: block;
	position: absolute;
	bottom: 1rem;
	right: 1rem;
}

.dose {
	background-color: var(--shade-mid);
}

.icons {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

Thank You!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games
Secured By miniOrange