HTML:
<div class="imac">
<img src="...">
</div>
<div class="imac blue">
<img src="...">
</div>
<div class="imac purple">
<img src="...">
</div>
<div class="imac pink">
<img src="...">
</div>
<!-- using iframe inside `.imac` -->
<div class="imac orange">
<iframe src="https://kiteretz.com/about/"></iframe>
</div>
<!-- the recommended size of the inner element is 1600x900 -->
<div class="imac yellow">
<img src="https://via.placeholder.com/1600x900">
</div>
<!-- power off -->
<div class="imac green"></div>
CSS:
.imac {
--body-width: 50vw;
--body-border-radius: calc(var(--body-width) * 0.016);
--bezel-width: calc(var(--body-width) * 0.025);
--display-height: calc(var(--body-width) * 0.538);
--front-panel-height: calc(var(--body-width) * 0.125);
--stand-height: calc(var(--body-width) * 0.1554);
--stand-width: calc(var(--body-width) * 0.2372);
--color: #d5d6d8;
display: grid;
grid: var(--bezel-width)
var(--display-height)
var(--front-panel-height)
var(--stand-height)
/ var(--bezel-width) 1fr var(--stand-width) 1fr var(--bezel-width);
width: var(--body-width);
}
.imac > * {
background: #fff;
border-radius: calc(var(--body-width) * 0.002);
border: calc(var(--body-width) * 0.001) solid #333;
grid-area: 2 / 2 / 3 / 5;
place-self: stretch;
}
.imac::before {
background:
radial-gradient(circle,
#333 calc(100% - 1px),
transparent calc(100% - 0.5px)
),
linear-gradient(to bottom,
#eeeef0 85.25%,
var(--color) 85.25%
);
background-repeat: no-repeat;
background-position: top var(--bezel-width) center, top;
background-size: 94.8% 78%, 100%;
border-radius: var(--body-border-radius);
box-shadow: 0 0 calc(var(--body-width) * 0.001) rgba(0 0 0 / 0.2);
content: "";
grid-area: 1 / 1 / 4 / 6;
}
.imac::after {
background:
linear-gradient(to bottom,
rgba(0 0 0 / 0.125),
rgba(0 0 0 / 0.05) 55%,
rgba(0 0 0 / 0.05) 75%,
rgba(0 0 0 / 0.075) 92%,
rgba(255 255 255 / 0.3) 96%,
rgba(0 0 0 / 0.35) 99%
),
linear-gradient(to right,
rgba(255 255 255 / 0.2),
rgba(0 0 0 / 0.35) 1%,
rgba(255 255 255 / 0.3) 4%,
rgba(0 0 0 / 0.02) 8%,
rgba(255 255 255 / 0.2) 25%,
rgba(255 255 255 / 0.2) 75%,
rgba(0 0 0 / 0.02) 92%,
rgba(255 255 255 / 0.3) 96%,
rgba(0 0 0 / 0.35) 99%,
rgba(255 255 255 / 0.2)
),
linear-gradient(to bottom,
var(--color),
var(--color)
);
background-repeat: no-repeat;
background-position: top, bottom, top;
background-size: 100% 94%, 100% 6%, 100%;
border-radius: 0 0 6% 6% / 2%;
box-shadow: 0 0 calc(var(--body-width) * 0.001) rgba(0 0 0 / 0.2);
content: "";
grid-area: 4 / 3 / 5 / 4;
z-index: -1;
}
.imac.blue {
--color: #b6c8db;
}
.imac.purple {
--color: #c5c6e6;
}
.imac.pink {
--color: #ecccc6;
}
.imac.orange {
--color: #e8b7a5;
}
.imac.yellow {
--color: #f4d596;
}
.imac.green {
--color: #bcd0c8;
}
Results:
To change the size of iMac, just edit or override the --body-width
custom property.
You can easily create your original color iMac by editing the --color
custom property π
Top comments (0)