[CSS] 동작 천천히 만드는 애니메이션

CSS hover 기능을 쓸 때 너무 딱딱 끊기는 느낌을 바꾸고 싶었던 적 있으신가요? 자연스럽게 천천히 동작하는 애니메이션으로 구현하고 싶을 때 사용해 봅시다! 1. 준비 ① button 만들기 일단 애니메이션을 적용할 버튼을 만들어줍니다. 꼭 버튼이 아니어도 됩니다. 디자인은 각자 마음에 들게 만들어주시고 hover를 이용해 opacity를 조절해 주세요. button:hover{ opacity:0.5; /* 투명도 조절 */ cursor:pointer; /* 마우스 올렸을 때 손모양 마우스 */ } hover에는 opacity와 cursor만 넣었습니다. 2. transition button:hover{ opacity:0.5; /* 투명도 조절 */ cursor:pointer; /* 마우스 올렸을 ..

coding/html + css · 2022. 12. 27. 07:30

웹디자인 포트폴리오 참고 사이트

웹디자인 포트폴리오 제작 시 참고하기 좋은 사이트들을 몇 가지 알려드립니다. 1. GDWEB DESIGN AWARDS https://www.gdweb.co.kr/main/ 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr 굿디자인 웹 굿디자인 웹에서는 주로 한국의 웹디자인 트렌드를 알 수 있습니다. 어워드라고 쓰여있는 만큼 얼마나 웹 표준을 잘 지켜 웹디자인을 했는지 심사하기 때문에 코드를 참고하기에도 좋은 사이트들을 많이 볼 수 있어요. 또한 에이전시의 순위도 확인할 수 있습니다. - 자세히 알아보기 2. Awwards https://www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends Awww..

tip/디자인 팁 · 2022. 1. 27. 09:30

웹디자인 레퍼런스 참고 사이트 - Dribbble

웹디자인을 할 때 참고하기 좋은 해외 사이트를 소개해드립니다. 1. Dribbble https://dribbble.com/ Dribbble - Discover the World’s Top Designers & Creative Professionals Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals. Sign up dribbble.com Dribbble 메인 다양한 디자인을 참고할 수 있는 해외 디자이너 포트폴리오 사이트입니다. 찾고자 하는 디자인의 카테고리를 ..

tip/디자인 팁 · 2022. 1. 18. 09:30

[꿀정보] 모바일 화면 PC에서 확인하기

안녕하세요. 개자이너 씸플레이입니다. 반응형 홈페이지를 만들 때 핸드폰으로 일일이 확인하기 힘드셨죠? 그럴 때 유용한 사이트가 있습니다. (원래 다음 트로이를 사용했었는데 갑자기 안 나오길래 급하게 찾아봤습니다.) *물론 핸드폰으로 확인하는 게 가장 좋은 방법이지만 매번 그렇게 할 수는 없잖아요? 1. responsinator http://www.responsinator.com/ Responsinator Responsinator · About · Login www.responsinator.com ① 사이트 접속 먼저 위의 주소로 접속을 해줍니다. 직관적이게 바로 모바일 모양이 나오고 있습니다. 2. 확인할 사이트 주소 입력 ① 주소창 확인 왼쪽 위에 보시면 Enter your site 라는 문구와 함께 ..

tip/디자인 팁 · 2021. 1. 8. 09:30

[시안] 랜딩페이지 [물감툰]

안녕하세요. 플입니다. 오늘의 시안은 물감툰 랜딩페이지예요 1. 물감툰 이번 작업은 랜딩페이지로 원페이지 작업을 해서 시안도 길게 만들어봤어요. 각 메뉴당 아래로 내려가는 형식이에요. 사이트는 연한 노란색을 포인트 컬러로 작업했어요. 캐릭터가 잘 보여야 하는 사이트라 연한 색을 골랐어요. 목업은 사이트가 연한 색이니까 진한 배경을 사용해 사이트가 잘 보이게 만들어봤어요. 요즘 디자인하면서 고려하는 건 잘 보이는 것이에요. 뭔가 이렇게 뽝! 하고 잘 보였으면 좋겠다! 하는 느낌으로 작업하고 있습니다(뭐야 그게) 물감툰이라는 이름을 변경할지 말지 고민하고 있어요. 바뀌면 올라올 사이트에서 이름이 바뀔 거 같네요. 랜딩페이지 작업 문의는 메일로 부탁드려요~ ssimplay@naver.com 더 많은 포트폴리오..

Design/포토샵 · 2020. 3. 30. 07:30