일반적으로 사용되는 CSS 기술 20가지

1. 흑백 이미지

이 코드를 사용하면 컬러 사진이 흑백 사진처럼 나오죠?

img.desaturate {
필터: 회색조(100%);
-webkit-filter: 회색조(100%);
-moz-filter: 회색조(100%);
-ms-filter: 회색조(100%);
-o-filter: 회색조(100%);
}

2. 사용: not() 메뉴에 테두리 적용/적용 취소

먼저 각 메뉴 항목에 테두리 추가

/* 테두리 추가 */
.nav li {
border-right : 1px 솔리드 #666;
}

...그런 다음 마지막 요소를 제거합니다...

// 테두리 제거 /

.nav li: last-child {
border-right: none;
}

... :not() 의사 클래스를 직접 사용하여 요소를 적용할 수 있습니다:

.nav li :not(:last-child) {
border-right: 1px solid #666;
}

이렇게 하면 코드가 깔끔하고 읽기 쉬우며 이해하기 쉽다.

물론 새 요소에 형제 요소가 있는 경우 범용 형제 선택기(~)를 사용할 수도 있습니다.

..nav li:first-child ~ li {

border-left: 1px solid #666;
}

3. 페이지 상단 그림자

다음의 간단한 CSS3 코드 스니펫은 웹 페이지에 아름다운 상단 그림자 효과 추가:

body:before {
content: "";
position:fixed;
top: -10px;
left: 0 ;
너비: 100%;
높이: 10px;

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz- 상자 -그림자: 0px 0px 10px rgba(0,0,0,.8);
          상자 그림자: 0px 0px 10px rgba(0,0,0,.8) 100;
}

4. 본문에 line-height 추가

각 p, h 태그 등에 line-height를 추가할 필요는 없습니다. body:

body {

line-height: 1;

}


이렇게 하면 텍스트 요소가 body에서 쉽게 상속될 수 있습니다.

5. 모든 것을 세로로 가운데에 배치

모든 것을 세로로 가운데에 맞추는 방법은 매우 쉽습니다.

html, body {

height : 100%;

여백: 0;
}

body {
-webkit-align-items: center;
-ms-flex-align:
align-items: center;
디스플레이: -webkit-flex;
디스플레이: flex;
}


보세요, 아주 간단하죠?

참고: IE11에서는 Flexbox를 사용할 때 주의하세요.

6. 쉼표로 구분된 목록

html 목록 항목을 실제 쉼표로 구분된 목록처럼 보이게 만듭니다.

ul > li :not (:last-child)::after {

content: ",";

}


마지막 목록 항목에는 :not() 의사 클래스를 사용하세요.

7. 항목을 선택하려면 음수 nth-child를 사용하세요.

CSS에서 항목 1부터 항목 n까지 선택하려면 음수 nth-child를 사용하세요.

li {

display: none;

}

/* 항목 1~3을 선택하여 표시 */
li:nth-child(-n+3 ) {
디스플레이: 블록;
}

8. 아이콘에 SVG를 사용하세요

아이콘에 SVG를 사용하지 않을 이유가 없습니다. :

.logo {

background: url("logo.svg");

}


SVG는 모든 해상도 유형에 대한 확장성이 뛰어나며 모든 브라우저에서 지원됩니다. IE9로 돌아왔습니다. 이렇게 하면 .png, .jpg 또는 .gif 파일을 피할 수 있습니다.

9. 표시 텍스트 최적화

경우에 따라 글꼴이 모든 기기에서 최적으로 표시되지 않으므로 기기 브라우저의 도움을 받으세요.

html {

-moz-osx-font-smoothing: 회색조;

-webkit-font-smoothing: 앤티앨리어싱;
텍스트 렌더링:optimLegibility;
}


참고 : OptimizeLegibility를 책임감 있게 사용하시기 바랍니다. 또한 IE/Edge는 텍스트 렌더링을 지원하지 않습니다.

10. 순수 CSS 슬라이더에 최대 높이 사용

최대 높이 및 오버플로 숨기기를 사용하여 CSS 전용 슬라이더 구현:

슬라이더 ul {

최대 높이: 0;

overlow: 숨겨진;
}

.slider:hover ul {
최대 높이: 1000px;
전환: . 3s 용이성;
}

11. 상자 크기 상속

상자 크기 상속 html:

html {

상자 크기: 테두리 상자;

}

