최신 웹 디자인 경향과 기준을 이해하는 것은 디자이너와 개발자 모두에게 중요합니다. 현재 배경 그라디언트 활용은 최신 웹 사이트에서 널리 사용되고 있습니다.
앞서 언급한 배경 그라디언트 샘플은 향후 시각적으로 매력적인 CSS 디자인을 제작하는 데 모범이 될 수 있습니다.
CSS를 사용한 배경 그라데이션
CSS 그라데이션은 이러한 색상을 지정하여 여러 색상 음영 간의 원활한 전환을 묘사하는 데 활용됩니다. 어도비 일러스트레이터와 같은 소프트웨어를 통해 만들 수 있는 그라데이션의 실제 이미지 파일을 적용하는 것과 비교할 때 CSS 그라데이션은 뛰어난 제어 및 기능을 제공합니다. 배경 이미지 CSS 속성을 사용하여 그라디언트를 배경으로 설정할 수 있습니다.
앞서 언급한 그라디언트 스타일에는 선형-그라디언트() 함수를 사용하여 생성되는 선형, 방사형-그라디언트() 함수를 사용하여 생성되는 방사형, 원뿔형-그라디언트() 함수를 사용하여 생성되는 원뿔형이 포함됩니다. 또한 반복 선형 그라디언트(), 반복 방사형 그라디언트() 및 반복 원뿔형 그라디언트() 함수를 사용하여 반복 그라디언트를 생성할 수 있습니다.
linear-gradient() : linear-gradient() CSS 함수는 직선을 따라 두 개 이상의 색상이 점진적으로 전환되는 이미지를 만듭니다. 그 결과는 특수한 종류의 ‘이미지’인 ‘그라데이션’ 데이터 유형의 객체입니다.
radial-gradient() : radial-gradient() CSS 함수는 원점에서 방사되는 두 개 이상의 색상 사이의 점진적인 전환으로 구성된 이미지를 생성합니다. 그 모양은 원 또는 타원일 수 있습니다. 이 함수의 결과는 특수한 종류의 ‘이미지’인 ‘그라디언트’ 데이터 유형의 객체입니다.
conic-gradient() : conic-gradient() CSS 함수는 중심점에서 방사형이 아닌 중심점을 중심으로 회전하는 색상 전환이 있는 그라데이션으로 구성된 이미지를 생성합니다. 원뿔 그라데이션의 예로는 원형 차트와 컬러 휠이 있습니다. 원뿔 그라디언트() 함수의 결과는 특수한 종류의 ‘이미지’인 ‘그라디언트’ 데이터 타입의 객체입니다.
반복-선형-그라디언트() : 반복-선형-그라디언트() CSS 함수는 반복되는 선형 그라데이션으로 구성된 이미지를 만듭니다. gradient/linear-gradient()와 유사하며 동일한 인수를 사용하지만 모든 방향으로 무한히 색이 멈추는 것을 반복하여 전체 컨테이너를 덮습니다. 이 함수의 결과는 특수한 종류의 ‘이미지’인 ‘gradient’ 데이터 타입의 객체입니다.
반복-레이디얼-그라데이션() : 반복 방사형 그라데이션() CSS 함수는 원점에서 방사되는 반복 그라데이션으로 구성된 이미지를 만듭니다. gradient/radial-gradient()와 유사하며 동일한 인수를 사용하지만 gradient/repeating-linear-gradient()와 유사하게 모든 방향으로 무한히 색이 멈추는 것을 반복하여 전체 컨테이너를 덮습니다. 이 함수의 결과는 특수한 종류의 ‘이미지’인 ‘gradient’ 데이터 타입의 객체입니다.
반복-코닉-그라디언트() : 반복-코닉-그라디언트() CSS 함수는 (단일 그라데이션이 아닌) 반복 그라데이션으로 구성된 이미지를 생성하며, 중심점을 중심으로 회전하는 색상 전환(중심에서 방사되지 않음)이 있습니다.
이 문서에 사용된 코드는 MIT 라이선스 입니다.
주어진 텍스트를 간결하고 우아한 방식으로 정교하게 표현하면 다음과 같습니다: “다음은 각각의 구문을 포함하여 공식적으로 승인된 그라데이션에 대한 개요입니다.
선형 그라디언트 구문
linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]방사형 그라디언트 구문
radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);원뿔형 그라디언트 구문
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)웹 페이지의 배경에 그라데이션을 추가하여 배경 이미지 CSS 속성을 활용하면 웹사이트의 시각적 매력과 사용자 경험을 현재 상태 이상으로 높일 수 있는 잠재력을 갖게 됩니다.
먼지가 많은 잔디
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);모래에서 파란색으로
앞서 언급한 그라데이션은 다음 CSS 구문을 활용하여 생성할 수 있습니다:
background-image: linear-gradient(to right, #DECBA4, #3E5151);계
다음 지침은 웹페이지의 배경으로 미묘하고 시각적으로 매력적인 선형 그라데이션을 생성하기 위해 CSS(Cascading Style Sheets)를 활용합니다. 원하는 효과를 얻으려면 다음 단계를 따르십시오: “`css 배경-이미지: 선형-그라디언트(아래쪽, #36454F, #292B3E);
background-image: linear-gradient(to right, #8360c3, #2ebf91);아민
다음 CSS 코드를 사용하여 요청된 방사형 그라데이션을 생성할 수 있습니다.
background-image: linear-gradient(to right, #8e2de2, #4a00e0);편안한 빨간색
한 줄의 CSS 코드만으로도 웹사이트의 배경으로 매력적이고 시선을 사로잡는 그라데이션을 구현할 수 있습니다.
background-image: linear-gradient(to right, #fffbd5, #b20a2c);숭고한 빛
이 CSS 코드를 활용하여 웹사이트의 배경으로 매력적인 그라디언트를 만들어 보세요.구현 프로세스는 간단하여 온라인 존재감을 미적으로 향상시킬 수 있습니다:
background-image: linear-gradient(to right, #fc5c7d, #6a82fb);메가트론
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);블루 라즈베리
파란색 그라데이션은 후속 계단식 스타일 규칙을 활용하여 얻을 수 있습니다:
background-image: linear-gradient(to right, #00b4db, #0083b0);프리미엄 다크
앞서 언급한 시각 효과는 다음 선형 그라데이션 CSS 코드를 활용하여 얻을 수 있습니다:
background-image: linear-gradient(to right, #434343 0%, black 100%);크리스탈
background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);로렌시움
앞서 언급한 그라디언트를 생성하기 위해 다음 CSS를 사용할 수 있습니다. 이 코드는 색조가 다른 다양한 등급의 색상을 생성하는 데에도 적용할 수 있습니다.
background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);오행복
제공된 코드를 사용하여 쉽게 구현할 수 있는 매끄러운 CSS 그라데이션을 배경으로 통합하여 웹사이트의 미적 매력을 높여보세요.
background-image: linear-gradient(to right, #00b09b, #96c93d);The Strain
시각적 매력과 매력을 불어넣기 위해 CSS를 활용하여 웹사이트의 배경으로 매혹적인 그라디언트를 만들어 보시겠습니까?
background-image: linear-gradient(to right, #870000, #190a05);옐로우 망고
앞서 언급한 방사형 그라데이션 배경을 생성하는 데 다음 CSS를 사용할 수 있습니다:
background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);Juicy Grass
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );Pink Fish
다음 문은 앞서 언급한 선형 그라데이션 배경을 CSS를 사용하여 구현하기 위한 지시문으로, 가로 세로 비율을 그대로 유지하면서 위치 속성이 있는 요소와 전폭 레이아웃을 만드는 데 적용하는 것을 포함하며 공급업체 접두사의 도움을 받아 사용됩니다.
background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));Sea Lord
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );Cherry Blossom
앞서 언급한 CSS 코드는 체리 색조의 그라데이션을 생성하는 데 활용될 수 있습니다. 또한 이 코드는 다양한 음영으로 다양한 그라데이션 효과를 생성하는 데 활용될 수 있습니다.
background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);Fresh Air
CSS를 사용하여 앞서 언급한 그라데이션을 생성하려면 다음 코드를 활용하시기 바랍니다:
background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );스텔라
매혹적인 파란색 그라데이션을 생성하려면 다음 CSS 코드를 사용하는 것이 좋습니다:
background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );정오에서 황혼
단 한 줄의 CSS 코드를 사용하여 HTML 구성 요소의 모양을 개선하고 최소한의 노력으로 매혹적인 배경 그라데이션을 손쉽게 도입할 수 있습니다.
background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);일출
일출 그라데이션과 같이 미묘하지만 시각적으로 눈에 띄는 디자인 요소는 한 줄의 CSS 코드를 사용하여 웹사이트 레이아웃에 쉽게 통합할 수 있습니다.
background-image: linear-gradient(to right, #ff512f, #f09819);숲
앞서 언급한 CSS 코드를 사용하여 앞서 언급한 그라데이션 효과를 생성할 수 있습니다. 또한, 이 CSS는 다양한 색 구성표를 특징으로 하는 다양한 그라데이션 효과를 생성하는 데 사용될 수 있으므로 웹사이트의 모양을 조정할 수 있는 수많은 기회를 제공합니다.
background-image: linear-gradient(to right, #5a3f37, #2c7744);슈퍼맨
앞서 언급한 시각적 효과는 다음 선형 그라데이션 CSS 코드를 활용하여 구현할 수 있습니다:
background-image: linear-gradient(to right, #0099f7, #f11712);심해 우주
좀 더 세련된 톤을 위해 다음과 같은 문구를 제안할 수 있습니다: “함께 제공되는 CSS를 활용하여 배경에 세련되고 세련된 느낌을 불어넣으세요.
background-image: linear-gradient(to right, #2c3e50, #4ca1af);Royal
다음 코드를 활용하여 PSD 파일에 지정된 디자인에 따라 웹페이지의 배경으로 선형 그라데이션을 생성할 수 있습니다:
background-image: linear-gradient(to right, #141e30, #243b55);오렌지 코랄
다음 코드는 CSS를 사용하여 앞서 언급한 그라디언트를 생성하는 데 사용할 수 있습니다:
background-image: linear-gradient(to right, #ff9966, #ff5e62);Old Wine
다음 CSS 지시문을 사용하면 분홍색 음영의 미묘한 그라데이션을 얻을 수 있습니다.
background-image: linear-gradient(to right, #33001b, #ff0084); 아침 하늘
동일한 의미를 보다 세련된 방식으로 전달하는 다음 공식을 제안할 수 있습니다: 함께 제공되는 CSS 코드를 활용하여 미묘하면서도 생생한 아침 하늘 그라데이션을 생성하세요.
background-image: linear-gradient(to right, #b6fbff, #83a4d4);카라멜
보다 세련된 어조를 채택한 원래 문구를 다음과 같이 수정할 것을 제안합니다: “이 CSS 선형 그라디언트를 배경으로 사용하여 웹사이트의 시각적 매력을 높이세요.이 기법을 사용하면 두 가지 이상의 색상을 매끄럽게 전환하여 우아하고 전문적인 디자인을 만들 수 있습니다.
background-image: linear-gradient(to right, #FFD194, #D1913C);황혼
제공된 CSS 코드 스니펫을 활용하여 황혼에서 영감을 받은 그라데이션 배경을 통합하는 것은 웹사이트의 시각적 매력을 향상시키는 미묘하면서도 영향력 있는 방법입니다. 이 간단한 수정으로 시청자의 마음을 사로잡고 매료시킬 수 있습니다.
background-image: linear-gradient(to right, #9796f0, #fbc7d4);마고 화이트
시각적으로 눈에 띄고 복잡하지 않은 그라데이션 배경은 다음 CSS 코드를 사용하여 만들 수 있습니다:
background-image: linear-gradient(to right, #ffefba, #ffffff);저녁부터 밤까지
background-image: linear-gradient(to right, #005aa7, #fffde4);오션뷰
background-image: linear-gradient(to right, #a8c0ff, #3f2b96);깃털
위에 표시된 것과 유사한 그라데이션 배경을 다시 만들려면 다음 CSS 코드 스니펫을 활용하는 것이 좋습니다:
background-image: linear-gradient(to right, #d3cce3, #e9e4f0); 그라디언트로 웹페이지를 우아하게 만들기
배경, 테두리, 아이콘, 버튼, 텍스트, 밑줄, 목록 글머리 기호 등 웹사이트의 여러 요소는 그라디언트를 활용하여 향상시킬 수 있습니다. 이러한 역동적인 시각적 전환을 통합하면 웹사이트의 미적 매력을 전례 없는 수준으로 끌어올릴 수 있습니다.
상자 그림자 CSS 속성을 활용하면 웹사이트의 특정 요소에 생동감을 불어넣어 현대적인 느낌을 줄 수 있습니다.