본문 바로가기

광고

Design

Tutorial

Reference

CSS

NEWS

Coding

Coding


Code View/Background

[Background] 영화 Gravity를 주제로한 포스터 애니 배경 CSS 디자인 작업을 하지 않고이렇게 CSS로 만들었습니다.대단히 잘 만들었네요^^소스를 보시면 알겠지만 배경의 별들은 다 그림자 효과를 통해 만들었습니다.소스만 봐도 정성이 보이네요^^[미리보기] See the Pen Gravity Animated Poster by saransh (@saransh) on CodePen.
[Background] 이런 모양의 배경을 CSS3를 통해서 만들수 있네요~ 이런 모양의 배경을 CSS3를 통해서 만들 수 있습니다.BODY {  background: linear-gradient(to right top, rgba(242, 56, 90, 0) 0.48544em, #f2385a 0.48544em, #f2385a, #d00e31 1.31877em, rgba(242, 56, 90, 0) 1.31877em) 0 0, linear-gradient(to left top, rgba(242, 56, 90, 0..
[Background] 포토샵으로도 만들기 쉽지 않는 푸른 배경 만들기 요런 배경 어떻세요~뭐 이미지로도 만들수 있지만 이젠 CSS3를 이용해보죠^^요렇게 radial-gradient를 이용하면 됩니다. .example {         height: 100%;          width: 100%;          margin: auto;    ..
[Background] 버튼에 마우스를 오버하면 백그라운드 이미지 바꾸기 버튼에 마우스를 오버하면백그라우드 이미지를 변경하는 CSS 입니다.기본 원리는 배경이미지위에 다른 이미지를 올려놓습니다.살짝 안보이게 해놓고 버튼에 마우스를 올려놓으면이미지를 보이게 설정합니다.이 과정에서opacity: 0;  transition: opacity 1s;  -webkit-transition: opacity 1s;를 사용하여 부드럽게 전환하는 효과를 주었네요^^제일 중요한 부분은.button:hover ~ #bg{..