기초공사 (html,css,javascript)
엘리 사이트-line-gradient 방법 본문
//
CSS 스타일 문서에서 사용하는 배경과 그라데이션 관련 속성들
background-size 값은 background-position 값과 함께 사용될 때만 단축형 구문에 포함될 수 있다. 즉, 두 값을 모두 명시하거나 background-position 값만 사용하면 된다.함께 사용할 때에는 슬래시 / 로 구분한
velog.io
//
엘리사이트
. 그라이언트
https://cssgradient.io/
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
.색 조합
ColorSpace - Color Palettes Generator and Color Gradient Tool
Just Enter a Color! And Generate nice Color Palettes
mycolor.space
.모양변형
Shape Divider App
Create fully responsive shape dividers for your next web project
www.shapedivider.app
.변형-배경화면
Generate unique SVG design assets | Haikei
Growing number of generators Get started with one of our flexible SVG generators that will help you create unique data-driven shapes without hassle. Choose between stacked or layered waves, steps, peaks, blobs, symbols, grids, gradients, and much more. Eas
haikei.app
//
.변형-배경화면1
Cool Backgrounds
Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers.
coolbackgrounds.io
// 드리블
Dribbble - Discover the World’s Top Designers & Creative Professionals
Protect What You Love artwork for Bigfoot
dribbble.com
//https://www.youtube.com/watch?v=0Pwxh1XL-Fk
//
이 사이트 처럼 그라이데이션
#main-wrap ::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0) 100%
);
}
--->
linear-gradient: 선형 그라디언트를 생성하는 함수입니다.
(45deg): 그라디언트의 각도를 지정합니다. 여기서는 45도 각도로 그라디언트가 표시됩니다.
rgba(0,0,0,1) 0%: 그라디언트의 시작점에서의 색상과 위치를 지정합니다. 여기서는 검은색(rgba(0,0,0,1))과 시작점(0%)을 의미합니다.
rgba(0,0,0,0) 100%: 그라디언트의 끝점에서의 색상과 위치를 지정합니다. 여기서는 투명한 검은색(rgba(0,0,0,0))과
끝점(100%)을 의미합니다.
결과적으로, 이 코드는 45도 각도로 검은색에서 투명한 검은색으로 서서히 변하는 그라디언트 배경을 생성합니다. 그라디언트의 시작점은 완전히 검은색이고, 끝점은 완전히 투명한 검은색입니다. 이러한 그라디언트를 사용하면 요소의 배경으로 부드러운 그라데이션 효과를 적용할 수 있습니다.
'academy > html' 카테고리의 다른 글
background-image순서 (0) | 2024.03.19 |
---|---|
네이버-구조분석 (1) | 2024.03.18 |
grid-사이트 및 예제 (0) | 2024.03.11 |
flex-예제 (0) | 2024.03.10 |
0310-position(static vs relative) (0) | 2024.03.10 |