[CSS] background에 fade color 넣기

2023. 1. 10. 00:32·개발 아카이브/HTML, CSS
반응형

개요

fade color
fade color

이번 CSS 코드는 이렇게 카드에 배경화면을 넣고 linear-gradient를 넣어 페이드 효과를 주는 방법입니다.

background shortcut을 사용하여

1. 그라디언트

2. 이미지 url

순서로 넣어서 효과를 완성할 수 있습니다.

css gradient 1
그라디언트 방향

.card-fade-bg-right {
  background: linear-gradient(to right, #000F, #0000), url('image url');
}

.card-fade-bg-left {
  background: linear-gradient(to left, #000F, #0000), url('image url');
}

.card-fade-bg-top {
  background: linear-gradient(to top, #000F, #0000), url('image url');
}

.card-fade-bg-bottom {
  background: linear-gradient(to bottom, #000F, #0000), url('image url');
}

css gradient 2
그라디언트 컬러

.card-fade-bg-green {
  background: linear-gradient(to right, #000F, green), url('image url');
}

 

예시

See the Pen Untitled by wooncloud (@wooncloud) on CodePen.

 

PS

추가적으로 카드 효과를 내는 CSS는 아래와 같습니다.

.card {
  font-size: xx-large;
  width: 400px;
  height: 200px;
  border-radius: 20px;
  border: 1px solid lightgray;
  padding: 15px;
  color: white;
  margin: 10px 0;
}
반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 아카이브 > HTML, CSS' 카테고리의 다른 글

[CSS] 흑백 효과 만들기 - GrayScale  (0) 2023.01.12
[CSS] 잘라낸 텍스트 만들기 / Cut out Text  (0) 2023.01.10
[CSS] 긴 글자를 Fade Out으로 숨기는 CSS  (0) 2023.01.09
브라우저 이미지 회전 현상 해결하기 (IE) - EXIF  (0) 2022.07.18
[CSS] CSS 텍스트 줄이기 ... 표시  (0) 2021.08.23
'개발 아카이브/HTML, CSS' 카테고리의 다른 글
  • [CSS] 흑백 효과 만들기 - GrayScale
  • [CSS] 잘라낸 텍스트 만들기 / Cut out Text
  • [CSS] 긴 글자를 Fade Out으로 숨기는 CSS
  • 브라우저 이미지 회전 현상 해결하기 (IE) - EXIF
운클라우드
운클라우드
프로그래밍, 디자인 및 각종 이야기와 리뷰를 담는 블로그
  • 운클라우드
    Wooncloud Blog
    운클라우드
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 이야기
        • 일기
        • 개발일지
        • 제품 리뷰
        • 기타
      • 정보
        • 유용한 사이트
      • 개발 아카이브 N
        • HTML, CSS
        • Javascript
        • SVELTEKIT
        • Node Js
        • JAVA
        • Spring
        • 코드 저장소
        • 라이브러리
        • 개발 관련 지식 N
        • AWS, Cloud, Server
        • DATABASE
      • 스터디
        • 정보처리기사
        • 친절한 SQL 튜닝 스터디
  • 블로그 메뉴

    • 홈
    • 방명록
    • 운구름 웹
    • 벨로그
    • 깃허브
    • 리틀리
    • 도시부엉
  • 링크

    • 홈페이지
    • 깃허브
    • 벨로그
  • 공지사항

  • 인기 글

  • 태그

    웹디자인
    폰트
    TurboFan
    자바스크립트
    코드저장소
    라이브러리
    javascript
    CSS
    html
    스터디
    자바
    튜닝
    Java
    정보처리기사
    SQL
    API
    회고
    리뷰
    마크다운
    이클립스
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
운클라우드
[CSS] background에 fade color 넣기
상단으로

티스토리툴바