English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS3기본 강의

CSS3 연속적으로 만드는(Gradients)

CSS3연속적으로 만드는 기능은 이미지를 사용하지 않고 하나의 색상에서 다른 색상으로 연속적으로 만들 수 있습니다.

CSS를 사용하여3연속적으로 만드는

CSS3연속적으로 만드는 기능은 두 가지나 많은 색상 사이에서 부드러운 전환을 생성할 수 있는 유연한 솔루션을 제공합니다. 이러한 효과를 달성하기 위해 이미지를 사용해야 합니다. CSS를 사용하여3연속적으로 만드는 기능은 다운로드 시간을 줄이고 백본 사용량을 절약할 수 있습니다. 연속적으로 만드는 요소는 비례적으로 확대 또는 축소할 수 있으며, 품질이 떨어지지 않고 더 빠르게 렌더링됩니다. 이는 브라우저가 생성하기 때문입니다.

연속적으로 만드는 스타일은 두 가지가 있습니다:선형(linear)과원형(radial).

CSS 생성3 선형 연속적으로(linear)

선형 연속적으로 만들기 위해 두 개 이상의 색상표를 최소한 정의해야 합니다. 그러나 더 복잡한 연속적으로 만드는 효과를 만들기 위해 더 많은 색상표를 정의할 수 있습니다. 색상표는 연속적으로 만드는 색상의 부드러운 전환을 표시합니다. 또한, 연속적으로 만드는 시작점과 방향(또는 각도)을 설정할 수 있습니다. 연속적으로 만드는 기본 문법은 다음과 같습니다:

linear-gradient(angle, color-stop1, color-stop2, ...)

선형 연속적으로-위에서 아래로

다음 예제에서는 위에서 아래로 선형 연속적으로 만들어 보겠습니다. 이는 기본 값입니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-linear-gradient(red, yellow);
　　　　
　　　　background:　linear-gradient(red, yellow);
}
테스트 봅시다‹/›

선형 연속적으로-왼쪽에서 오른쪽으로

다음 예제에서는 왼쪽에서 오른쪽으로 선형 연속적으로 만들어 보겠습니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(left, red, yellow);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-linear-gradient(left, red, yellow);
　　　　
　　　　background:　linear-gradient(to right, red, yellow);
}
테스트 봅시다‹/›

선형 연속적으로-각각선

각각선 방향으로 연속적으로 만들 수도 있습니다. 다음 예제에서는 요소 상자의 왼하단에서 오른상단으로 선형 연속적으로 만들어 보겠습니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(bottom left, red, yellow);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-linear-gradient(bottom left, red, yellow);
　　　　
　　　　background:　linear-gradient(to top right, red, yellow);
}
테스트 봅시다‹/›

각도를 사용하여 선형 연속적으로 만드는 방향 설정

연속적으로 만드는 방향을 추가로 지정하려면 각도를 설정할 수 있습니다. 예를 들어, 이 각도 0deg는 아래에서 위로 연속적으로 만듭니다. 긍정적인 각도는 시계 방향으로 회전을 의미하며, 이는 다음과 같은 의미를 가집니다:90deg는 왼쪽에서 오른쪽으로 연속적으로 만듭니다. 각도를 사용하여 선형 연속적으로 만드는 기본 문법은 다음과 같습니다:

linear-gradient(angle, color-stop1, color-stop2, ...)

다음 예제에서는 각도를 사용하여 왼쪽에서 오른쪽으로 선형 연속적으로 만들어 보겠습니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(0deg, red, yellow);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-linear-gradient(0deg, red, yellow);
　　　　
　　　　background:　linear-gradient(90deg, red, yellow);
}
테스트 봅시다‹/›

여러 색상표를 사용하여 선형 연속적으로 만들기

여러가지 색상을 동시에 연속적으로 만들 수 있습니다. 다음 예제에서는 여러 색상표를 사용하여 선형 연속적으로 만드는 방법을 보여드리겠습니다. 모든 색상은 균일하게 분포합니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow, lime);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-linear-gradient(red, yellow, lime);
　　　　
　　　　background:　linear-gradient(red, yellow, lime);
}
테스트 봅시다‹/›

위치 색상 표시기를 설정

색상 표시기는 기울기선의 점이며, 해당 위치에서 특정 색상을 가집니다. 색상 표시기의 위치는 백분율이나 절대 길이로 지정할 수 있습니다. 필요에 따라 무한히 많은 색상 표시기를 지정할 수 있으며, 필요한 효과를 얻을 수 있습니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow　30%, lime　60%);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-linear-gradient(red, yellow　30%, lime　60%);
　　　　
　　　　background:　linear-gradient(red, yellow　30%, lime　60%);
}
테스트 봅시다‹/›

