기초공사 (html,css,javascript)

엘리 사이트-line-gradient 방법 본문

academy/html

엘리 사이트-line-gradient 방법

에스프레소라떼 2024. 3. 14. 00:45

//

https://velog.io/@cakecoder/CSS-%EC%8A%A4%ED%83%95%EB%94%9C-%EB%AC%B8%EC%84%9C%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%B0%EA%B2%BD-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-%EA%B4%80%EB%A0%A8-%EC%86%8D%EC%84%B1%EB%93%A4

 

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

.색 조합

https://mycolor.space/

 

 

ColorSpace - Color Palettes Generator and Color Gradient Tool

Just Enter a Color! And Generate nice Color Palettes

mycolor.space

.모양변형

https://www.shapedivider.app/

 

 

Shape Divider App

Create fully responsive shape dividers for your next web project

www.shapedivider.app

.변형-배경화면

.https://haikei.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

https://coolbackgrounds.io/

 

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

 

// 드리블

https://dribbble.com/

 

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
'academy/html' Related Articles more