CodePenネタです。
CSSだけでNintendo Switchを描く方法です。
HTMLにPug、CSSにSCSSを使っています。

サンプル

See the Pen Nintendo Switch in CSS (responsive) by Christopher Kirk-Nielsen (@chriskirknielsen) on CodePen.

HTML(Pug)

.switch
  .body
  .joycon.joycon--left
    .joycon__sign.joycon__sign--minus
    .joycon__stick.joycon__stick--left
      .joycon__stickCenter
    .joycon__cross.joycon__cross--left
      .joycon__button.joycon__button--top
        .arrow.arrow--up
      .joycon__button.joycon__button--left
        .arrow.arrow--left
      .joycon__button.joycon__button--right
        .arrow.arrow--right
      .joycon__button.joycon__button--bottom
        .arrow.arrow--down
    .joycon__options.joycon__options--capture
  .joycon.joycon--right
    .joycon__sign.joycon__sign--plus
    .joycon__stick.joycon__stick--right
      .joycon__stickCenter
    .joycon__cross.joycon__cross--right
      .joycon__button.joycon__button--top
        .letter
          ="X"
      .joycon__button.joycon__button--left
        .letter
          ="Y"
      .joycon__button.joycon__button--right
        .letter
          ="A"
      .joycon__button.joycon__button--bottom
        .letter
          ="B"
    .joycon__options.joycon__options--home
  .tablet
    .tablet__frame
      .tablet__screen

CSS(SCSS)

// Utilities
$area-width: 90vmin; // Responsive awesomeness!
$border-width: 0.005em;

// Colours
$bg: #f5d76f;
$left-joycon: #5dc0e0;
$right-joycon: #e77366;
$shadow: rgba(0,0,0, .1);
$highlight: rgba(255,255,255, .5);
$black: #2c2b28;
$dark-grey: #403e41;
$grey: #515056;
$light-grey: #6b6b6d;
$white: #c8c9cc;

// Uncomment the block below for "boring grey" Joy-cons
/*
$left-joycon: #6b6b6d;
$right-joycon: #6b6b6d;
//*/

*,
*::before,
*::after { // Styling the borders here makes it easier down the road for a consistent look
  box-sizing: border-box;
  border-color: #{$black};
  border-style: solid;
  border-width: 0;
}

html,
body {
  height: 100%;
  font-size: 16px;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
  background-color: $bg;
  background-image: linear-gradient(42deg, rgba(0,0,0,.25), rgba(255,255,255,.25));
  background-attachment: fixed;
}

.switch {
  position: relative;
  width: 1em;
  height: .4372em;
  font-size: $area-width;
}

.body {
  position: absolute;
  left: 13.75%;
  top: 2%;
  bottom: 0;
  width: 72.5%;
  border-width: #{$border-width};
  background-color: #{$grey};
}

