2020 년에 알아야 할 11 가지 CSS 비밀

CSS 트릭
04.30 이미지 크레딧 : Aga Naplocha

CSS 및 멋진 레이아웃 구축에 익숙하더라도 새로운 CSS 속성 및 기능을 발견 할 수 있습니다. 이를 사용하면 웹 사이트에서 콘텐츠가 어떻게 작동하는지에 더 많은 영향을 미칠뿐만 아니라 사진과 같은 요소에 창의적인 기술을 적용하는 방법에있어 더 많은 자유를 갖게됩니다.

이 튜토리얼에서는 잘 알려지지 않은 몇 가지 속성을 파헤칠 것입니다. 실험 할 때 언급 된 기능이 모든 브라우저에서 지원되지는 않는다는 점을 명심하십시오. 사용해도 되나요 대지. 짧고 간결한 몇 가지 예를 살펴 보겠습니다.



더 많은 CSS 영감을 원하십니까? 이 최고 인기보기 CSS 애니메이션 예제뿐만 아니라 CSS 트릭 . 사이트 구축을 처음부터 시작하는 경우 우리의 훌륭한 웹 사이트 빌더 자산을 저장하려면 올바른 클라우드 스토리지 당신을 위해.



안드로이드 2015를위한 최고의 사진 앱

필요한 것 :

  • 좋아하는 웹 브라우저 및 개발자 도구 –이 자습서에서 사용하는 모든 기능을 지원하는 Firefox 또는 Google Chrome을 사용하는 것이 좋습니다.
  • 코드 편집기.
  • 이미지 및 글꼴과 같은 자산 (다음에서 다운로드 할 수 있음) 내 저장소 .

인쇄 방향

웹에서 텍스트가 표시되는 방식을 향상시키는 데 도움이되는 몇 가지 CSS 속성이 있습니다.

01. 텍스트 스트로크

Adobe Illustrator 또는 벡터 드로잉 애플리케이션의 텍스트 스트로크 (윤곽선)에 익숙합니다. 다음을 사용하여 동일한 효과를 적용 할 수 있습니다. 텍스트 스트로크 특성.



애니메이션을 할 수 있다는 것을 아는 것이 좋습니다. 텍스트 스트로크 CSS를 사용하지만 획 색상 만 – 획 너비는 그렇지 않습니다.

