とんでもないものを見付けました。
CSSだけでIntelのCore i9を描く方法です。
HTMLと、CSSはSCSSを使っています。

サンプル

何かもう凄い。
Intelのサイト、HTMLとCSSだけで作れるんじゃないでしょうか。
って思ったけどロゴ画像とかは外部から持ってきてるんですね。
ちなみに横幅が足りないとテキストがロゴと被るのでCodePenのサイトで見て下さい。

See the Pen Intel i9 CSS by n7best (@n7best) on CodePen.

HTML

<div class="container">
  <p class="remark">Intel® Core™ i9-7960X </p>
  <h2 class="title animated fadeInDown">INTEL® CORE™ X-SERIES PROCESSORS</h2>
  <a class="link animated fadeInDown" href="https://www.intel.com/content/www/us/en/products/processors/core/x-series.html" target="_blank">View the product brief > </a>
  <ul class="spec animated fadeInDown">
    <li>22 <span>MBCache</span></li>
    <li>16 <span>Cores</span></li>
    <li>32 <span>Threads</span></li>
  </ul>


  <ul class="menu">
    <li><i class="fa fa-bars" aria-hidden="true"></i></li>
    <li class="active"><i class="fa fa-superpowers" aria-hidden="true"></i></li>
    <li class="notify"><i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i></li>
    <li><i class="fa fa-tachometer" aria-hidden="true"></i></li>
    <li><i class="fa fa-info-circle" aria-hidden="true"></i></li>
    <li class="avatar">
      <a href="https://twitter.com/n7best" target="_blank">
      <img src="https://pbs.twimg.com/profile_images/907120958498115584/uwrGf928_400x400.jpg">
      </a>
    </li>
  </ul>
  <div class="cpu animated">
    <div class="plate">
      <div class="circle"></div>
      <div class="circle-light"></div>
    </div>
    <div class="plate-shadow"></div>

    <div class="plate__front">
      <div class="chip">
        <img src="http://n7.fyi/$/y4vss">
      </div>
      <div class="chip-light"></div>
      <div class="chip-light2"></div>
    </div>
    <div class="plate__front-shadow"></div>
  </div>
  <div class="container-light"></div>
  <div class="container-light1"></div>
  <div class="container-light2"></div>
</div>

CSS(SCSS)