.joycon {
  position: absolute;
  top: 0;
  width: 14.45%;
  height: 100%;
  border-width: #{$border-width};
  box-shadow:
    inset 0  .005em 0 #{$shadow},
    inset 0 -.01em  0 #{$shadow},
    inset 0 -.03em  0 #{$shadow};
  animation: joyconSnap .75s ease-out backwards 1;

  &--left {
    left: 0;
    background-color: $left-joycon;
    border-radius: 0.0875em 0 0 0.0875em;
    animation-delay: -.25s;
  }

  &--right {
    right: 0;
    background-color: $right-joycon;
    border-radius: 0 0.0875em 0.0875em 0;
  }

  &__sign {
    position: absolute;
    top: .0325em;
    width: .02em;
    height: .005em;
    background: $black;

    &--minus {
      right: .01em;
    }

    &--plus {
      position: absolute;
      left: .01em;

      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        transform: rotate(90deg);
      }
    }
  }

  &__stick {
    position: absolute;
    width: .07377em;
    height: .07377em;
    border-width: #{$border-width};
    border-radius: 50%;
    background-color: $light-grey;
    box-shadow: .005em -.005em 0 .0025em #{$shadow};

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: calc(50% - #{$border-width/2});
      top: 0;
      width: $border-width;
      height: 100%;
      background-color: $black;
    }

    &::after {
      transform: rotate(90deg);
    }

    &--left {
      left: .035em;
      top: .07377em;
    }

    &--right {
      right: .035em;
      top: .1913em;
    }
  }

  &__stickCenter {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    border-width: #{$border-width};
    border-radius: 50%;
    background-color: $light-grey;
    box-shadow: inset #{$border-width/2} -#{$border-width/2} 0 #{$highlight};
    z-index: 1; // To pass the element over the parent's ::after
  }

  &__cross {
    position: absolute;
    width: .0875em;
    height: .0875em;
    transform: rotate(45deg);

    &--left {
      right: .02em;
      top: .183em;
    }

    &--right {
      left: .02em;
      top: .0656em;
    }
  }

  &__button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: .038em;
    height: .038em;
    border-width: $border-width;
    border-radius: 50%;
    box-shadow: inset #{$border-width/2} -#{$border-width/2} 0 #{$highlight};
    transform: rotate(-45deg);

    .joycon__cross--left & {
      background-color: $light-grey;
    }

    .joycon__cross--right & {
      background-color: $dark-grey;
    }

    &--top {
      left: 0;
      top: 0;
    }

    &--left {
      left: 0;
      bottom: 0;
    }

    &--right {
      right: 0;
      top: 0;
    }

    &--bottom {
      right: 0;
      bottom: 0;
    }
  }

  &__options {
    position: absolute;
    top: .3em;
    width: .035em;
    height: .035em;
    border-width: $border-width;
    background-color: $light-grey;

    &--capture {
      right: .025em;

      &::after {
        content: '';
        position: absolute;
        left: 10%;
        top: 10%;
        width: 80%;
        height: 80%;
        border-radius: 50%;
        background-color: $black;
      }
    }

    &--home {
      left: .025em;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      &::before,
      &::after {
        content: '';
        transform: translateY(-.001em);
      }

      &::before {
        width: 0;
        height: 0;
        border-width: 0 #{$border-width*2} #{$border-width*2} #{$border-width*2};
        border-color: transparent transparent #{$black} transparent;
      }

      &::after {
        width: 50%;
        height: 33%;
        border-width: 0 #{$border-width/2} #{$border-width/2} #{$border-width/2};
      }
    }
  }
}

@keyframes joyconSnap {
  from {
    transform: translateY(-100%);
  }
}

.arrow {
  width: 0;
  height: 0;

  &--up {
    border-width: 0 #{$border-width*1.5} #{$border-width*2} #{$border-width*1.5};
    border-color: transparent transparent #{$black} transparent;
  }

  &--left {
    border-width: #{$border-width*1.5} #{$border-width*2} #{$border-width*1.5} 0;
    border-color: transparent #{$black} transparent transparent;
  }

  &--right {
    border-width: #{$border-width*1.5} 0 #{$border-width*1.5} #{$border-width*2};
    border-color: transparent transparent transparent #{$black};
  }

  &--down {
    border-width: #{$border-width*2} #{$border-width*1.5} 0 #{$border-width*1.5};
    border-color: #{$black} transparent transparent transparent;
  }
}

.letter {
  font-size: .015em;
  line-height: 100%;
  color: #{$white};
}

.tablet {
  position: absolute;
  left: 15%;
  top: 0;
  width: 70%;
  height: 101%;
  border-width: #{$border-width};
  background-color: #{$grey};
  box-shadow: inset 0 -#{$border-width} 0 #{$shadow};

  &__frame {
    position: absolute;
    left: $border-width;
    right: $border-width;
    top: #{$border-width*2};
    height: 92.5%;
    border-width: $border-width;
    border-radius: .016em;
    background-color: $dark-grey;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      right: .0437em;
      bottom: 0;
      width: .0328em;
      height: $border-width;
      background-color: $black;
    }

    &::after { // Reflection
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image:
        linear-gradient(
          to right,
          #{$highlight}  0%,
          #{$highlight}  25%,
          transparent    25%,
          transparent    30%,
          #{$highlight}  30%,
          #{$highlight}  68%,
          transparent    68%,
          transparent    100%
        );
      transform-origin: 0 0;
      animation: tabletShine 1s linear .5s both 1;
    }
  }

  &__screen {
    position: absolute;
    left: .0437em;
    right: .0437em;
    top: .027em;
    bottom: .027em;
    border-width: $border-width;
    border-radius: $border-width;
    background-color: $white;
  }
}

@keyframes tabletShine {
  0% {
    transform: skewX(-30deg) translateX(-100%);
  }
  100% {
    transform: skewX(-30deg) translateX(150%);
  }
}

一言

任天堂のサイトで使えそう。

コメントを投稿する

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