20가지 고급 CSS 팁 모음

小云云원래의: 2017-12-05 13:29:161906검색

개발 과정에서 고급 CSS 기술을 사용하는 방법을 배우는 것도 개발에 매우 도움이 됩니다. 이 글에서는 20가지 고급 CSS 기술을 여러분과 공유하겠습니다.

1. 흑백 이미지

이 코드를 사용하면 컬러 사진이 흑백 사진처럼 보입니다. 멋지지 않나요?

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

使용 2. 메뉴에 프레임 테두리 적용/취소

먼저 각 메뉴 항목에 테두리를 추가하세요. 깔끔하고 읽기 쉽습니다. 물론, 새 요소에 형제 요소가 있는 경우 범용 형제 선택기(~)를 사용할 수도 있습니다.

/* add border */
.nav li {
  border-right: 1px solid #666;
}
……然后再除去最后一个元素……
// remove border /
.nav li:last-child {
  border-right: none;
}
……可以直接使用 :not() 伪类来应用元素：
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

3페이지 상단 그림자

이 간단한 것입니다. 아래 CSS3 코드 조각은 웹 페이지에 아름다운 위쪽 그림자 효과를 추가할 수 있습니다.

.nav li:first-child ~ li {
  border-left: 1px solid #666;
}

4. 본문에 줄 높이 추가

각 p,h는 별도로 태그 등입니다. 본문에 추가하기:

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}

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

5. 모든 요소를 수직으로 중앙에 배치

모든 요소를 수직으로 중앙에 배치하는 방법은 매우 쉽습니다.

body {
  line-height: 1;
}

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

6. 쉼표로 구분된 목록

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

html, body {
  height: 100%;
  margin: 0;
}
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

마지막 목록 항목에 :not()을 사용하세요.

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

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

ul > li:not(:last-child)::after {
  content: ",";
}

E 对8. 아이콘에 SVG를 사용하세요. SVG를 사용할 이유가 없습니다.

li {
  display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

svg는 모든 해상도 유형 호환성을 지원합니다. 모든 브라우저가 IE9로 돌아갑니다. 이렇게 하면 .png, .jpg 또는 .gif 파일을 피할 수 있습니다.

9. 표시 텍스트 최적화

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

.logo {
  background: url("logo.svg");
}

주의: 최적화 가독성을 책임감 있게 사용하세요. 또한 IE/Edge는 텍스트 렌더링을 지원하지 않습니다.

10. 순수 CSS 슬라이더에는 최대 높이를 사용하세요.

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

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

11. 상자 크기 조정이 html을 상속받도록 합니다.

.slider ul {
  max-height: 0;
  overlow: hidden;
}
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}

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

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

테이블 작업이 번거로우므로 반드시 table-layout을 사용하세요: 셀의 너비가 동일하도록 고정:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

13 Flexbox를 사용하여 다양한 여백 해킹 제거

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

.calendar {
  table-layout: fixed;
}

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

14. 빈 링크에 속성 선택기를 사용하세요.

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

.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%;
}

은 매우 편리합니다.

15. 마우스 더블 클릭 감지

HTML:

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

CSS:

<p class="test3">
  <span><input type="text" value=" " readonly="true" />
  <a href="http://renpingjun.com">Double click me</a></span>
</p>

16. CSS 작성 삼각형

.test3 span {
  position: relative;
}
.test3 span a {
  position: relative;
  z-index: 2;
}
.test3 span a:hover, .test3 span a:active {
  z-index: 4;
}
.test3 span input {
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: -1px;
  left: 0;
  width: 101%;  /* Hacky */
  height: 301%; /* Hacky */
  z-index: 3;
}
.test3 span input:focus {
  background: transparent;
  border: 0;
  z-index: 1;
}

317. CSS3 CALC() 사용법

Calc()는 요소의 값을 설정할 수 있는 함수와 유사합니다:

/* create an arrow that points up */
p.arrow-up {
  width:0px;
  height:0px;
  border-left:5px solid transparent;  /* left arrow slant */
  border-right:5px solid transparent; /* right arrow slant */
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
/* create an arrow that points down */
p.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;
}
/* create an arrow that points left */
p.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
/* create an arrow that points right */
p.arrow-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

18 텍스트 그라데이션

The 텍스트 그라데이션 효과는 매우 인기가 높으며 CSS3을 사용하여 쉽게 얻을 수 있습니다:

/* 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);
}

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

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

以上内容就是20 个 CSS 高级技巧汇总，希望能帮助到大家。

20가지 고급 CSS 팁 모음

관련 기사