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 en ko ko ko ko ko ko ko ko ko ko en fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#6 HTML + CSS로 버튼 만들기(Feat. 마우스 오버) – 웹 코딩 강좌 | 디자인베이스
웹 디자이너를 위한 웹 코딩 강좌 여섯 번째 시간입니다.
오늘은 버튼을 예제로 만들어볼 거에요. HTML과 CSS를 활용해서 어떻게 만드는지 예제를 통해 배워볼 수 있어요. 마우스 오버했을 경우 어떻게 되는지 까지도 디자인을 입혀볼거에요.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
버튼을 어떻게 만드는지 알아봤습니다.
영상을 보고 따라해보세요 하단에서 코드를 확인해보세요.
button{ width:120px; height: 40px; color:#fff; background: #004fff; font-size: 16px; border:none; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,79,255,0.3); transition:0.3s; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); } button:focus { outline:0; } button:hover{ background: rgba(0,79,255,0.9); cursor: pointer; box-shadow: 0 2px 4px rgba(0,79,255,0.6); }
#12 조건 사용해서 토글 버튼 만들기 – 프로토파이 강좌
#2 초간단 개발환경 세팅하기 – 웹 코딩 강좌
#03 도형 및 텍스트 사용 – 어도비 XD 강좌 (멤버십 전용)
쉽게 사람 일러스트레이션 믹스 매치 하기 ‘humaaans’
저작권 완전 무료 이미지 사이트 모음
그라데이션 컬러 추천해주는 사이트
날씨 아이콘셋 Frosted Glass
서피스 프로 isometric 뷰 목업
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.