CSS 기능이있는 8 가지 영리한 트릭

CSS의 힘은 많은 웹 개발자의 상상력을 훨씬 뛰어 넘습니다. 시간이 지남에 따라 스타일 시트 언어는 점점 더 강력 해져서 원래 JavaScript를 달성 해야하는 브라우저에 기능을 제공합니다. 이 기사는 JavaScript가 필요하지 않은 8 개의 영리한 CSS 기능 팁을 소개합니다.

키 포인트

CSS 기능은 JavaScript없이 툴팁, 썸네일 제목, 카운터 및 프로스트 유리 효과와 같은 다양한 효과와 기능을 만드는 데 사용될 수 있습니다. 기능은 더 똑똑한 그리드 시스템을 생성하고 고정 위치 요소의 정렬을 만들어 설계의 유연성과 정밀도를 더 많이 제공 할 수 있습니다. CSS 함수는 또한 함수를 사용하여 창의적인 애니메이션을 허용 할뿐만 아니라 HTML 요소를

함수를 사용하여 배경 이미지로 사용할 수있는 잠재력을 허용하지만, 후자는 현재 Firefox에 의해서만 지원됩니다.

• calc() 순수한 CSS 툴팁
많은 웹 사이트에서 여전히 JavaScript를 사용하여 툴팁을 작성하지만 실제로 CSS를 사용하는 것이 더 쉽습니다. 가장 쉬운 솔루션은 HTML 코드의 데이터 속성을 사용하여 와 같은 툴팁 텍스트를 제공하는 것입니다. 이 태그를 사용하면 다음을 CSS에 넣어
• 기능에 툴팁 텍스트를 표시 할 수 있습니다. cubic-bezier() 매우 간단하고 명확합니다. 물론, 실제로 툴팁을 실제로 스타일링하기 위해서는 더 많은 코드가 필요하지만 걱정하지 마십시오.이 목적으로 Hint.css라는 훌륭한 순수한 CSS 라이브러리가 있습니다. element()

(남용) 사용자 정의 데이터 속성 및 attr () 함수

우리는 툴팁에
1. 를 사용했지만 다른 사용 사례가 있습니다. 데이터 속성을 결합하여 HTML 코드의 한 줄만 사용하여 제목 및 설명으로 축소판 이미지를 빌드 할 수 있습니다.

   이제 함수를 사용하여 제목과 설명을 표시 할 수 있습니다. 이것은 호버 디스플레이 애니메이션이있는 썸네일의 작동 예입니다. 제목 : [CodePen 예제 링크] (CodePen 링크가 여기에 삽입되어야한다고 가정) 참고 : 생성 된 컨텐츠는 접근성에 문제가있을 수 있습니다. CSS 생성 컨텐츠에 대한 접근성 지원에 대한이 기사는이 주제에 대한 유용한 해석을 제공합니다.

   data-tooltip="…" attr() CSS 카운터

   당신은 마술처럼 보이는 CSS 카운터를 사용할 수 있습니다. 그것은 가장 잘 알려진 기능이 아니며 대부분의 사람들은 그것을 잘 지원하지 않는다고 생각할 수도 있지만 실제로 모든 브라우저는 CSS 카운터를 지원합니다. [CSS-Counters를 사용할 수 있습니까?] 여기 링크) 주문 목록 ()에 CSS 카운터를 사용해서는 안되지만 카운터는 갤러리의 항목 아래에 페이지 매김 또는 숫자를 표시하는 데 적합합니다. 또한 선택한 항목의 수를 계산할 수 있습니다. 코드가 거의 필요하지 않다는 점을 고려하면 매우 인상적입니다 (및 JavaScript 없음) : [CodePen Sample Link] (CodePen 링크가 여기에 삽입되어야한다고 가정).

   CSS 카운터는 프로젝트 목록에서 동적으로 변경된 숫자에 적합하며 드래그 앤 드롭으로 재정렬 할 수 있습니다. <ol></ol> 마지막 예와 마찬가지로 생성 된 컨텐츠는 접근성에 문제가있을 수 있습니다.

   CSS 필터를 사용하여 서리로 된 유리 효과

   를 달성하십시오 iOS 7이 출시되면서 Apple은 우리에게 "Frosted Glass"효과를 제공합니다. Apple의 구현에서 영감을 얻은이 효과는 여러 곳에서 나타나기 시작했습니다. CSS 필터를 갖기 전에이 효과를 재현하는 것은 약간 까다로울 수 있습니다. 서리로 덥은 유리 효과를 만들려면 흐릿한 이미지를 사용해야합니다. 이제 거의 모든 주요 브라우저는 CSS 필터를 완전히 지원 하므로이 효과를 재현하기가 훨씬 쉽습니다. [CSS-Filters를 사용할 수 있습니까?] (여기에 링크를 삽입해야한다고 가정) 앞으로 및 기능을 사용하여 유사한 효과를 만들 수 있지만이 두 기능은 현재 Safari에서만 지원됩니다.

