편집토론문서 역사

연습장:Lena2/styles.css: 두 판 사이의 차이

< 연습장:Lena2
잔글 (Lena님이 연습장:HenderChicken2/styles.css 문서를 넘겨주기를 만들지 않고 연습장:Lena2/styles.css 문서로 이동했습니다)
편집 요약 없음
1번째 줄: 1번째 줄:
/*  # 원본: 틀:POgroup/styles.css   */
:root {
.IM_POG-Section1 {
   --menu-size: 50px;
    background: rgba(40,40,0,0);
transition: background 1s;
}
}
.IM_POG-Section1a {
 
    width:calc(100% - 100px);
.wrapper{
transition: width 1s;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}
}
.IM_POG-Section1b {
 
    display:inline-block;
.navbar {
    overflow:hidden;
  display: flex;
    width:0%;
  height: var(--menu-size);
    height:0px;
  width: 350px;
    opacity:0;
  justify-content: stretch;
transition:opacity 1s, width 1s, height 1s;
  align-items: center;
  background-color: gray;
  padding: 1%;
}
}
.IM_POG-Section1:hover > .IM_POG-Section1a {
 
    width:calc(45% - 100px);
.header {
  color: white;
  font-family: sans-serif;
  font-size: 1.5em;
  margin-left: 10px;
}
}
.IM_POG-Section1:hover > .IM_POG-Section1b {
 
    width:45%;
#checkbox {
    height:max-content;
  position: absolute;
    opacity:1;
  width: 0;
}
}
.IM_POG-Section1:hover {
 
    background: rgba(40,40,0,0.5);
.menu {
  display: block;
  position: relative;
  bottom: 57px;
  right: 10px;
  margin-left: auto;
  height: var(--menu-size);
  width: var(--menu-size);
  background-color: inherit;
  border-radius: 10px;
/*  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); */
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
}


.IM_POG-Section2 {
/* #checkbox:checked + .menu {
    background: rgba(40,0,0,0);
  background-color: white;
transition: background 1s;
} */
 
.menu::before {
  content: "";
  display: block;
  position: absolute;
  height: 10%;
  width: calc(var(--menu-size) * 0.7);
  background-color: black;
  border-radius: 1000px;
  transform: translate(
    calc(var(--menu-size) * 0.15),
    calc(var(--menu-size) * 0.3)
  );
  transition: 0.2s ease-in-out;
}
}
.IM_POG-Section2a {
 
    width:calc(100% - 100px);
.menu::after {
transition: width 1s;
  content: "";
  display: block;
  position: absolute;
  height: 10%;
  width: calc(var(--menu-size) * 0.7);
  background-color: black;
  border-radius: 1000px;
  transform: translate(
    calc(var(--menu-size) * 0.15),
    calc(var(--menu-size) * 0.6)
  );
  transition: 0.2s ease-in-out;
}
}
.IM_POG-Section2b {
 
    display:inline-block;
#checkbox:checked + .menu::before {
    overflow:hidden;
  transform: translate(calc(var(--menu-size) * 0.15), 450%) rotateZ(-45deg);
    width:0%;
    height:0px;
    opacity:0;
transition:opacity 1s, width 1s, height 1s;
}
}
.IM_POG-Section2:hover > .IM_POG-Section2a {
 
    width:calc(45% - 100px);
#checkbox:checked + .menu::after {
  transform: translate(calc(var(--menu-size) * 0.15), 450%) rotateZ(45deg);
}
}
.IM_POG-Section2:hover > .IM_POG-Section2b {
 
    width:45%;
#checkbox:not(:checked) + .menu:hover {
    height:max-content;
  background-color: lightgray;
    opacity:1;
}
}
.IM_POG-Section2:hover {
 
    background: rgba(40,0,0,0.5);
#checkbox:not(:checked) + .menu:hover::before {
  transform: translate(
      calc(var(--menu-size) * 0.15),
      calc(var(--menu-size) * 0.3)
    )
    rotate(-10deg);
}
}


