집 >웹 프론트엔드 >CSS 튜토리얼 >순수 CSS로 만든 작은 함수의 몇 가지 예

순수 CSS로 만든 작은 함수의 몇 가지 예

小云云원래의: 2017-11-21 10:58:052510검색

CSS는 HTML 마크업 언어에 대한 스타일 설명을 제공하여 해당 요소가 표시되는 방식을 정의합니다. CSS는 웹 디자인 분야의 획기적인 발전입니다. 작은 스타일을 수정하여 이와 관련된 모든 페이지 요소를 업데이트하는 데 사용할 수 있습니다. 요즘에는 CSS를 기반으로 CSS3가 새로 출시되었습니다. CSS는 프런트엔드 작업에서 여전히 매우 중요합니다. 아래에서는 CSS로 만든 작은 기능의 몇 가지 예를 공유하겠습니다.

CSS@supports

모든 훌륭한 프런트 엔드 개발자는 일부 브라우저에 없는 기능을 사용할 때 기능 테스트를 수행해야 합니다. 기능 테스트는 항상 JavaScript로 수행되어 왔으며 많은 사람들이 잘 테스트된 많은 사례로 구성된 탁월한 유틸리티인 Modernizr을 사용하여 기능 테스트를 수행합니다. 그러나 새로운 API인 @supports가 개발자를 위해 등장했습니다. 이를 통해 CSS로 기능 테스트를 수행할 수 있습니다. 다음은 @supports 작동 방식에 대한 몇 가지 간단한 예입니다.

코드는 다음과 같습니다.

/* basic usage */@supports(prop:value) {/* more styles */}
/* real usage */@supports (display: flex) {p { display: flex; }}
/* testing prefixes too */@supports (display: -webkit-flex) or(display: -moz-flex) or(display: flex) 
{section {display: -webkit-flex;display: -moz-flex;display: flex;float: none;}}

이 새로운 @supports 기능에도 해당하는 JavaScript 버전이 있지만 곧 만료되기를 기대합니다!

CSS 필터

이미지의 색상 톤을 변경하는 서비스를 작성하면 수십억 달러에 Facebook에 판매할 수 있습니다. 물론, 당연한 일이지만 이미지 필터를 작성하는 것은 과학이 아닙니다. Mozilla에서 첫 주에 작성한 작은 프로그램(상을 받았습니다. 어, 그냥 말하는 것뿐입니다)은 캔버스를 사용하여 이미지 필터를 생성하기 위해 JS 기반 수학을 사용했지만 이제는 CSS 필터링을 사용하여 이미지를 생성할 수 있습니다.

코드는 다음과 같습니다.

/* simple filter */.myElement {-webkit-filter: blur(2px);}
/* advanced filter */.myElement {-webkit-filter: blur(2px) 
grayscale (.5) opacity(0.8) hue-rotate(120deg);}

이 유형의 필터는 이미지의 원래 모양만 변경합니다. 해당 필터는 이미지를 저장하거나 내보낼 때 사용되지 않지만 사진을 아름답게 해야 하거나 처리해야 할 때 매우 유용합니다. 사용하기 쉽습니다.

Pointr 이벤트 및 브리킹 클릭

CSS의 Pointr 이벤트 속성은 요소를 효과적으로 비활성화하는 방법을 제공합니다. 따라서 JavaScript를 통해 링크를 클릭해도 클릭 이벤트가 발생하지 않습니다.

코드는 다음과 같습니다.

/* do nothing when clicked or activated */.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {alert("Clicked!");});

위 예에서는 CSS 포인터 이벤트 값으로 인해 클릭 이벤트가 실행되지 않습니다. 나는 이것이 큰 도움이 된다는 것을 알았습니다. 일부 요소가 비활성화되었는지 확인하기 위해 모든 곳에서 className이나 속성을 확인할 필요가 없습니다.

메뉴 접기 및 확장

CSS를 사용하면 전환 효과와 애니메이션을 만들 수 있지만 일부 항목을 수정하고 애니메이션을 제어하는 데 도움이 되는 JavaScript 라이브러리가 필요한 경우가 많습니다. 매우 인기 있는 애니메이션은 접기 및 확장 메뉴 효과입니다. CSS만 사용하면 이 효과를 얻을 수 있다는 사실을 많은 사람들이 모릅니다.

코드는 다음과 같습니다:

/* slider in open state */.slider {overflow-y: hidden;max-height: 500px; /* approximate max height */
transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
/* close it with the "closed" class */.slider.closed {max-height: 0;}

최대 높이를 영리하게 사용하면 원하는 효과에 따라 요소를 축소하거나 확장할 수 있습니다.

CSS 카운터

"카운터"라는 용어는 종종 웹에서의 의미에 대해 낄낄거리게 만들지만, CSS 카운터는 우리를 더욱 낄낄거리게 만드는 또 다른 것입니다. CSS 카운터를 사용하면 개발자는 :before 및 :after를 사용하여 지정된 요소에 대한 카운터를 증가시킬 수 있습니다.

코드는 다음과 같습니다.

/* initialize the counter */ol.slides {counter-reset: slideNum;}
/* increment the counter */ol.slides > li {counter-increment: slideNum;}
/* display the counter value */ol.slides li:after {content: "[" counter(slideNum) "]";}

슬라이드 효과에 사용되는 CSS 카운터 및 양식 콘텐츠와 같은 목록을 자주 볼 수 있습니다.

유니코드 CSS 스타일 이름

많은 CSS 모범 사례 문서가 있으며, 모두 CSS 스타일 이름을 지정하는 방법부터 시작됩니다. 유니코드 기호를 사용하여 스타일 이름을 지정하라는 문서는 절대 볼 수 없습니다.

코드는 다음과 같습니다.

.ಠ_ಠ {border: 1px solid #f00;background: pink;}
.❤ {background: lightgreen;border: 1px solid green;}

이 기호를 사용하지 마세요. 당신이 할 수 없다면!

CSS Circle

CSS 삼각형은 기술적인 작업이며 CSS 서클에서도 마찬가지입니다. CSS border-radius를 남용하면 완벽한 원을 만들 수 있습니다!

코드는 다음과 같습니다:

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they&#39;re equal */
}

원에 그라디언트를 추가할 수 있고 CSS 애니메이션을 사용하여 원을 움직일 수도 있습니다! CSS는 이러한 모양에 대해 더욱 통합된 API를 갖게 될 예정이지만 지금은 이 방법으로 원을 만들 수 있습니다.

위 내용은 순수 CSS로 만든 작은 기능의 몇 가지 예입니다. 모두에게 도움이 되기를 바랍니다.

순수 CSS로 만든 작은 함수의 몇 가지 예

관련 기사