본문 바로가기

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

CSS

NEWS

SITE

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) 0.48544em, #f2385a 0.48544em, #f2385a, #d00e31 1.31877em, rgba(242, 56, 90, 0) 1.31877em) 0 0, linear-gradient(to right bottom, rgba(242, 56, 90, 0) 0...
[Background] 포토샵으로도 만들기 쉽지 않는 푸른 배경 만들기 요런 배경 어떻세요~뭐 이미지로도 만들수 있지만 이젠 CSS3를 이용해보죠^^요렇게 radial-gradient를 이용하면 됩니다. .example { height: 100%; width: 100%; margin: auto; background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 73%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(73%,rgba(0,0,0,0.35)..
[Background] 버튼에 마우스를 오버하면 백그라운드 이미지 바꾸기 버튼에 마우스를 오버하면 백그라우드 이미지를 변경하는 CSS 입니다. 기본 원리는 배경이미지위에 다른 이미지를 올려놓습니다.살짝 안보이게 해놓고 버튼에 마우스를 올려놓으면이미지를 보이게 설정합니다. 이 과정에서opacity: 0; transition: opacity 1s; -webkit-transition: opacity 1s;를 사용하여 부드럽게 전환하는 효과를 주었네요^^ 제일 중요한 부분은.button:hover ~ #bg{ }이 부분이네요^^형제 선택자(~)를 사용했기 때문에 호환성은 떨어집니다.형제 선택자에 대한 설명은