💧CSS:Others Properties

hojune·2023년 8월 13일

Web Development

목록 보기

8/33

Rgba

투명도까지 포함된 Rgb

rgba-  ( , , , alpha channel)



alpha = 0 투명

alpha = 1 불투명

hex = ff 불투명

Opacity

전체 요소의 투명도 관여

Position property

static - 일반적 문서 흐름에 따라 배치 top left px설정과 같은 요소에 적용을 받지 않음

relative - 요소를 일반적 문서 흐름에 따라 배치 위와 같은 요소에 대한 적용을 받음

absolute - 공간 배정 x 가장 가까운 위치의 지정 조상 요소에 대해 상대적 배치 단 없다면 
초기 컨테이닝 블록을 기준 삼음

fixed - 공간 배정 x 

sticky 

top,left같은 요소를 이용해서 공간을 벌릴수 있음 위로부터 몇 px 이런식

Transitions

property name

duration

timing function


delay
.circle {
    width: 300px;
    
    height: 300px;
    
    background-color: magenta;
    
    transition: background-color 1s,ease-in,border-radius 2s;
}

.circle:hover {

    background-color: cyan;

    border-radius: 50%;

}

section div {

    height: 100px;

    width: 100px;

    background-color: black;

    margin: 20px 20px;

    transition: margin-left 3s;

}


section:hover div {

    margin-left: 500px;

}


div:nth-of-type(1) {

    transition-timing-function: ease-in;

}


div:nth-of-type(2) {

    transition-timing-function: ease-out;

}


div:nth-of-type(3) {

    transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);

}


div:nth-of-type(4) {

    transition-timing-function: ease-in;

}


transition 지정할때 all요소도 사용가능하지만 개별 요소로 지정하는 것을 지향

나중에 수정할 때 용이함

Transform

transform : skew(30deg)  scale(1.3)

이런식으로 사용가능 

여러 옵션이 있음

Button Hover Effect

effect를 어떤 요소들을 이용해서 만드는 지 


body {

  font-family: 'Roboto', sans-serif;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

  background-color: #151b29;

}

button {

  background: none;

  color: #ffa260;

  border: 2px soild;

  padding: 1.5em 2em;

  font-size: 1em;

  transition: 1s;

}

button:hover {

  border-color: #f1ff5c;

  color: white;

  box-shadow: 0 0.5em 0.5em -0.4em yellowgreen;

  transform: translateY(-0.25em);

}

Background

color, img, size, etc.

no repeat - 이미지 반복 막을 수 있음

 background-image: url("https://images.unsplash.com/photo-1564442038901-4f9a19d3d456?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1227&q=80");

 background-size: cover;

 background-position: top;

 margin: 0 auto;

속기

 background: center/cover url("https://images.unsplash.com/photo-1564442038901-4f9a19d3d456?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1227&q=80");