두 가지 간단한 CSS🍉 팁과 이번 토요일 사랑의 조각.

안녕하세요, 이 기사를 선택해 주셔서 감사합니다. 세 가지 놀라운 항목을 가져왔습니다. 두 개는 CSS용이고 한 개는 Twitter의 사랑입니다. 더 읽을 수 있도록 링크도 포함하려고 했습니다.

Though the title of the article favors beginners, anyone can read this; those interested to refresh their skills, or those paving their journey to senior developers. It depends on how you feel and the contents I have organized.

이제 본격적으로 시작하겠습니다.

삽입된 CSS 속성

글쎄, 그렇게 특이한 단어가 아니라 매우 매력적인 능력을 가진 CSS 속성입니다. 나는 최근에 그것을 통과하고 있습니다. 나는 아래 트윗이 나올 때까지 그것이 무엇인지 배우려는 의도가 없었습니다.

Damn i love the CSS inset property, it's short hand for top, left, bottom and right:

stick to bottom:
position: absolute;
inset: auto 0 0 0;

full screen:
position: absolute;
inset: 0;https://t.co/fCcmDbRcgM

— Ada Rose Cannon ( )

나는 그냥 나 자신에게 말했지, 한 번 해보자, 그리고 이것이 내가 찾은 것이다:

트윗 상태와 마찬가지로 top , right , bottom 및/또는 left 속성에 해당하는 속기입니다.

오른쪽 위, 아래, 왼쪽 순서로 시계 방향으로 숫자 값을 받습니다.

CSS Logical Properties의 일부이지만 논리적 오프셋을 정의하지 않습니다. 요소의 쓰기 모드, 방향성 및 텍스트 방향에 관계없이 물리적 오프셋을 정의합니다.

삽입 전에 해킹은 아래와 같이 각 삽입 하위 속성을 개별적으로 선언하는 것이었습니다.

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

이제 한 줄의 CSS로 단순화할 수 있습니다.

.box {
  position: absolute;
  inset: 0; /* 🎉 */
}

통사론:

inset:length|percentage|auto|inherit|initial|unset;

/* <length> values */
inset: 10px;   /* value applied to all edges */
inset: 4px 8px;   /* top/bottom left/right */
inset: 5px 15px 10px;   /* top left/right bottom */
inset: 2.4em 3em 3em 3em;   /* top right bottom left */

/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;

/* Keyword value */
inset: auto;

/* Global values */
inset: inherit;
inset: initial;
inset: revert;
inset: unset;

length : px, cm, pt 등으로 정의된 고정 값을 설정합니다. 음수 값도 허용됩니다. 기본값은 0px입니다.

percentage : 길이와 같지만 창 크기의 백분율로 크기를 설정합니다.

auto : 브라우저가 삽입 크기를 결정하기를 원할 때 사용됩니다.

initial : 삽입 속성 값을 기본값으로 설정하는 데 사용됩니다.

inherit : 상위 요소에서 삽입 속성 값을 상속합니다.

unset : 삽입 속성을 해제하는 데 사용되며 기본값입니다.

삽입 속성에 대한 추가 정보here.

클립 경로 애니메이션

클립 경로로 할 수 있는 멋진 일 중 하나는 애니메이션입니다.

그러나 모양이 호환되는 경우에만 clip-paths를 애니메이션으로 만들 수 있습니다. 애니메이션을 적용할 동일한 양의 포인트를 유지하는 것입니다.
예를 들어 다각형을 첫 번째 모양으로 사용하면 다른 모든 모양은 좌표(x y 점)가 같은 다각형이어야 합니다. Here은 그것을 증명하기 위해 만든 펜입니다.

웹에는 clip-path CSS가 필요한 수많은 상황이 있으며 배울 가치가 있습니다. 게다가 애니메이션은 사용자에게 정말 멋집니다. 원하는 경우 클릭하여 클립 경로에 대해 자세히 알아보십시오here..

오늘의 조언은 매우 간단하며 트위터에서 유명한 사람 중 한 사람의 조언입니다.

"If you aren’t curious about it, you’ll never be good at it."

— Navalism (@NavalismHQ)

호기심을 확인하십시오. 학습을 시작하세요!

여기까지 와준 친구에게 백만 감사합니다. 나는 너무 기뻐요! 그러나 나는 당신이 좋아하는 경우에만 그러한 기사를 계속 쓸 수 있으므로 아래 댓글 섹션에서 당신의 생각을 알려주십시오. 귀하의 반응에 감사하고 기록해 두겠습니다.