호기심 가득! 모지모지!

CSS만으로 텍스트메뉴를 좀 더 화려하게 만들 수 있는 소스입니다. 아래와 같은 텍스트 메뉴에 마우스를 오버했을때 다양한 효과들을 손쉽게 적용할 수 있습니다. 위의 그림은 그 중의 일부분이고, 아래 페이지에 접속하면 더 많은 효과들을 확인할 수 있습니다. 괜히 어렵게 이미지를 써가며 화려하게 하기보단 이렇게 텍스트와 소스 몇 줄만으로도 그럴듯한 메뉴를 만들 수 있지 않을까 싶네요. http://tympanus.net/Development/CreativeLinkEffects/ 소스는 아래에서 받아서 사용하시면 되고, 페이지에 적용법도 간략히 나와있으니 참고하시면 됩니다. http://tympanus.net/codrops/2013/08/06/creative-link-effects/ 추가로 텍스트메뉴 효과 뿐..

티스토리 반응형 스킨을 만지작거리다보니 요즘 대세인 반응형 웹에 대한 자신감이 늘어가는 중!~ 기본은 뭐니 뭐니해도 각 화면별 CSS만 잘 정리해주면 된다는 것~ 이번에 손대볼 곳은 배경이미지입니다. 기본스킨은 배경이미지 하나를 사용하고 있습니다만, 그냥 하나로만 사용하기엔 심심하고 재미가 없죠? 그래서 각 화면별 그리고 펼쳐치는 메뉴쪽 배경을 바꿔 볼 생각입니다. 방법을 간단히 요약하자면, 1. 각 영역별 이미지를 업로드한다. 2. 각각의 CSS상의 이미지 URL을 바꿔준다. 정도입니다. 크게 어렵지 않으니 겁내지 마세요~ㅎ 일단, 교체할 영역을 살펴보죠~ 가장 큰 PC화면에서 볼때 좌측의 배경이미지가 나타나는 부분입니다. 다스베이더가 오토바이를 타고 있는 이미지 보이시죠? 두번째는 중간 크기로 브라우..

포토샵 아웃포커싱 효과, 일반적으로 많이들 올라오는 글은 대부분 한 사진에서 포커싱될 부분을 제외하고 블러 효과를 줘서 아웃포커싱 느낌의 이미지 만들기가 많을겁니다만, 이건 다양한 이미지소스를 조합/이용해서 그럴듯하게 느낌을 살려내는 작업이라고 보시면 됩니다. 포토샵의 많은 기능을 몰라도 충분히 따라 하실 수 있습니다.사실 어려운 기술도 없으니 몇 번해보면 쉽게 따라 만드실 수 있을거 같아요~ 대충 완성한 결과물부터 보시면 이렇습니다. 일단 배경이 될 숲의 이미지를 기본으로 작업을 시작해봅니다. 그 위에 풀 이미지를 올려놓습니다. (첨부된 이미지는 이미 배경이 투명하게 작업되었네요)첨부이미지는 글 맨아래에서 받으시면 됩니다. 자 그럼 뒤의 숲 배경부터 흐릿하게 처리합니다. 메뉴에서 가우시안 블러를 선택하..