가장 많이 사용되는 CSS 트릭

저작권 표시: 이 기사의 저작권은 원저자에게 있습니다. 번역은 국내 독자의 참고용입니다

. 기사 요약: 둥근 모서리, 드롭 캡 등 가장 일반적으로 사용되는 CSS 트릭입니다.

8가지 매우 유용한 한 문장 CSS 트릭을 소개한 "8 한 문장 CSS 트릭"의 이전 번역이 있었습니다. 이번 주에는 가장 일반적으로 사용되는 CSS 트릭 중 일부를 소개하는 비슷한 기사를 가져올 것입니다. CSS 트릭. 물론, 나는 모든 디자이너가 개인적으로 선호하는 것이 있을 것이라고 믿습니다. 나는 개인적으로 이 기사에 나오는 몇 가지 요령을 별로 좋아하지 않습니다.

1. 이미지의 둥근 모서리 효과를 사용하지 마세요.

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{디스플레이: 블록 높이: 1px: 숨김}
.r1{여백: 0 5px}
.r2{여백: 0 3px}
.r3{여백: 0 2px}
.r4{margin: 0 1px; height: 2px}

(많은 사람들이 이 반올림 기법을 선호하지만 저는 개인적으로 별로 좋아하지 않습니다. 모서리가 둥근 사진을 만들 필요는 없지만 이러한 추가 태그는 항상 불필요한 느낌)

2. 스타일 목록

<리>


첫 번째 줄입니다



<리>


두번째 줄입니다



<리>


그리고 마지막 줄

올 {
글꼴: 기울임꼴 1em Georgia, Times, serif;
색상: #999999;
}

올 피 {
글꼴: 일반 .8em Arial, Helvetica, sans-serif;
색상: #000000;
}

일련번호에 다양한 글꼴을 적용할 수도 있는 효과도 매우 마음에 듭니다.

3. 표 없는 형식

4. 큰따옴표 기법

5. 그라데이션 단어 효과

6. 세로 가운데 정렬

자세한 내용은 원문 참조

10. 드롭 캡

이 단락에는 "introduction" 클래스가 있습니다. 귀하의 브라우저는 의사 클래스 "첫 글자"를 지원하며, 첫 글자는 첫 글자가 첫 글자입니다.

p.introduction:first-letter {
글꼴 크기: 300%;
글꼴 두께: 굵게;
플로트: 왼쪽;
너비: 1em;
}