비전공자 개발일기

To Do List by Pure CSS 본문

HTML _CSS

To Do List by Pure CSS

HiroDaegu 2022. 6. 5. 00:07
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>TO DO LIST BY PURE CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <fieldset class="todo-list">
    <legend class="todo-list-title">My Special To Do List</legend>
    <label class="todo-list_label">
      <input type="checkbox">
      <i class="check"></i>
      <span>Make awesome CSS Animation</span>
    </label>
    <label class="todo-list_label">
      <input type="checkbox">
      <i class="check"></i>
      <span>Go to Gym</span>
    </label>
    <label class="todo-list_label">
      <input type="checkbox">
      <i class="check"></i>
      <span>Make a iOS Application</span>
    </label>
    <label class="todo-list_label">
      <input type="checkbox">
      <i class="check"></i>
      <span>Swift, React Native, Next.js, Node.js</span>
    </label>
  </fieldset>
</body>
</html>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1A1E23;
}

.todo-list {
  display: flex;
  flex-direction: column;
  padding: 0 75px 10px 30px;
  background-color: #162740;
  border: transparent;
}

.todo-list .todo-list-title {
  padding: 3px 6px;
  color: #F1FAEE;
  background-color: #264456;
}

.todo-list .todo-list_label {
  display: flex;
  align-items: center;
  margin: 40px 0;
  font-size: 24px;
  color: #F1FAEE;
  cursor: pointer;
}

.todo-list .todo-list_label input[type=checkbox] {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.todo-list .todo-list_label input[type=checkbox] + .check {
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #F1FAEE;
  transition: .2s;
}

.todo-list .todo-list_label input[type=checkbox]:checked + .check {
  width: 25px;
  height: 15px;
  border-top: transparent;
  border-right: transparent;
  transform: rotate(-45deg);
}

.todo-list .todo-list_label input[type=checkbox] ~ span {
  position: relative;
  left: 40px;
  white-space: nowrap;
  transition: .5s;
}

.todo-list .todo-list_label input[type=checkbox] ~ span::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #F1FAEE;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s;
}

.todo-list .todo-list_label input[type=checkbox]:checked ~ span {
  color: #585B57;
}

.todo-list .todo-list_label input[type=checkbox]:checked ~ span::before {
  transform: scaleX(1);
  transform-origin: left;
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

CSS Simple Animation  (0) 2022.06.08
GROWING LEON APPLE ICON  (0) 2022.06.06
Add To Cart Animation  (0) 2022.06.03
Snow Animation  (0) 2022.06.02
CSS Background Animation Effects  (0) 2022.05.30
'HTML _CSS' Related Articles more