데모를 확인하시려면 다음 링크를 클릭하세요. 링크 압축을 풀면 제이쿼리 라이브러리 파일, easing파일, lavalamp파일, lavalamp 축소파일, 스타일시트파일이 있습니다. 이미지는 2개가 있습니다. 각각 폴더에 저장하고 다음의 링크에서 경로를 수정하고 헤드태그에 삽입합니다. 이미지는 이미지 폴더에 저장하고 css에서 경로를 수정합니다. 네비게이션 메뉴가 3개 있는데 demo.html파일을 열면 3종류의 메뉴가 있고 이중 하나를 수정해서 사용합니다. css파일에도 3종류가 있으니 알맞는 것을 복사해서 사용하면 됩니다. 임베디드 제이쿼리 코드도 다음과 같이 3종류에 대해 연결이 되어있으니 수정하면 됩니다. 스피드의 700은 0.7초입니다. 수정해서 사용하면 됩니다.
포토샵은 다양한 도구로 만들지 못하는 이미지가 없을 정도록 다양한 기능을 갖고 있는 훌륭한 그래픽 툴입니다. 포토샵을 이용하여 오렌지와 레몬 아이콘을 만드는 방법을 알아봅니다. Step 1 포토샵을 열어 1000x1000px의 문서를 만들고 ctrl+shift+;키를 눌러 스냅기능을 활성화한 뒤 눈금자(ctrl+r)에서 클릭드래그하여 가이드선을 중앙에 그려줍니다. 스냅기능이 활성화되면 가이드선이 중앙에 올때 걸리게 됩니다. Step 2 원형셰이프툴을 선택하고 alt+shift키를 누른채 중앙에서 클릭드래그하여 원을 그려줍니다. 색은 아무거나 상관없습니다. Step 3 레이어창에서 fx아이콘을 눌러 컬러오버레이를 선택하고 색상을 사진과 같이 지정하고 내부그림자(Inner Shadow)는 사진처럼 수치를 입..
맥 컴퓨터 하단의 아이콘은 마우스 오버시 크게 늘어나면서 마우스를 이동하면 작아집니다. 이런 기능을 이용한 메뉴바로 방문자에게 재미를 선사하기도 합니다. CSS와 제이쿼리, 피시아이(Fisheye) 플러그인을 이용해서 만든 것으로 첨부파일을 압축해제하면 상하 두곳에 위치한 소스와 상, 하에 위치한 html파일이 있으니 골라서 사용하면 됩니다. 사용법은 다음과 같습니다. 1. html 헤드태그에 다음의 코드를 삽입합니다. 물론 자신의 웹사이트 경로에 맞춰야합니다. 기본적으로 js폴더가 있다는 가정입니다. 스타일시트도 경로에 맞춰 삽입합니다. 지금은 기본폴더에 있지만 css폴더에 저장한다면 href="css/style.css"로 바꿔야합니다.
CSS와 제이쿼리를 이용한 드랍다운 메뉴입니다. 원본이 섹시하다고 했으나 그다지 섹시하지는 않습니다. 원본 출처 html부분입니다. Home Tutorials Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Resources Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link About Us Advertise Submit Contact Us CSS부분입니다. 제이쿼리부분입니다. 헤드태그에 다음을 삽입하면 별도의 js폴더를 만들지 않아도 됩니다. 다음의 링크를 클릭하면 데모를 볼 수 있습니다. 링크
개인용으로만 제한된 비트맵 폰트입니다.
최신의 웹브라우저는 지원을 하지만 IE 구버전인 경우는 가상 클래스를 지원하지 않아서 드랍다운 메뉴를 구현하려면 CSS만으로는 안되고 자바스크립트를 추가해야했습니다. 우선 CSS만으로 드랍다운 메뉴를 구현하는 방법을 알아보고 구버전 IE를 위한 자바스크립트 코드를 추가하는 방법을 알아봅니다. 우선 메뉴를 구성합니다. Sunfishes Blackbanded sunfish Shadow bass Ozark bass White crappie Grunts Smallmouth grunt Burrito Pigfish Remoras Whalesucker Marlinsucker Ceylonese remora Spearfish remora Slender suckerfish 다음은 CSS를 구성합니다. 위와같이 구성하면 현..
포토샵 리터칭 결과입니다. 사진을 불러와서 ctrl+j키를 눌러 레이어 복사를 합니다. 레이어창에서 블렌딩모드를 Vivid light로 선택합니다. ctrl+i키를 눌러 반전시킵니다. 메뉴에서 필터-블러-가우시안블러를 선택하고 수치를 땀구멍이 보일정도가 될때가지 올립니다. 이번에는 메뉴에서 필터-기타(others)-하이패스를 클릭하고 수치를 피부가 부드럽게 보일때까지 올립니다. 레이어창에서 alt키를 누른채 1의 레이어마스크아이콘을 클릭하면 2처럼 레이어마스크가 검정색이 입혀지고 원래의 사진으로 돌아옵니다. 레이어마스크썸네일이 선택된 상태에서 브러시툴을 클릭하고 브러시의 경도를 0%로 하고 흰색을 선택한 다음 피부 부분만 칠합니다. 피부의 잡티나 주름이 제거되면서 부드럽게 됩니다. 다른 부분은 칠하지 말..
이 폰트는 개인용으로만 허용된 상업용 폰트입니다. 재배포가 안되므로 다운로드 링크를 걸어둡니다. 링크 다음은 개인용으로만 허용된다는 저작권관련 내용입니다. Copyright � 1988, 1990, 1993, 2003 Linotype Library GmbH, www.linotype.com. All rights reserved. Copyright � 1988, 1990, 1993 Adobe Systems Incorporated. All Rights Reserved. Helvetica Neue LT Pro 67 Medium Condensed 1.000;LINO;HelveticaNeueLTPro-MdCn Helvetica Neue LT Pro 67 Medium Condensed Version 1.000;PS ..
500x500크기의 흰색바탕 새 문서를 만들고 새 레이어아이콘을 클릭하여 (1)번 처럼 새로운 레이어를 만듭니다. 원형도구를 선택하고 옵션메뉴에서 (2)를 선택한 다음 Shift키를 누른 상태에서 배경에 마우스를 드래그하여 (3)처럼 원을 만듭니다. 이 원의 선택은 안의 색이 다 채원질때까지 해제하지 않습니다. 전경색 선택아이콘을 클릭하면 색상피커가 나타나고 (4)번의 웹색상전용 체크박스를 클릭해주면 색선택 상자가 그림 처럼 바뀝니다. 이는 색을 단계별로 선택할 수 있게 해줍니다. 그럼 (5)번 부분의 짙은 빨간색부터 시작합니다. (5)번 부분을 클릭하고 나옵니다. 브러시 크기는 원을 다 덮을 만큼으로 하고 경도는 100%로 한다음 원에 대고 한번 클릭해주면 색이 힙혀집니다. 다음으로 전경색 선택아이콘을..
A4크기의 새문서를 만들고 도구창에서 페인트통도구를 클릭합니다. 전경색 선택아이콘을 클릭하면 색상피커 창이 뜨고 (3)보다 위의 옅은 회색을 선택해 주고 나옵니다. 그런다음 페인트통 도구를 빈 공간에 클릭해주면 선택한 색이 칠해집니다. 레이어 창 아래에서 (1)모양의 아이콘을 클릭하면 새 레이어가 배경레이어 위에 만들어집니다. 사각형선택도구를 클릭하고 적당한 크기로 드래그해서 사각형을 만들어 줍니다. 사각형안에 흰색색상을 칠하기 위해 배경색칠할 때처럼 페인트통도구를 이용해 흰색을 칠해주거나 위 사진처럼 메뉴의 "편집-칠"을 선택해 흰색을 입혀줍니다. 레이어창에 레이어 1이 만들어졌으면 Ctrl + J키를 눌러 사본을 두개 만들어줍니다. 위 그림처럼 3개의 레이어가 만들어졌습니다. 이중 (3)이 실제 종이..
