ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ceb ko ko ko ko ko ko ko en ko en ko en fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#19 CSS로 그라데이션 배경 만드는 방법 – 웹 코딩 강좌 | 디자인베이스
홈 멤버십 전용 #19 CSS로 그라데이션 배경 만드는 방법 – 웹 코딩 강좌
해당 강좌는 유튜브 멤버십 회원 전용 강좌입니다.
웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 CSS를 사용해서 그라데이션 넣는 방법을 알아볼게요. linear-gradient, radial-gradient, conic-gradient, repeating-radial-gradient 등 다양하게 사용할 수 있습니다. 해당 그라데이션을 사용할 때 컬러 방향이나 2개 이상의 컬러 넣는 방법, 해당 컬러의 힌트 중심을 바꾸는 방법에 대해서도 배워볼게요.
예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
CSS로 그라데이션을 만드는 방법은 간단합니다. 총 5가지 형식으로 선형 그레이디언트, 원형 그레이디언트, 반복 선형 그레이디언트, 반복 원형 그레이디언트, 원뿔형 그레이디언트 이렇게 제공합니다.
background: linear-gradient(#f69d3c, #3f87a6); background: radial-gradient(#f69d3c, #3f87a6); background: repeating-linear-gradient(#f69d3c, #3f87a6 50px); background: repeating-radial-gradient(#f69d3c, #3f87a6 50px); background: conic-gradient(#f69d3c, #3f87a6);
색상을 여러가지로 넣고 싶다면, 콤마를 통해 넣을 수 있습니다. 그리고 그라데이션의 방향을 조절할 수도 있습니다. ‘to top : 아래서 위로 그라데이션 적용 , to left top : 우측 하단에서 좌측 상단으로 그라데이션 적용’ 이렇게 입니다.
.linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); }
컬러에 위치를 조절하고 싶다면 컬러값 뒤에 %로 표현할 수 있습니다.
.gradient-bg { background: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); }
#19 이전단계 되돌리기, 다음단계, 히스토리 패널 사용법 (Undo, Redo, History Panel) – 포토샵 기초 강좌
#11 디자인을 똑같이 코딩하려면 꼭 알아야 할 박스 모델 – 웹 코딩 강좌
각종 디바이스 무료 목업 (약 90종) by facebook
저작권 완전 무료 이미지 사이트 모음
웹 주소 URL 짧게 만들어 주는 웹사이트
Credit Card UI kit
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.