*, *:전, *:후 {
상자 크기: 상속;
}


이를 통해 플러그인이나 다른 동작을 활용하는 기타 구성 요소에서 상자 크기를 더 쉽게 변경할 수 있습니다.

12. 테이블 셀의 너비가 동일합니다

테이블은 작업하기가 매우 번거로우므로 테이블 레이아웃을 사용하세요. 최대한 고정하여 유지하세요. 너비가 같은 셀:

.calendar {

table-layout:fixed;

}

13. Flexbox를 사용하여 다양한 항목을 제거합니다. 여백 해킹

열 구분 기호를 사용해야 하는 경우 Flexbox의 space-between 속성을 통해 n번째, 첫 번째, 마지막 자식 해킹을 제거할 수 있습니다:

.list {
표시 : flex;
justify-content: space-between;
}

.list .person {
flex-basis: 23%;
}

이제 목록 구분 기호가 균등한 간격으로 표시됩니다.

14. 빈 링크에 속성 선택기 사용

a 요소에 텍스트 값이 없지만 href 속성에 링크가 있는 경우 링크 표시:

a[href^="http"]:empty::before {
content: attr(href);
}

는 매우 편리합니다.

15. 마우스 더블클릭 감지

HTML:

저를 더블클릭하세요

CSS:

.test3span {
position:relative;
}
. test3 스팬 a {
위치: 상대;
z-인덱스: 2;
}
.test3 스팬 a:hover, .test3 스팬 a:active {
z-인덱스: 4 ;
}
.test3 범위 입력 {
배경: 투명;
테두리: 0;
커서: 포인터;
위치: 절대;
상단: -1px;
왼쪽: 0;
너비: 101%; /* Hacky */
높이: 301% /* Hacky */
z-index: 3;
}
.test3 범위 입력:초점 {
배경: 투명;
테두리: 0;
z-색인: 1;
}

CSS 작성 삼각형

테두리를 사용하여 삼각형 코드를 작성하고 IE6과 호환됩니다.

/* 위쪽을 가리키는 화살표 만들기 */
div.arrow-up {
width: 0px ;
height:0px;
border-left:5px solid transparent; /* 왼쪽 화살표 기울기 */
border-right:5px solid transparent; /* 오른쪽 화살표 기울기 */
border- Bottom :5px solid #2f2f2f; /* 하단, 여기에 배경색 추가 */
font-size:0px;
line-height:0px;
}

/* 화살표 만들기 아래쪽을 가리킴 */
div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}

/* 왼쪽을 가리키는 화살표 생성 */
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* 왼쪽 화살표 경사 */
border-top:5px solid transparent ; /* 오른쪽 화살표 경사 */
border-right:5px solid #2f2f2f /* 하단, 여기에 배경색 추가 */
글꼴 크기:0px;
line-height:0px;
}

/* 오른쪽을 가리키는 화살표 만들기 */
div.arrow-right {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* 왼쪽 화살표 경사 */
border-top:5px solid transparent; /* 오른쪽 화살표 경사 */
border-left:5px solid #2f2f2f /* 하단, 여기에 배경색 추가 */
글꼴 크기:0px;
줄 높이:0px;
}

17. CSS3 calc() 사용

calc()의 사용법은 요소에 대한 동적 값을 설정할 수 있는 함수와 유사합니다:

/* basic calc */
.simpleBlock {
width: calc( 100% - 100px);
}

/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}

18. 텍스트 그라데이션 효과는 CSS3를 사용하여 쉽게 구현할 수 있습니다.

h2[data-text] {

position:relative;

}
h2[data- text]::after {
내용: attr(data-text);
z-index: 10;
색상: #e3e3e3;
위치: 절대;
상단: 0;
왼쪽: 0;
-webkit -mask-image: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(rgba(0,0,0,0)), 색상 정지(50%, rgba(0,0,0,1)) , to(rgba(0,0,0,0)));}

19. 마우스 이벤트 비활성화

CSS3 새로운 포인터 이벤트 요소에 대한 마우스 이벤트를 비활성화할 수 있습니다. 예를 들어 다음 스타일이 설정된 경우 링크를 클릭할 수 없습니다.

.disabled { 포인터 이벤트: 없음 }

20. 텍스트 흐림

간단하지만 아름다운 텍스트 흐림 효과 아름다운!

.blur {

색상: 투명; 텍스트 그림자: 0 0 5px rgba(0,0,0,0.5);

}