주의:색상 정지 위치를 백분율로 설정할 때, 0%은 시작점을 나타냅니다. 그리고100%은 종점을 나타냅니다. 그러나, 그 범위를 벗어난 값을 사용할 수 있습니다. 즉, 사용하기 전에 0%이나 사용한 후100%으로 원하는 효과를 얻을 수 있습니다.

선형 기울기 반복

repeating-linear-gradient() 함수는 선형 기울기를 반복합니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background:　white;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-linear-gradient(black,　white　10,　lime　20%);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-repeating-linear-gradient(black,　white　10,　lime　20%);
　　　　
　　　　background:　repeating-linear-gradient(black,　white　10,　lime　20%);
}
테스트 봅시다‹/›

CSS 생성3반경적 기울기(radial)

반경적 기울기에서, 색상은 단일 점에서 나타나고 원형이나 타원형 형상으로 외쪽으로 평滑하게 확산됩니다. 이는 선형 기울기와는 달리 단일 방향에서 하나의 색상에서 다른 색상으로 기울어지는 것이 아닙니다. 반경적 기울기 생성의 기본 문법은 다음과 같습니다:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

이 radial-gradient() 함수의 매개변수는 다음과 같은 의미를 가집니다:

  • position — 기울기의 시작점을 지정합니다. 단위(px, em 또는 백분율)나 키워드(left, bottom 등)로 기울기의 시작점을 지정할 수 있습니다.

  • shape — 기울기의 최종 형상의 형상을 지정합니다. 원형이나 타원형이 될 수 있습니다.

  • size — 기울기의 최종 형상의 크기를 지정합니다. 기본 값은 farthest입니다-side.

다음 예제는 균일한 간격으로 배치된 색상 표시기와의 반경적 기울기를 표시합니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(red, yellow, lime);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-radial-gradient(red, yellow, lime);
　　　　
　　　　background:　radial-gradient(red, yellow, lime);
}
테스트 봅시다‹/›

반경적 기울기의 형상 설정

radial-gradient() 함수의 shape 매개변수는 반경적 기울기의 최종 형상을 정의합니다.它可以取值 circle 或 ellipse。这是一个实例：

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(circle, red, yellow, lime);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-radial-gradient(circle, red, yellow, lime);
　　　　
　　　　background:　radial-gradient(circle, red, yellow, lime);
}
테스트 봅시다‹/›

주의:shape 매개변수를 생략하거나 지정하지 않으면, 크기가 단일 길이일 경우 끝 형상을 종료하며, 기본적으로 원형으로 설정되며, 그렇지 않으면 타원형으로 설정됩니다.

반경적 기울기의 크기를 설정

radial-gradient() 함수의 size 매개변수는 기울기의 최종 형상의 크기를 정의합니다. 크기는 단위나 키워드로 설정할 수 있습니다: closest-side, farthest-side, closest-corner, farthest-corner.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background: red;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(left bottom, circle farthest-side,　red,　yellow,　lime);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-radial-gradient(left bottom, circle farthest-side,　red,　yellow,　lime);
　　　　
　　　　background:　radial-gradient(circle farthest-side at left bottom,　red,　yellow,　lime);
}
테스트 봅시다‹/›

반복적径向渐变

이 repeating-radial-gradient() 기능을 반복적으로径向渐变.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background:　white;
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-radial-gradient(black,　white　10,　lime　20%);
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-repeating-radial-gradient(black,　white　10,　lime　20%);
　　　　
　　　　background:　repeating-radial-gradient(black,　white　10,　lime　20%);
}
테스트 봅시다‹/›

CSS3투명도와 연속

CSS3渐变还支持투명도。堆叠多个背景때문에, 배경 이미지의 애니메이션 효과를 만들기 위해 사용할 수 있습니다.

.gradient　{
　　　　/*　브라우저에서 Fallback39;t support gradients　*/
　　　　background:　url("images/sky.jpg");
　　　　/*　Safari를 위해　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(left,　rgba(255,255,255,0),　rgba(255,255,255,1))，url("images/sky.jpg");
　　　　/*　Internet Explorer를 위해　10　*/
　　　　background:　-ms-linear-gradient(left,　rgba(255,255,255,0),　rgba(255,255,255,1))，url("images/sky.jpg");
　　　　
　　　　background:　linear-gradient(to right,　rgba(255,255,255,0),　rgba(255,255,255,1))，url("images/sky.jpg");
}
테스트 봅시다‹/›
CSS3 텍스트 오버플로우(Text Overflow)CSS3 배경(Background)