$border-radius-length: 1em;
$menu-width: 6em;
@mixin notify($width:.3em) {
    background: red;
    background-color: #eb444d;
    background-image: linear-gradient(198deg,#eb444d 0%,#c21111 74%);
    border-radius: 50%;
    content: '';
    height: $width;
    position: absolute;
    right: .75em;
    top: .25em;
    width: $width;
}
html, body {
    height: 100%;
}
body {
    align-items: center;
    background-color: #0e242b;
    background-image: linear-gradient(21deg,#0e242b 0%,#0673a1 100%);
    display: flex;
    font-size: 10px;
    justify-content: center;
}
.container {
    background-color: #005198;
    background-image: linear-gradient(21deg,#005198 0%,#2995eb 100%);
    border-radius: $border-radius-length;
    box-shadow: -.5em 1em 1.5em .5em rgba(0,0,0,0.15);
    box-sizing: border-box;
    color: #3599ED;
    font-family: 'Sintony',sans-serif;
    height: 50em;
    max-width: 80em;
    overflow: hidden;
    padding-left: $menu-width + 4em;
    position: relative;
    width: 80%;
    p.remark {
        color: #fff;
        margin-top: 3em;
        text-transform: uppercase;
        z-index: 10;
    }
    a.link {
        animation-delay: 2.3s;
        color: rgba(255,255,255,0.7);
        display: block;
        margin-top: 1.25em;
        text-decoration: none;
    }
    h2.title {
        animation-delay: 2.3s;
        color: #fff;
        font-size: 2em;
        line-height: 1.5em;
        margin-top: 8em;
        transform: perspective(4000px);
        width: 15em;
        z-index: 10;
    }
    ul.spec {
        animation-delay: 2.3s;
        list-style: none;
        margin-top: 15em;
        li {
            box-sizing: border-box;
            color: #fff;
            display: inline-block;
            font-size: 1.5em;
            padding: 0 .25em;
            span {
                color: rgba(255,255,255,0.7);
                font-size: .5em;
            }
            &:not(:last-child) {
                span {
                    border-right: .05em solid rgba(255,255,255,0.7);
                    padding-right: 1em;
                }
            }
        }
    }
    &-light {
        background-image: linear-gradient(90deg,rgba(16,145,255,0.83) 12%,rgba(32,152,255,0.44) 80%,rgba(0,139,239,0.52) 100%);
        height: 150em;
        left: -4em;
        position: absolute;
        top: 5em;
        transform: scale(1) scaleZ(1.5) rotateZ(60deg) rotateX(-180deg);
        transform-origin: 0% 0%;
        width: 14em;
    }
    &-light1, &-light2 {
        background-image: linear-gradient(108deg,rgba(16,145,255,0.83) 0%,rgba(32,152,255,0.04) 41%,rgba(0,139,239,0) 100%);
        height: 25em;
        position: absolute;
        transform: scale(1) scaleZ(1.5) rotateZ(60deg) rotateX(-180deg);
        transform-origin: 0% 0%;
        width: 14em;
        z-index: 1;
    }
    &-light1 {
        left: -4em;
        top: 35em;
    }
    &-light2 {
        bottom: -26em;
        right: 9em;
    }
}
.menu {
    background-color: #ffffff;
    background-image: linear-gradient(206deg,#ffffff 0%,#dedede 100%);
    border-bottom-left-radius: $border-radius-length;
    border-top-left-radius: $border-radius-length;
    box-shadow: .3em 0 .5em rgba(0,0,0,0.25);
    box-sizing: border-box;
    height: 100%;
    left: 0;
    list-style: none;
    padding-top: 1em;
    position: absolute;
    top: 0;
    width: $menu-width;
    z-index: 5;
    li {
        cursor: pointer;
    }
    li.avatar {
        bottom: 1em;
        box-sizing: border-box;
        padding: 1em;
        position: absolute;
        width: 6em;
        img {
            border-radius: 50%;
            width: 100%;
        }
        &::before {
            @include notify(1.25em);
            background-color: #3599ed;
            background-image: linear-gradient(21deg,#3599ed 0%,#2995eb 100%);
            border: .1em solid #e2e2e2;
            color: #fff;
            content: '3';
            line-height: 1.3em;
            right: .75em;
            text-align: center;
            top: .75em;
        }
    }
    li:not(.avatar) {
        font-size: 2.25em;
        opacity: 0.7;
        padding: .5em;
        position: relative;
        text-align: center;
        transition: opacity .5s;
        &:hover, &.active {
            opacity: 1;
        }
        &:not(:first-child) {
            margin-top: .75em;
        }
        &.notify {
            &::before {
                @include notify;
            }
        }
    }
}
.cpu {
    font-size: 1.25em;
    height: 40em;
    position: absolute;
    right: 2em;
    top: -3.5em;
    width: 40em;
    .plate__front {
        animation: frontPlateIn 1.5s .6s forwards;
        background-image: linear-gradient(21deg,rgb(1,65,121) 0%,rgba(0,111,218,0.81) 55%,rgba(0,141,255,0.63) 100%);
        border-radius: 10em;
        display: flex;
        height: 15em;
        opacity: 0;
        position: absolute;
        right: 7.5em;
        top: 9em;
        transform: scale(1.1) scaleZ(1.2) rotateY(-16deg) skewY(16deg);
        transform-origin: 0% 0%;
        width: 15em;
        z-index: 10;
        .chip {
            background-image: linear-gradient(147deg,rgba(2,68,169,0.95) 0%,#0056ff 43%,rgb(0,93,212) 100%);
            border-radius: 1em;
            box-sizing: border-box;
            height: 10em;
            margin: auto;
            padding: 1.5em;
            width: 10em;
            z-index: 15;
            img {
                opacity: .75;
                width: 100%;
            }
        }
        .chip-light {
            animation: lightIn 1.5s 1.6s forwards;
            background-image: linear-gradient(205deg,rgba(55,162,249,0.35) 35%,rgba(38,150,255,0) 100%);
            height: 40em;
            opacity: 0;
            position: absolute;
            right: 4em;
            top: 3em;
            transform: scale(1) scaleZ(1) rotateZ(50deg) rotateY(35deg) rotateX(-175deg);
            transform-origin: 0% 0%;
            width: 8em;
        }
        .chip-light2 {
            animation: lightIn 1.5s 2s forwards;
            background-image: linear-gradient(-93deg,rgba(55,162,249,0.33) 12%,rgba(38,150,255,0) 100%);
            height: 29em;
            opacity: 0;
            position: absolute;
            right: 2em;
            top: 10.7em;
            transform: scale(1) scaleZ(1) rotateZ(48deg) rotateY(40deg) rotateX(-175deg);
            transform-origin: 0% 0%;
            width: 4em;
        }
    }
    .plate__front-shadow {
        animation: frontPlateShadowIn .8s 1s forwards;
        background-image: linear-gradient(201deg,rgba(200,255,254,0.48) 0%,rgba(45,197,212,0.21) 100%);
        border-radius: 9em;
        height: 15.5em;
        opacity: 0;
        position: absolute;
        right: 7.55em;
        top: 8.55em;
        transform: scale(1.1) scaleZ(1.2) rotateY(-16deg) skewY(16deg);
        transform-origin: 0% 0%;
        width: 15em;
        z-index: 9;
    }
    .plate {
        animation: plateIn .5s forwards;
        background-image: linear-gradient(21deg,#004886 0%,#0562bb 43%,#008dff 100%);
        border-radius: .5em;
        display: flex;
        height: 20em;
        opacity: 0;
        position: absolute;
        right: 5em;
        top: 5em;
        transform: scale(1.1) scaleZ(1.2) rotateY(-16deg) skewY(16deg);
        transform-origin: 0% 0%;
        width: 20em;
        z-index: 5;
        .circle {
            animation: plateCircleIn .7s .3s forwards;
            background-color: #004886;
            background-image: linear-gradient(147deg,#004886 0%,#0068cc 43%,#38a6ff 100%);
            border-radius: 50%;
            height: 15em;
            margin: auto;
            opacity: 0;
            width: 15em;
            z-index: 5;
        }
        .circle-light {
            animation: lightIn 1.5s 1s forwards;
            background-image: linear-gradient(205deg,rgba(55,162,249,0.35) 35%,rgba(38,150,255,0) 100%);
            height: 150em;
            opacity: 0;
            position: absolute;
            right: 3em;
            top: 7em;
            transform: scale(1) scaleZ(1.5) rotateZ(45deg) rotateX(-180deg);
            transform-origin: 0% 0%;
            width: 14em;
        }
    }
    .plate-shadow {
        animation: plateShadowIn .5s forwards;
        background-image: linear-gradient(201deg,#c8fffe 0%,#2dc5d4 100%);
        border-radius: 1em;
        height: 20.5em;
        opacity: 0;
        position: absolute;
        right: 4.35em;
        top: 4.35em;
        transform: scale(1.1) scaleZ(1.2) rotateY(-16deg) skewY(16deg);
        transform-origin: 0% 0%;
        width: 20.5em;
    }
}
@keyframes plateIn {
    from {
        background: blue;
        height: 10em;
        opacity: 0;
        right: 10em;
        top: 12em;
        width: 10em;
    }
    to {
        height: 20em;
        opacity: 1;
        right: 5em;
        top: 5em;
        width: 20em;
    }
}
@keyframes plateShadowIn {
    from {
        height: 10.5em;
        opacity: 0;
        right: 9.35em;
        top: 11.35em;
        width: 10.5em;
    }
    to {
        height: 20.5em;
        opacity: 1;
        right: 4.35em;
        top: 4.35em;
        width: 20.5em;
    }
}
@keyframes plateCircleIn {
    from {
        height: 5em;
        opacity: 0;
        width: 5em;
    }
    to {
        height: 15em;
        opacity: 1;
        width: 15em;
    }
}
@keyframes lightIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes frontPlateIn {
    from {
        border-radius: 10em;
        height: 15em;
        opacity: 0;
        right: 7.5em;
        top: 9em;
        width: 15em;
    }
    to {
        border-radius: 5em;
        height: 16em;
        opacity: 1;
        right: 15em;
        top: 15em;
        width: 16em;
    }
}
@keyframes frontPlateShadowIn {
    from {
        border-radius: 9em;
        height: 15.5em;
        opacity: 0;
        right: 7.55em;
        top: 8.55em;
        width: 15em;
    }
    to {
        border-radius: 5em;
        height: 16.5em;
        opacity: 1;
        right: 14.55em;
        top: 14.55em;
        width: 16em;
    }
}

一言

SCSS長い。


コメントを投稿する

* が付いている項目は必須です。
メールアドレスが公開されることはありません。