.IM_POG-Section3 {
#checkbox:not(:checked) + .menu:hover::after {
    background: rgba(0,23,40,0);
  transform: translate(
transition: background 1s;
      calc(var(--menu-size) * 0.15),
      calc(var(--menu-size) * 0.6)
    )
    rotate(10deg);
}
}
.IM_POG-Section3a {
 
    width:calc(100% - 100px);
.dropdown-wrapper {
transition: width 1s;
  display: flex;
  width: 365px;
}
}
.IM_POG-Section3b {
 
    display:inline-block;
.dropdown {
    overflow:hidden;
  display: flex;
    width:0%;
  flex-direction: column;
    height:0px;
  gap: 5px;
    opacity:0;
  position: absolute;
transition:opacity 1s, width 1s, height 1s;
  width: 350px;
  transition: 0.2s ease-in;
}
}
.IM_POG-Section3:hover > .IM_POG-Section3a {
 
    width:calc(45% - 100px);
.item {
  color: white;
  font-family: sans-serif;
  font-size: 0;
  margin-left: 15px;
  margin-bottom: 15px;
}
}
.IM_POG-Section3:hover > .IM_POG-Section3b {
 
    width:45%;
#checkbox:checked + .menu + .dropdown {
    height:max-content;
  position: absolute;
    opacity:1;
  width: 350px;
  height: fit-content;
  background-color: gray;
  padding: 1%;
}
}
.IM_POG-Section3:hover {
 
    background: rgba(0,23,40,0.5);
#checkbox:checked + .menu + .dropdown .item:nth-child(1) {
  font-size: 1.2em;
  transition: 0.3s ease-in;
}
}


#checkbox:checked + .menu + .dropdown .item:nth-child(2) {
  font-size: 1.2em;
  transition: 0.3s ease-in 0.1s;
}


 
#checkbox:checked + .menu + .dropdown .item:nth-child(3) {
 
  font-size: 1.2em;
.IM_POG-MTI1 {
  transition: 0.3s ease-in 0.2s;
    position: relative;
    overflow:hidden;
width:50%;
    margin-right:0%;
    z-index:3;
transition: width 1s, margin 1s;
}
.IM_POG-MTI1:hover {
    overflow:hidden;
width:100%;
    margin-right:-50%;
}
.IM_POG-MTI2 {
    position: relative;
    overflow:hidden;
width:50%;
    margin-right:0%;
    z-index:2;
transition: width 1s, margin 1s, z-index 1s;
}
.IM_POG-MTI2:hover {
    overflow:hidden;
width:100%;
    margin-left:-50%;
    z-index:5;
}
}


.IM_POG-MTI {
#checkbox:checked + .menu + .dropdown .item:nth-child(4) {
    filter:brightness(0.5) blur(3px) opacity(15%) grayscale(100%);
  font-size: 1.2em;
    border:none;
  transition: 0.3s ease-in 0.3s;
    z-index:2;
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0);
    transition: filter 0.5s, box-shadow 1s;
}
.IM_POG-MTI:hover {
    filter:brightness(0.8) blur(0px) opacity(100%) grayscale(50%);
    z-index:3;
    box-shadow:0px 0px 8px 4px rgba(0,0,0,0.5);
}
}


.IM_POG-MT1 {
#checkbox:checked + .menu + .dropdown .item:nth-child(5) {
background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,1) 5%, rgba(40,40,0,0) 95%), linear-gradient(to right, #282828 0%, #282828 100%);
  font-size: 1.2em;
transition: background 2s;
  transition: 0.3s ease-in 0.4s;
}
.IM_POG-MT2 {
background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to left, rgba(40,0,0,1) 5%, rgba(40,0,0,0) 95%), linear-gradient(to right, #282828 0%, #282828 100%);
transition: background 2s;
}
.IM_POG-MT1:hover {
background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,1) 80%, rgba(40,40,0,0.7) 100%), linear-gradient(to right, #282828 0%, #282828 100%);
}
.IM_POG-MT1:hover ~ .IM_POG-MT2 {
background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%,  rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,0.7) 0%, rgba(40,0,0,0) 50%), linear-gradient(to right, #282828 0%, #282828 100%);
}
}