2. HTML 요소를 배경 이미지

   로 사용하십시오 일반적으로 JPEG 또는 PNG 파일을 배경 이미지 또는 그라디언트로 지정합니다. 그러나 함수를 사용하여 를 배경 이미지로 사용할 수도 있다는 것을 알고 있습니까? 현재 함수는 Firefox에서만 지원됩니다. [CSS- 요소 기능을 사용할 수 있습니까?] 가능성은 거의 무한합니다. 여기 MDN의 예입니다.

   calc () 로 더 똑똑한 그리드를 만듭니다 유체 메쉬는 큰 일이지만 심각한 문제가 있습니다. 예를 들어, 상단과 하단 사이의 간격을 왼쪽과 오른쪽 사이의 간격과 같은 크기로 만들 수 없습니다. 또한 사용중인 그리드 시스템에 따라 마킹이 매우 혼란 스럽습니다. Flexbox 자체조차도 최종 솔루션은 아니지만 함수 (CSS의 값으로 사용할 수 있음)를 사용하면 그리드가 더 좋아질 수 있습니다. 이 웹 사이트 의이 튜토리얼에서 George Martsoukos는 완벽한 간격이있는 갤러리 그리드와 같은 실제 예를 보여줍니다. Sass와 같은 CSS 전 처리기를 사용하면 창의적인 메쉬 시스템을 구축하는 것은 매우 간단하고 유지 관리가 쉽습니다. 브라우저 지원은 거의 완벽하기 때문에 backdrop-filter는 분명히 사용해야하는 편리한 기능입니다. [calc를 사용할 수 있습니까?] (여기에 링크를 삽입해야한다고 가정) filter()

   CSS CALC ()를 사용하여 위치를 정렬하십시오. 고정 요소
3. 기능의 또 다른 사용 사례는 요소를 고정 위치와 정렬하는 것입니다. 예를 들어, 유체 간격으로 왼쪽과 오른쪽에 컨텐츠 래퍼가 있고 해당 래퍼 내부의 고정 요소를 정확하게 정렬하려면 "오른쪽"또는 "왼쪽"속성 선택을 결정하는 데 어려움을 겪게됩니다. ? 를 사용하면 상대 및 절대 값을 결합하여 요소를 완벽하게 정렬 할 수 있습니다.

   이것은 예입니다. [CodePen 예제 링크] (CodePen 링크를 여기에 삽입해야한다고 가정) calc() calc()

   입방-베 지어 () 로 애니메이션 웹 사이트 또는 응용 프로그램의 UI를 더 매력적으로 만들려면 애니메이션을 사용할 수 있지만 표준 완화 옵션은 매우 제한적입니다. 예를 들어, "선형"또는 "편안한 인 아웃"입니다. 표준 옵션에서도 튀는 애니메이션과 같은 것은 불가능합니다. 기능을 사용하면 원하는대로 요소를 정확하게 애니메이션 할 수 있습니다.

   .tooltip::after {
     content: attr(data-tooltip);
   }

   를 사용하는 두 가지 방법이 있습니다.

   솔직히, 나는 후자를 선택할 것이다.

4. 결론

   CSS 기능의 숙련 된 사용은 알려진 문제를 해결할뿐만 아니라 (예 : 더 똑똑한 그리드 시스템 구축) 창의적인 자유를 제공합니다. 브라우저 지원이 향상되면 CSS를주의 깊게보고 와 같은 기능을 사용하여 개선해야합니다.

   CSS 기능에 대한 자주 질문

   cubic-bezier() 초보자로서 어떤 기본 CSS 기능을 이해해야합니까?

   CSS 함수는 CSS 속성의 값을 설정하는 데 사용됩니다. 모든 초보자가 알아야 할 일부 기본 기능에는 ,

   , , cubic-bezier(), cubic-bezier 및 가 포함됩니다. 함수는 색상을 정의하는 데 사용되는 반면 및

   함수는 색조, 채도 및 밝기를 기반으로 색상을 정의하는 데 사용됩니다. 함수를 사용하면 계산을 수행하여 CSS 속성 값을 결정할 수 있습니다.

   CSS에서 calc () 함수를 사용하는 방법은 무엇입니까?