footer h3 { /*more styles in style.css*/ /*...*/ -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #000; }

02. :: 첫 글자

이 의사 요소는 블록 수준 요소의 첫 글자에 스타일을 적용합니다. 덕분에 우리는 인쇄 및 종이 잡지에서 우리에게 친숙한 효과를 도입 할 수 있습니다.

p.intro:first-letter { font-size: 100px; display: block; float: left; line-height: .5; margin: 15px 15px 10px 0 ; }

03. 그라데이션 텍스트

마지막으로 복잡한 방법없이 텍스트에 그라디언트를 적용 할 수 있습니다. 이 눈길을 끄는 효과를 웹 사이트에 어떻게 도입 할 수 있는지 알아 보겠습니다.



h2.contact-heading { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background: radial-gradient(#ffbc00, #ff65aa); }

콘텐츠 제어

다음 속성 덕분에 컨테이너의 크기 나 비율에 따라 텍스트 나 이미지의 동작 방식을 더 잘 제어 할 수 있습니다.

04. 라인 클램프

그만큼 라인 클램프 속성은 특정 줄 수에서 텍스트를 자릅니다. 작동하려면 세 가지 속성이 필요합니다.

그만큼 디스플레이 속성을 다음으로 설정해야합니다. -웹킷 상자 또는 -webkit- 인라인 상자 , -webkit-box-orient 세로로 설정하고 오버플로를 숨김으로 설정하지 않으면 내용이 잘리지 않습니다.

p.shortened { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

04. 컬럼 수

덕분에 열 수 속성에서 브라우저는 지정된 수의 열에 콘텐츠를 균등하게 배포합니다.

.outro { column-count: 2; }

05. 캐릭터 유닛

문자 단위에 따라 텍스트 너비 또는 높이를 제한 할 수 있습니다. 같이 Eric Mayer는 다음과 같이 지적합니다. , ch unit은 현재 글꼴에서 문자 '0'(영)의 너비를 나타내며 특히 고정 폭 글꼴과 함께 사용됩니다. 글꼴 패밀리가 변경되면 변경됩니다. 우리는 그것을 조금 x 높이 하지만 ch x 대신 0 문자의 너비를 기반으로합니다.

포토샵 CS5에 글꼴을 추가하는 방법
h2.contact-heading { /*more properties in the CSS file* … max-width: 8ch; }

06. 단어 나누기 태그

이 튜토리얼은 CSS 트릭을 기반으로하지만 하나의 HTML 태그도 언급하고 싶습니다. . 이것은 단어 나누기 기회 (브라우저가 줄을 끊을 수있는 텍스트 내의 위치)를 정의하는 HTML 요소입니다. In은 일부 상황에서 유용 할 수 있습니다. 단어가 꽤 길고 브라우저가 전화 번호와 같은 잘못된 위치에서 단어를 분리 할까봐 두려울 때 사용할 수 있습니다.

+0043234-343234-234

07. 개체 맞춤

컨테이너의 크기에 따라 이미지 동작을 제어 할 수 있는지 궁금하다면 다음을 확인하시기 바랍니다. 개체 맞춤 특성. 이것은 내용의 내용을 정의합니다 또는 컨테이너에 맞게 크기를 조정해야합니다. 네 가지 옵션이 있습니다. 가득 따르다 , 있다 , 덮개축소 . 예를 들어, 덮개 값을 지정하면 요소의 전체 콘텐츠 상자를 채우면서 가로 세로 비율을 유지하도록 교체 된 콘텐츠의 크기가 조정됩니다.

.object-fit { object-fit: cover; height: 400px; width: 100%; }

장식적이고 창의적인 요소

CSS 트릭 : 콘텐츠

d3.js와 같은 데이터 시각화 라이브러리는 포괄적 인 차트 기능을 제공하지만 간단한 원형 차트의 경우 CSS를 사용해 보는 것이 어떻습니까?04.30 이미지 제공 : Aga Naplocha

웹 사이트에 몇 가지 새로운 요소와 색상을 추가해 보겠습니다.

08. 원추형 그라데이션

CSS 만 사용하여 원형 차트를 만들 수 있는지 궁금한 적이 있다면 실제로 할 수 있다는 좋은 소식이 있습니다! 그리고 이에 대한 해결책은 우리를 원뿔 그라데이션 함수. 중앙 지점을 중심으로 회전하는 설정된 색상 전환이있는 그래디언트로 구성된 이미지를 만듭니다. 방사형 그라데이션 ).

.piechart { background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%); border-radius: 50%; width: 300px; height: 300px; }

09. 카운터

번호가 매겨진 목록에서 숫자의 스타일을 지정하려면 CSS 카운터라는 속성을 사용해야합니다. CSS 카운터를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다.

CSS 트릭 : 데이터

Photoshop에서 한 사진에서 다른 사진으로 사람을 이동하는 방법
CSS 카운터를 사용하면 문서 내 위치에 따라 콘텐츠의 모양을 조정할 수 있으므로 번호가 매겨진 목록의 스타일을 지정할 수있는 편리한 방법을 제공합니다.04.30 이미지 제공 : Aga Naplocha

CSS 카운터를 사용하려면 :

  • 카운터 값은 다음과 같이 증가 또는 감소 할 수 있습니다. 반 증가
  • 카운터 값을 표시 할 수 있습니다. 카운터() 또는 카운터 () 콘텐츠 속성 내에서 기능
ol.numbered-list > li:before { content: counter(li); position: absolute; box-sizing: border-box; width: 45px; height: 45px; background: #f3b70f; border-radius: 50%; } ol.numbered-list li { position: relative; left: 0px; list-style: none; counter-increment: li; }

10. 텍스트 선택 색상 변경

텍스트 선택 색상을 변경하려면 ::선택 는 브라우저 수준에서 재정 의하여 텍스트 강조 표시 색상을 사용자가 선택한 색상으로 대체하는 의사 요소입니다. 커서로 콘텐츠를 선택하면 색상을 볼 수 있습니다.

::selection { background-color: #f3b70f; }

11. @support

모든 브라우저에서 지원되지 않는 CSS 속성을 사용하려는 경우에는 @지원하다 규칙. 이를 통해 CSS 속성 : 값 쌍에 대한 브라우저 지원을 확인할 수 있습니다. 에 포함 된 코드 @지원하다 이러한 조건이 참인 경우에만 블록이 렌더링됩니다.

브라우저가 이해하지 못하는 경우 @지원하다 , 코드의 특정 부분도 생성하지 않습니다.

@supports (text-stroke: 4px navy;) { .example { text-stroke: 4px navy; } }

일부 속성은 여전히 ​​브라우저의 호환성에 문제가있을 수 있지만 주저하지 말고 함께 플레이하세요. 현재 브라우저 지원이 제한 될 수 있지만 향후에는 이러한 방식이 주류가 될 것입니다. 시간 문제 일뿐입니다. 이러한 효과를 렌더링 할 수있는 브라우저에서만로드되도록하려면 @ 지원 스타일을 감싸는 규칙.

더 많은 영감을 얻고 싶다면 Jen Simmons와 Mozilla는 레이아웃 랜드 , 도구 및 기술, 새로운 기능 및 모범 사례를 포함하여 웹 디자인 및 개발에 대한 동영상으로 가득한 YouTube 채널입니다. 또한 다음을 사용하여 색 대비를 테스트하고 색맹을 시뮬레이션하는 방법을 찾을 수 있습니다. Firefox DevTools . 그리고 웹 사이트의 복잡성을 고려하는 동안 웹 호스팅 서비스는 우리의 야망을 반영합니다.

샤프 펜슬은 얼마입니까?

이 내용은 원래 넷 매거진에 실 렸습니다. 더보기 여기에 웹 디자인 콘텐츠 .

더 읽어보기 :