본문으로 건너뛰기
黯羽轻扬매일 조금씩

《The Book of CSS3》학습 노트

무료2015-04-27#CSS#css3

본고에서는 CSS3 의 미디어 쿼리, 텍스트 효과, 그라데이션, 변환, 전환, 애니메이션, flex 레이아웃 등을 간단히 소개하며, 튜토리얼 및 온라인 리소스를 정리합니다

일. 브라우저 접두사

E{
    -moz-name : value;      /* Firefox */
    -ms-name : value;       /* IE */
    -o-name : value;        /* Opera */
    -webkit-name : value;   /* WebKit */
    name : value;           /* 미래 표준 대응 방식 */
}

이. 미디어 쿼리

1. 미디어 쿼리 사용 3 가지 방법

  1. head 부분

    <link href="css.css" rel="stylesheet" media="mediaType and (expr)" />

  2. css 파일 첫 행

    @import url("css.css") mediaType and (expr);

  3. 스타일 규칙 내부

    @media mediaType and (expr) {
    /* styles */
}

2. mediaType 의 값

all (의미 없음, 추가하지 않는 것이 좋음), screen, print 만이 브라우저 벤더에 의해 널리 지원됩니다. 옵션 값으로는 다음도 있습니다:

  • braille：점자

  • embossed：점자 인쇄

  • handheld：휴대용 디바이스, 좋지 않음

  • projection：프로젝션 디바이스

  • speech：음성

  • tty：등폭 폰트를 표시하는 디바이스, 예를 들어 전신타자기

  • tv：텔레비전

따라서 앞서 언급한 널리 지원되는 3 가지를 포함하여 총 10 개의 옵션 값이 있습니다

3. expr 의 값

가장 일반적인 것은 min-[device-]width 와 max-[device-]width 입니다. 예를 들어:

@media screen and (min-width : 800px) {
    /* 브라우저 창 너비>=800px 일 때 이 스타일 적용 */
}
/* 
 * 일반적인 경계값:
 * 480px 이하 ~ 스마트폰 브라우저
 * 800px 이상 ~ 데스크톱 브라우저
 * 480px 에서 800px ~ 태블릿 브라우저
 */

또한 orientation 방향, device-aspect-radio 가로세로 비율, device-pixel-radio 픽셀 비율 등 다른 속성도 있습니다. 더 많은 정보는 前端觀察：media type 과 media query 를 참조하십시오

4. 복잡한 식 구성

and 와 only 를 사용하여 복잡한 식을 구성할 수 있습니다

  • (expr1) and (expr2) : AND

  • only (expr) : 미디어 쿼리를 지원하지 않지만 Media Type 을 지원하는 디바이스에 스타일시트를 숨기기 위해. 더 많은 정보는 博客園：Media Queries 상세 설명 를 참조하십시오

  • mediaType1 (), mediaType2 () : OR

5. 지원 여부

[IE9+] 는 CSS3 표준을 지원하지만, device-pixel-ratio 와 같은 비표준 속성의 경우 IE11 은 부분적으로만 지원합니다. 더 많은 지원 차이는 Can I use 를 참조하십시오

삼. 웹 폰트 사용

가장 안전한 폰트 도입 방법:

@font-face {
    font-family : "font";
    src : url("font.eot");
    src : local(" "),   /* 주의: 따옴표로 공백을 감쌈 (다른 단일 문자도 가능) */
          url("font.woff") format("woff"),
          url("font.ttf") format("truetype"),
          url("font.svg#font") format("svg");
}

유사한 방법도 있습니다. 자세한 내용은 Fontspring 를 참조하십시오

편리한 @font-face 생성기 가 있어 폰트 형식을 변환하고 CSS 코드를 생성할 수 있습니다. 자세한 내용은 Fontsquirrel 를 참조하십시오

사. 텍스트 효과

1. 입체 효과

주로 text-shadow 속성으로 구현합니다. [IE10+] 에서 지원하며, 문법은 다음과 같습니다:

text-shadow : xOffset yOffset blur-radius color;

구체적인 코드:

.shadow1 {
    text-shadow : 
        0 -2px 3px #fff,
        0 -4px 3px #aaa,
        0 -6px 6px #666,
        0 -8px 9px #000;
}

.shadow2 {
    color : #fff;
    text-shadow : 
        0 2px rgba(0, 0, 0, 0.4),
        0 4px rgba(0, 0, 0, 0.4),
        0 6px rgba(0, 0, 0, 0.4),
        0 8px 0 rgba(0, 0, 0, 0.4);
}

.shadow3 {
    background-color : #565656;
    color : #333;
    text-shadow : 0 1px 0 #777, 0 -1px 0 #000;
}

예시:

span.shadow1 { text-shadow : 0 -2px 3px #fff, 0 -4px 3px #aaa, 0 -6px 6px #666, 0 -8px 9px #000; } span.shadow2 { color : #fff; text-shadow : 0 2px rgba(0, 0, 0, 0.4), 0 4px rgba(0, 0, 0, 0.4), 0 6px rgba(0, 0, 0, 0.4), 0 8px 0 rgba(0, 0, 0, 0.4); } span.shadow3 { background-color : #565656; color : #333; text-shadow : 0 1px 0 #777, 0 -1px 0 #000; } .show { background-color : #fafafa; display : block; font-weight : bold; font-size : 60px; padding : 0.2em; }

shadow1: 黯羽輕揚 shadow2: 黯羽輕揚 shadow3: 黯羽輕揚

P.S. 매우 큰 글꼴은 입체 효과가 좋으며, 작은 글자 그림자 효과는 잘 보이지 않습니다

2. 텍스트 넘침 제어

text-overflow : clip/ellipsis ~ 잘라내기/생략 부호 (...), 예를 들어:

p {
    /* 한 줄에 생략 부호를 표시하려면 아래 3 개 속성이 모두 필요합니다 */
    text-overflow : ellipsis;
    white-space : nowrap;
    overflow : hidden;
}

지원 여부: [IE8+] 에서 지원

3. 긴 단어 자동 줄바꿈 제어

word-wrap : normal/break-word ~ 줄바꿈 안 함 (컨테이너를 파괴함)/자동 줄바꿈

지원 여부: [IE6+] 에서 지원합니다. 단, 영어 단어에만 유효하고 중국어에는 무효입니다

오. 테두리 스타일

  1. border-radius: [IE9+] 에서 지원

  2. border-image: 효과가 매력적이지만, [IE11+] 에서 지원합니다. JQ 플러그인으로 억지로 지원할 수 있지만 효과도 억지스럽습니다. 더 많은 정보는 [張鑫旭 블로그：CSS3 border-image 상세 설명, 응용 및 jQuery 플러그인](http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image 詳解、응용 및 jquery 플러그인/) 을 참조하십시오

  3. box-shadow: [IE9+] 에서 지원합니다. 구체적인 사용법은 W3School: CSS3 box-shadow 속성 을 참조하십시오

육. 투명도

  1. opacity : 0.0 - 1.0; [IE9+] 에서 지원, IE8 은 부분 지원

  2. color : rgba(r, g, b, a); [IE9+] 에서 지원

칠. 그라데이션

선형 그라데이션/방사형 그라데이션, [IE10+] 에서 지원합니다. 구체적인 사용법은 CSS-Tricks 를 참조하십시오

팔. 변환, 전환, 애니메이션

몇 가지 유사한 속성이 있습니다. 차이점은 다음과 같습니다:

  • transform: 변환. 2D/3D 변환, 평행 이동, 회전, 기울이기, 확대/축소

  • translate: 평행 이동. 2D 변환의 하위 속성

  • transition: 전환. hover, active 등의 이벤트에 의해 트리거됨

  • animation: 애니메이션. keyframes 를 정의한 후 animation 으로 애니메이션 적용

이러한 것들을 사용하여 일반적인 멋진 효과를 구현할 수 있습니다. 예를 들어:

  1. 전환을 사용하면 간단한 애니메이션을 부드럽게 수행할 수 있습니다. 예를 들어 마우스 호버 시 링크 텍스트가 오른쪽으로 "흘러가는", div 너비가 서서히 지정된 값으로 증가하는 등

  2. 3D 변환으로 뒷면을 표시할 수 있습니다. 예를 들어 마우스 진입 시 이미지 뒤집기 효과 표시

  3. 변환으로 리본 효과를 구현할 수 있습니다. 예를 들어 오른쪽 상단에 대각선으로 fork me on github 배치. 구체적인 구현은 博客園: 블로그에 "Fork me on Github"리본 추가 를 참조하십시오

구. flex 레이아웃

매우 강력한 완전한 튜토리얼이 있습니다: 前端開發博客：CSS3 탄성 박스 모델 flexbox 완전 튜토리얼

십. 온라인 리소스

  • Can I Use: [IE8+] 및 기타 브라우저의 CSS/HTML5 속성 지원 여부

  • Modernizr: 브라우저의 HTML5 와 CSS3 기능 지원을 감지하는 JS 라이브러리. 우아한 다운그레이드에 최적

  • 코드 생성 도구:

  • 무료 폰트: Fontsquirrel: 무료로 다운로드 가능한 대량의 영문 폰트

  • CSS3 튜토리얼/문서: CSS3 Info, 해외 포럼, 기사 업데이트가 느리고, 쇠퇴하고 있는 것 같습니다

  • CSS3 신기술: MDN, 소스 코드 로그인 없이 다운로드 가능

참고 자료

  • 《THE BOOK OF CSS3》

  • 선배 블로그 게시물若干

댓글

아직 댓글이 없습니다

댓글 작성