CSS에서 의 함수는 속성 값으로 사용할 수있는 계산을 수행하는 데 사용됩니다. 이 기능은 ""(첨가), "-"(subtraction), "*"(배수) 및 "/"(Division) 수학 연산자를 사용할 수 있습니다. 예를 들어,

를 사용하여 아래 그림과 같이 뷰포트 너비를 위해 항상 20 픽셀을 뺀 div를 만들 수 있습니다. CSS의 RGB ()와 RGBA () 함수의 차이점은 무엇입니까? css의 와 함수의 주요 차이점은

가 색상의 불투명도를 지정하는 알파 채널을 포함한다는 것입니다. 알파 매개 변수는 0.0 (완전히 투명)과 1.0 (완전히 불투명) 사이의 숫자입니다. 예를 들어, 반투명 빨간색을 설정하려면 다음을 사용할 수 있습니다.

CSS 기능을 사용하여 그라디언트를 만드는 방법은 무엇입니까?

CSS 함수를 사용하여 및 함수를 사용하여 그라디언트를 생성 할 수 있습니다. 예를 들어, 빨간색에서 파란색으로 선형 구배를 만들려면 다음을 사용할 수 있습니다. 마찬가지로, 중심 빨간색에서 파란색 가장자리까지 방사형 구배를 만들려면 다음을 사용할 수 있습니다.

CSS 함수를 사용하여 요소를 변환 할 수 있습니까? linear-gradient() 예, CSS 기능을 사용하여 요소를 변환 할 수 있습니다. 속성은 , , radial-gradient() 및 와 같은 다양한 함수와 함께 요소의 모양을 수정할 수 있습니다. 예를 들어, 요소를 45도 회전하려면 다음을 사용할 수 있습니다. background: linear-gradient(red, blue); CSS에서 attr () 함수의 목적은 무엇입니까? background: radial-gradient(red, blue); CSS에서 의

함수는 선택한 요소의 속성 값을 반환하는 데 사용됩니다. 이것은 컨텐츠를 생성하는 데 유용합니다. 예를 들어,

를 사용하여 툴팁에 링크의 "href"속성의 값을 표시 할 수 있습니다.

CSS에서 var () 함수를 사용하는 방법은 무엇입니까?

transform CSS의 함수는 사용자 정의 속성 ( "CSS 변수"라고도 함)의 값을 삽입하는 데 사용됩니다. 예를 들어, 사용자 정의 속성을 정의한 다음 다음과 같이 CSS에서 사용할 수 있습니다. rotate() CSS 기능을 사용하여 애니메이션을 만들 수 있습니까? scale() 예, CSS 기능을 사용하여 애니메이션을 만드는 데 사용할 수 있습니다. CSS의 속성은 , skew(), 등을 포함한 8 가지 속성에 대해 약자 속성입니다. 예를 들어, "SlideIn"이라는 2 초 애니메이션을 만들려면 다음을 사용할 수 있습니다. translate() CSS에서 transform: rotate(45deg); CSS의 에서의 함수는 파일을 포함하는 데 사용됩니다. 기능의 가장 일반적인 사용은 외부 스타일 시트에 연결하거나 이미지를 포함시키는 것입니다. 예를 들어, 요소의 배경 이미지를 설정하려면 다음을 사용할 수 있습니다.

CSS 함수를 사용하여 3D 변환을 만들 수 있습니까?

예, CSS 함수는 3D 변환을 생성하는 데 사용될 수 있습니다. CSS의

속성은 3D 변환을 생성하기 위해 , attr(), attr(), a:after { content: attr(href); } 및 와 같은 함수와 함께 사용할 수 있습니다. 예를 들어, x 축 주위에서 요소를 회전 시키려면 다음을 사용할 수 있습니다.

나는 원본 텍스트를 유사하게 원래의 형식과 이미지의 위치를 ​​보존하기 위해 최선을 다했습니다. Codepen에 액세스 할 수없고 웹 사이트를 사용할 수 있으므로 관련 링크를 자리 표시 자로 대체했습니다. 올바른 링크를 찾아서 직접 삽입하십시오.

위 내용은 CSS 기능이있는 8 가지 영리한 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!