우리의 친애하는 친구 로빈이 라는 새로운 에세이를 가지고 있습니다. 그림자를 찬양하며. 이제 CSS 상자 그림자, 텍스트 그림자 및 그림자 필터에 대한 너겟을 찾기 전에 여기로 이동합니다. 하지 그. 사진에 대한 에세이이자 Robin이 카메라로 그림자를 다루는 방법에 대해 배운 내용입니다.
왜 이것을 공유합니까? 하나의 에세이를 전용으로 기사화한 페이지를 만들었다는 것이 참 멋지기 때문입니다. 그리고 DevTools를 열어보면 CSS에 대해 많은 것을 배우게 될 것입니다.
- 센터링 기술. CSS 그리드가
<body>단순히 소책자를 중앙에 두다. 그런 다음 Robin은 각각에 대해 다시 손을 뻗습니다..frame에세이의 내용과 동일한 작업을 수행합니다. - "가짜" 배경 이미지. Robin은 각각에 대한 CSS 클래스를 만들어 스스로 많은 일을 할 수 있었습니다.
.frame배경 이미지를 가져옵니다. 대신 그는 사용합니다.object-fit: cover인라인 HTML에서<img>s를 채우는 동안 종횡비를 유지하려면.frame컨테이너. (그는 실제로 이것에 대해 쓴 전에.) 확실히 CSS를 많이 절약할 수 있지만 필요한 경우 대체 텍스트를 사용할 수도 있습니다. 나는 어떤지 궁금하다<figure>/<figcaption>구조가 대신 여기에서 작동할 수 있었지만 진행 중인 일에 훨씬 더 많은 이점을 제공할 수 있을지 의심됩니다. - 스택 컨텍스트. 그 가짜 배경 이미지의 또 다른 특혜? 그것들은 스태킹 컨텍스트를 생성하는 절대 위치 지정을 사용하여 Robin이
z-index: 0이미지에. 그렇게 하면 텍스트가 맨 위에 직접 쌓입니다.z-index: 1. 다시 말하지만, CSS Grid는 모든 중앙 정렬을 처리하므로 모든 것이 잘 정렬됩니다. - 스크롤 스냅. 난 항상 애정 그것은 내가 야생에서 스냅하는 CSS 스크롤을 볼 때입니다. Robin은 프레임을 스크롤하는 동안 전체 페이지를 넘기는 경험에 실제로 도움이 되기 때문에 여기에서 사용하기로 결정했습니다. 가로 스크롤은 미치게 만들 수 있지만 좁은 열 디자인을 향상시키는 방법에서 잘 실행될 때 매우 우아합니다. 모든 작동 방식에 대한 멋진 설명을 원하시면 Robin도 수평 스크롤 스냅에 대해 작성됨.
로빈은 훌륭한 작가이며 그가 출판하는 CSS와 그 이상을 읽을 가치가 있습니다.
