HTML5 & CSS3 노트: CSS3로 놀라운 아름다움 만들기

응답 설계에 CS3이 유용한 이유는 다음과 같습니다.
그림 대신 CS3를 사용하면 대역폭 제한이 있는 웹 페이지에서 http 요청을 효과적으로 줄일 수 있고 웹 페이지를 더욱 빨리 불러올 수 있으며, 웹 페이지를 더욱 유연하고 쉽게 유지보수할 수 있다.
이러한 장점은 전통적인 고정폭 데스크톱 웹 페이지에서도 유용하지만 응답식 디자인에서 더욱 중요하기 때문에 웹 페이지가 서로 다른 뷰포트에 서로 다른 사이즈의 모듈이나 문자 음영을 표시할 수 있고 이를 위해 단독으로 그림을 제작하고 내보낼 필요가 없다.
텍스트 그림자
텍스트 그림자의 기본 구문:

.element {
    text-shadow: 1px 1px 1px #cccccc;
}

음영치의 속기 규칙은 항상 오른쪽에서 아래로 내려간다는 것을 명심해라.따라서 첫 번째 값은 오른쪽 그림자의 크기, 두 번째 값은 아래 그림자의 크기, 세 번째 값은 희미한 거리(즉 그림자가 처음부터 완전히 사라지는 거리), 마지막 값은 그림자 색깔을 가리킨다.
HEX, HSL 또는 RGB 색상 모두 가능

text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
               HSL/RGB     text-shadow        。

px,em 또는rem 모두 가능

text-shadow: .039215686em .039215686em 0em #dad7d7; /* 4 ÷ 102 */

사실 음영 크기의 단위로 em이나rem를 적게 사용한다. 음영은 일반적으로 비교적 작기 때문에 한 픽셀이나 두 픽셀의 음영은 모든 뷰포트에서 효과가 좋다.
텍스트 그림자 취소하기

text-shadow: none;

왼쪽 위 그림자
음수 값을 사용하여 왼쪽 위 그림자 효과를 만들 수 있습니다.

text-shadow: -4px -4px 0px #dad7d7;

부조 문자 그림자 만들기
text-shadow는 부조 문자를 만드는 데 적합하다.이런 효과는 일반적으로 흰색이 아닌 배경의 짙은 색 문자에 가장 적합하고 밝은 색(예를 들어 순수한 흰색이나 유사한 색)의 음영을 조합하는 데 적합하다.

nav ul li a {
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);
}

가장 좋은 부조 문자 효과 원하기: 흐리지 말고 수평 음영 말고 수직 방향에서 1 또는 2 픽셀의 '흰 그림자' 만 설정하면 됩니다.
다중 텍스트 그림자
또한 두 값을 쉼표로 구분하여 여러 문자 섀도우를 만들 수도 있습니다. 예를 들어,

text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;

이전의 정교한 부조 효과는 반드시 없어서는 안 된다. 그렇지 않으면 문자가 흐려질 것이다.그래서 이 성명은 기존의 투영 효과와 이전 부분의 부조 효과를 합쳤다.
상자 그림자
상자 섀도우의 구문은 수평 오프셋 거리, 수직 오프셋 거리, 흐림 반지름 및 섀도우 색상과 동일합니다.

box-shadow: 0px 3px 5px #444444;

그러나 박스 그림자의 크로스 브라우저 지원은 좋지 않기 때문에 현명한 방법은 브라우저의 개인 접두사를 사용하는 것이다. 예를 들어 다음과 같다.

 -ms-box-shadow: 0px 3px 5px #444444;
 -moz-box-shadow: 0px 3px 5px #444444;
 -webkit-box-shadow: 0px 3px 5px #444444;
 box-shadow: 0px 3px 5px #444444;

내음영
box-shadow 속성은 외부가 아닌 요소 내부에 나타나는 내음영을 만들 수 있습니다.내음영은 광선 효과를 만드는 데 쓸 수 있다.

box-shadow:inset 0 0 40px #000000;

다중 그림자
텍스트 음영과 마찬가지로 상자 음영도 다중 음영 효과를 낼 수 있다.문법도 유사하다. 두 그룹의 값을 쉼표로 나누면 두 그룹의 음영은 코드의 선후 순서에 따라 위에서 아래로 원소에 응용된다.다시 말하면 코드에서 먼저 명시된 규칙으로 브라우저에서 아래의 규칙을 덮어쓴다는 것이다.

box-shadow: inset 0 0 30px hsl(0, 0%, 0%),
            inset 0 0 70px hsla(0, 97%, 53%, 1);

배경 그라데이션
선형 배경 그라데이션

