비전공자 개발일기

Nested Border Radius 본문

Javascript

Nested Border Radius

HiroDaegu 2023. 1. 21. 00:06
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NESTED BORDER RADIUS</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>

<body>
  <div class="container">
    <div class="parent">
      <div class="child">
      </div>
    </div>
    <div class="controls">
      <div class="slider">
        <label for="radius">Parent Radius: <span class="radius-display"></span></label>
        <input type="range" id="radius" value=75 min=0 max=150>
      </div>
      <div class="slider">
        <label for="padding">Parent Padding: <span class="padding-display"></span></label>
        <input type="range" id="padding" value=20 min=0 max=50>
      </div>
    </div>
  </div>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  min-height: 100vh;
  padding: 1rem;
  background: #789;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parent,
.child {
  position: relative;
}

.parent {
  --border-radius: 75px;
  --padding: 20px;
  --dimension: 65vmin;
  height: var(--dimension);
  width: var(--dimension);
  background: paleturquoise;
  border-radius: var(--border-radius);
  padding: var(--padding);
}

.child {
  --dimension: 75%;
  width: var(--dimension);
  height: var(--dimension);
  background: #BB2649;
  border-radius: calc(var(--border-radius) - var(--padding));
}

.controls {
  padding: 0 1rem;
  margin-top: 1rem;
  width: 100%;
}

input[type="range"] {
  width: 100%;
  /*   margin-top: 1rem; */
}
const radiusSlider = document.querySelector("input#radius");
const paddingSlider = document.querySelector("input#padding");

const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

const radiusDisplay = document.querySelector(".radius-display");
const paddingDisplay = document.querySelector(".padding-display");

function updateRadiusDisplay() {
  radiusDisplay.innerText =
    getComputedStyle(parent).getPropertyValue("--border-radius");
}

function updatePaddingDisplay() {
  paddingDisplay.innerText =
    getComputedStyle(parent).getPropertyValue("--padding");
}

radiusSlider.addEventListener("input", () => {
  parent.style.setProperty("--border-radius", `${radiusSlider.value}px`);
  updateRadiusDisplay();
});

paddingSlider.addEventListener("input", () => {
  parent.style.setProperty("--padding", `${paddingSlider.value}px`);
  updatePaddingDisplay();
});

updateRadiusDisplay();
updatePaddingDisplay();
728x90
LIST

'Javascript' 카테고리의 다른 글

Counter APP  (0) 2023.02.17
Music Player Widget  (0) 2023.02.03
Budget App  (0) 2023.01.18
Box Shadow Generator  (0) 2023.01.16
Search Bar With Autocomplete  (0) 2023.01.04
'Javascript' Related Articles more