Sunrise Cut-out

In this example below you will see how to do a Sunrise Cut-out with some HTML / CSS and Javascript

CSS only cut-out effect Initial setting inspiration: https://codepen.io/Doobox/pen/EoeVjN

Thumbnail
This awesome code was written by Russell Kitchen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Russell Kitchen ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sunrise Cut-out</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Hover</h1>
<div class="drawing">
  <div class="drawing__overlay"></div>

  <div>
    <span class="drawing__mountain"></span>
    <span class="drawing__mountain"></span>
  </div>

  <div>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
    <span class="drawing__star"></span>
  </div>

  <span class="drawing__shooter"></span>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/russellk/sunrise-cut-out-KZxLEE */
h1 {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 20px);
          transform: translate(-50%, 20px);
  z-index: 100;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: normal;
  color: white;
}

.drawing {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  margin-left: auto;
  margin-right: auto;
  background-color: #1a2962;
  background-image: radial-gradient(50vw 50vw at 50% 70%, #dc5e00, rgba(255, 255, 255, 0.0001) 70%);
  background-repeat: no-repeat;
}
.drawing::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%;
  background-color: #050711;
  background-image: radial-gradient(circle at 50% 0%, rgba(220, 94, 0, 0.25), rgba(255, 255, 255, 0.0001) 100%);
  z-index: 1;
  content: '';
}
.drawing::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.drawing__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  max-width: 90%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: 0.75s;
  z-index: 2;
}
.drawing__overlay::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.drawing__overlay::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  z-index: 2;
  border: 10px solid #dc5e00;
  box-shadow: 0px 0px 0px 100vw black;
}
.drawing:hover .drawing__overlay {
  -webkit-transform: translate(-50%, -50%) scale(5);
          transform: translate(-50%, -50%) scale(5);
}

.drawing__mountain {
  position: absolute;
  top: 90%;
  left: 50%;
  width: 50%;
  z-index: 1;
  background-color: #203049;
  background-image: linear-gradient(90deg, rgba(246, 105, 0, 0.25), rgba(255, 255, 255, 0.0001) 20%);
}
.drawing__mountain::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.drawing__mountain:nth-of-type(1) {
  -webkit-transform: translatey(-12%) translatex(-60%) rotate(45deg);
          transform: translatey(-12%) translatex(-60%) rotate(45deg);
}
.drawing__mountain:nth-of-type(2) {
  -webkit-transform: translatey(-20%) translatex(-40%) rotate(45deg);
          transform: translatey(-20%) translatex(-40%) rotate(45deg);
}

.drawing__star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
}
.drawing__star::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.drawing__star:nth-of-type(1) {
  top: 35%;
  left: 37%;
  width: 2px;
}
.drawing__star:nth-of-type(2) {
  top: 40%;
  left: 65%;
  width: 2px;
}
.drawing__star:nth-of-type(3) {
  top: 44%;
  left: 50%;
  width: 4px;
}
.drawing__star:nth-of-type(4) {
  top: 43%;
  left: 60%;
  width: 2px;
}
.drawing__star:nth-of-type(5) {
  top: 39%;
  left: 40%;
  width: 2px;
}
.drawing__star:nth-of-type(6) {
  top: 32%;
  left: 40%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(7) {
  top: 91%;
  left: 54%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(8) {
  top: 94%;
  left: 47%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(9) {
  top: 84%;
  left: 30%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(10) {
  top: 93%;
  left: 88%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(11) {
  top: 9%;
  left: 20%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(12) {
  top: 51%;
  left: 71%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(13) {
  top: 56%;
  left: 87%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(14) {
  top: 77%;
  left: 4%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(15) {
  top: 58%;
  left: 96%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(16) {
  top: 24%;
  left: 100%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(17) {
  top: 68%;
  left: 52%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(18) {
  top: 28%;
  left: 58%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(19) {
  top: 82%;
  left: 13%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(20) {
  top: 28%;
  left: 11%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(21) {
  top: 88%;
  left: 52%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(22) {
  top: 1%;
  left: 74%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(23) {
  top: 93%;
  left: 10%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(24) {
  top: 83%;
  left: 58%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(25) {
  top: 86%;
  left: 3%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(26) {
  top: 80%;
  left: 70%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(27) {
  top: 87%;
  left: 24%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(28) {
  top: 89%;
  left: 100%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(29) {
  top: 35%;
  left: 13%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(30) {
  top: 44%;
  left: 70%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(31) {
  top: 9%;
  left: 76%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(32) {
  top: 63%;
  left: 53%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(33) {
  top: 84%;
  left: 17%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(34) {
  top: 18%;
  left: 37%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(35) {
  top: 52%;
  left: 64%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(36) {
  top: 46%;
  left: 94%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(37) {
  top: 53%;
  left: 80%;
  width: 1px;
}
.drawing__star:not(:last-of-type):nth-of-type(38) {
  top: 60%;
  left: 53%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(39) {
  top: 85%;
  left: 87%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(40) {
  top: 24%;
  left: 65%;
  width: 2px;
}
.drawing__star:not(:last-of-type):nth-of-type(41) {
  top: 6%;
  left: 71%;
  width: 1px;
}
.drawing__star:last-of-type {
  top: 39%;
  left: 42%;
  width: 1px;
  height: 1px;
}
.drawing__star:last-of-type::before, .drawing__star:last-of-type::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 20px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 white;
  content: '';
}
.drawing__star:last-of-type::before {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
.drawing__star:last-of-type::after {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.drawing__shooter {
  position: absolute;
  top: 30%;
  left: 52%;
  width: 15%;
  height: 2px;
  border-radius: 10px;
  background-image: linear-gradient(90deg, white, rgba(255, 255, 255, 0.0001) 70%);
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}

Comments