2024년 4월 2일 (화) 18:41 판

:root {
  --menu-size: 50px;
}

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.navbar {
  display: flex;
  height: var(--menu-size);
  width: 350px;
  justify-content: stretch;
  align-items: center;
  background-color: gray;
  padding: 1%;
}

.header {
  color: white;
  font-family: sans-serif;
  font-size: 1.5em;
  margin-left: 10px;
}

#checkbox {
  position: absolute;
  width: 0;
}

.menu {
  display: block;
  position: relative;
  bottom: 57px;
  right: 10px;
  margin-left: auto;
  height: var(--menu-size);
  width: var(--menu-size);
  background-color: inherit;
  border-radius: 10px;
/*   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); */
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

/* #checkbox:checked + .menu {
  background-color: white;
} */

.menu::before {
  content: "";
  display: block;
  position: absolute;
  height: 10%;
  width: calc(var(--menu-size) * 0.7);
  background-color: black;
  border-radius: 1000px;
  transform: translate(
    calc(var(--menu-size) * 0.15),
    calc(var(--menu-size) * 0.3)
  );
  transition: 0.2s ease-in-out;
}

.menu::after {
  content: "";
  display: block;
  position: absolute;
  height: 10%;
  width: calc(var(--menu-size) * 0.7);
  background-color: black;
  border-radius: 1000px;
  transform: translate(
    calc(var(--menu-size) * 0.15),
    calc(var(--menu-size) * 0.6)
  );
  transition: 0.2s ease-in-out;
}

#checkbox:checked + .menu::before {
  transform: translate(calc(var(--menu-size) * 0.15), 450%) rotateZ(-45deg);
}

#checkbox:checked + .menu::after {
  transform: translate(calc(var(--menu-size) * 0.15), 450%) rotateZ(45deg);
}

#checkbox:not(:checked) + .menu:hover {
  background-color: lightgray;
}

#checkbox:not(:checked) + .menu:hover::before {
  transform: translate(
      calc(var(--menu-size) * 0.15),
      calc(var(--menu-size) * 0.3)
    )
    rotate(-10deg);
}

#checkbox:not(:checked) + .menu:hover::after {
  transform: translate(
      calc(var(--menu-size) * 0.15),
      calc(var(--menu-size) * 0.6)
    )
    rotate(10deg);
}

.dropdown-wrapper {
  display: flex;
  width: 365px;
}

.dropdown {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  width: 350px;
  transition: 0.2s ease-in;
}

.item {
  color: white;
  font-family: sans-serif;
  font-size: 0;
  margin-left: 15px;
  margin-bottom: 15px;
}

#checkbox:checked + .menu + .dropdown {
  position: absolute;
  width: 350px;
  height: fit-content;
  background-color: gray;
  padding: 1%;
}

#checkbox:checked + .menu + .dropdown .item:nth-child(1) {
  font-size: 1.2em;
  transition: 0.3s ease-in;
}

#checkbox:checked + .menu + .dropdown .item:nth-child(2) {
  font-size: 1.2em;
  transition: 0.3s ease-in 0.1s;
}

#checkbox:checked + .menu + .dropdown .item:nth-child(3) {
  font-size: 1.2em;
  transition: 0.3s ease-in 0.2s;
}

#checkbox:checked + .menu + .dropdown .item:nth-child(4) {
  font-size: 1.2em;
  transition: 0.3s ease-in 0.3s;
}

#checkbox:checked + .menu + .dropdown .item:nth-child(5) {
  font-size: 1.2em;
  transition: 0.3s ease-in 0.4s;
}