background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);

배경이 점차적으로 변하는 유일한 아름다움에서 부족한 것은 다른 CS3 특성들처럼 널리 지원되지 않는다는 것이다.예컨대 IE 9에는 기본 지원이 없습니다.다른 대부분의 브라우저들은 배경의 점차적인 변화를 지원하지만, 모두 개인 접두사로 되어 있다.그러나 이것은 당신이 이 기능을 사용하여 디자인 효과를 높이는 것을 막기에는 충분하지 않다. 왜냐하면 많은 브라우저들이 이미 이 기능을 지원하고, 나머지 브라우저들도 머지않아 지원할 것이다.이전 버전 브라우저의 다운그레이드 시나리오에서는 이전 버전 브라우저가 그래디언트 규칙을 인식하지 못할 때 최소한 실제 색상의 배경을 렌더링하도록 고정 배경색을 정의하는 것이 좋습니다.
선형 그래디언트 구문을 분해하려면 다음과 같이 하십시오.

         (      90deg，  )        。                      。        to top right     ，                 。

    (    #ffffff 0%)       “  ”，          。        blue 20%    ，                 ，                  20% 。  ，           ，                 。

       “     ”。       :   90      ，      ((#ffffff 0%)，        50%  #e4e4e4     (   )  。                。      ，     “  ”            (      )。

                “  ”。                  ，          。

선형 그래디언트의 W3C 사양에 대한 자세한 내용은 을 참조하십시오.http://dev.w3.org/csswg/css3-images/#linear-gradients.
레이디얼 배경 그라데이션
CSS3 배경 그래디언트는 선형 그래디언트에만 국한된 것이 아니라 레이디얼 그래디언트를 만드는 것도 간단합니다.레이디얼 그래디언트는 중심점에서 시작하여 타원형이나 원형에 따라 확장된 그래디언트입니다.

background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);

분해 레이디얼 그라데이션 구문:

  background     ，        radial-gradient(    linear-gradient)。            。              center，         25px 25px     ，                25           。

        （ellipse cover）   ，              。
        circle(  ，             )，    ellipse(   ，           )。                ，            ： closest-side、closest-corner、farthest-side、cover、contain。

          、         (            )。

예:

background: radial-gradient(20px 20px, circle cover,
                            hsla(9,69%,85%,0.5) 0%,
                            hsla(9,76%,63%,1) 50%,
                            hsla(10,98%,46%,1) 51%,
                            hsla(24,100%,50%,1) 75%,
                            hsla(10,100%,39%,1) 100%);

배경 그래디언트에 대한 W3C의 표준 정의를 보려면 을 참조하십시오.http://dev.w3.org/csswg/css3-images/#radial-gradients.
그래디언트 반복

      
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
      
background: repeating-radial-gradient(2px 2px, ellipse,
             hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px,
             hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);

배경 그라데이션 패턴
몇몇 똑똑한 녀석들은 이러한 배경 변화 기교를 모아 배경 변화 모델로 정리했다.예를 살펴보겠습니다.

body {
    background-color:white;
    background-image:
      radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
      repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,
                hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,
                transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,
                hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,
                transparent 50px);
      background-size: 30px 30px, 90px 90px;
      background-position: 0 0;
}

괜찮아 보이죠?몇 줄의 코드만 사용하면 우리는 방금 배운 배경 점차적인 기교로 수정할 수 있고 유연한 배경 도안을 만들었다.CSS 고수 Lea Verou는 CSS3 배경 그라데이션 패턴을 수집했습니다.http://lea.verou.me/css3patterns/.
다중 배경 그림
CSS3에서는 요소에 대한 다중 배경을 설정할 수 있습니다(다중 배경은 CSS3 배경 및 경계 모듈의 일부).IE 8 이하 버전을 제외한 다른 브라우저에서는 이 기능을 지원합니다.구문은 다음과 같습니다.

background:
    url('../img/1.png'),
    url('../img/2.png'),
    url('../img/3.png');

다중 그림자의 배열 순서와 같이 맨 앞에 있는 그림이 브라우저에 표시될 때 맨 위에 덮어씁니다.다음과 같이 성명에 배경색을 추가할 수 있습니다.

background:
    url('../img/1.png'),
    url('../img/2.png'),
    url('../img/3.png') left bottom, black;

다중 배경 규칙이 지원되지 않는 브라우저(예: IE 8 이하 버전)는 전체 규칙을 무시합니다.따라서 CSS 다중 배경 규칙 전에 일반 배경 규칙을 추가하여 오래된 브라우저를 위한 예비 방안으로 사용할 수 있습니다.