코딩공부51 CSS 아이콘 hover 효과 모음 CSS 아이콘 hover 효과 모음 예제보기 다운로드 Icon Hover Effect 에서는 css를 이용한 9가지의 hover 효과를 확인할 수 있습니다. 해당 효과는 아이콘 이미지가 아닌 아이콘이 출력되는 폰트를 사용하여 색상을 쉽게 변경하고 스타일을 주고 있습니다. 효과를 주는 기본 소스는 아래와 같습니다. html Mobile Desktop Partners Support Security CSS .hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px rgba(255,255,255,1); transition: background 0.2s, color 0.2s; } .no-touch .hi-icon-effect-6 .hi-icon:hover { background: .. 2020. 11. 25. CSS 버튼 예제 CSS 버튼 예제 예제보기 다운로드 예제1 .a_demo_one { background-color:#ba2323; padding:10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; border: solid 1px #831212; background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%); border-radius: 5px; } .a_demo_one:active { padding-bottom:9px; padding-left:10px; padding-right:10px; p.. 2020. 11. 18. jQuery를 이용한 상자 내용 이동 jQuery를 이용한 상자 내용 이동 jQuery를 이용한 웹사이트 템플릿으로 사이트에 메뉴 항목을 선택하면 상단에 작게 흩어져 있는 상자가 애니메이션 되면서 컨텐츠 영역을 형성하는 애니메이션 효과를 내는 예제이다. 컨텐츠 영역은 Kevin Luck의 멋진 jScrollPane 플러그인을 사용할 사용자 정의 스크롤이다. 또한 작은 상자를 애니메이션하는 동안 회전하기 위해 Grady 의 jQuery 2d 변환 플러그인을 사용하고 약간의 양념을 위해 jQuery Easing 플러그인을 사용한다. 사진은 Photography by JIN.THAI( http://www.flickr.com/photos/jinthai/ ) 예제보기 다운로드 HTML 먼저 오버레이가 있는 배경 이미지를 배치 div 요소를 임의의 위.. 2020. 11. 16. 전체화면 CSS 기반 슬라이더 만드는 방법 전체화면 CSS 기반 슬라이더 만드는 방법 및 다운로드 전체화면을 이미지 또는 콘텐츠 슬라이더를 만드는 방법에 jQuery 플러그인이나 Javascript를 사용하지 않고 CSS로 만 슬라이더 만들기를 해보자. 예제보기 다운로드 div에 'css-based-slider'으로 클래스 이름을 준다. 위 첫번째 div의 경우 전체 슬라이드이므로 절대 위치를 설정한다. .css-slider-wrapper { display: block; background: #FFF; overflow: hidden; position:absolute; left:0; right:0; top:0; bottom:0; } 이제 4개의 섹션 슬라이드를 아래와 같이 만든다. Css Based slider CSS Slider without u.. 2020. 11. 14. CSS jQuery를 이용한 펼침 메뉴 예제 다운로드 CSS jQuery를 이용한 펼침 메뉴 예제보기 다운로드 menu를 div로 감싸고, 각 항목에는 링크 요소로서의 아이콘과 검색상자를 추가, 제목과 단락이 있는 div가 있다. Contact us eMail Twitter Facebook Help FAQ Live Support Tickets Search Go Image Gallery Categories Archives Featured Start from here Services Portfolio Pricing CSS 글꼴과 같은 일반적인 스타일은 다음과 같이 정의한다. .menu{ width:800px; height:52px; position:relative; top:200px; left:100px; font-family: "Trebuchet MS", s.. 2020. 11. 3. CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드 CSS와 jQuery로 풍경 애니메이션 만들기 예제보기 다운로드 html에 배경 이미지로 풍경을 구성할 div를 만든다. 하늘, 구름, 태양, 달, 별 그리고 별똥별로 이루어 질 것이다. 석양의 색변화는 노란색 태양에서 붉은색 태양으로 변해짐으로 시뮬레이션 된다. CSS 모든 요소는 절대적인 위치를 가진다. 공통 속성을 가질때 쉼표로 구분된 모든 클래스에 지정할 수 있다. body{ overflow:hidden; } #clouds, #sky, #night, #stars{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:100%; } #sky{ background:#fff url(../images/sky.png) repeat-x top.. 2020. 11. 3. CSS fixedNavigation2 예제 다운로드 FixedNavigation 2 Tutorial 예제보기 다운로드 네비게이션에 필요한 목록 요소는 내부에 링크가 있는 간단한 순서없는 목록이다. 목록은 나중에 javascript에서 참조하기 위해 아이디를 가져온다. jQuery를 사용하면 목록의 'li' 요소 위로 마우스를 가져갈 때마다 링크 항목이 슬라이드 밖으로 나온다. Home About Search Photos Rss Feed Podcasts Contact CSS 먼저 목록의 CSS 속성을 정의한다. ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } 페이지의 오른.. 2020. 11. 3. CSS overlay with slide out box 예제 다운로드 Overlay with slide out box 예제보기 다운로드 html에 두 개의 요소가 필요하다. 오버레이용 div와 상자용 div이다. 상자에는 닫기 아이콘과 일부 텍스트에 대한 링크 요소가 포함된다. Important message Here comes a very important message for your user. Turn this window off by clicking the cross. 나중에 javascript에서 두가지 요소를 참조 할 것이기 때문에 아이디를 부여해야 한다. 오버레이는 처음에 표시되지 않기 위해 display:none으로 스타일 태그를 준다. CSS .overlay{ background:transparent url(images/overlay.png) repeat .. 2020. 11. 2. CSS fixedNavigation1 예제 다운로드 FixedNavigation Tutorial 예제보기 다운로드 네비게이션에 필요한 목록 요소는 내부에 링크가 있는 간단한 순서없는 목록이다. 목록은 나중에 JavaScript에서 참조하기 위해 아이디를 가져온다. jQuery를 사용하면 목록의 'li' 요소 위로 마우스를 가져갈 때마다 링크 항목이 슬라이드 밖으로 나온다. CSS 먼저 목록의 CSS 속성을 정의한다. ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } 사용자가 페이지를 아래로 스클롤하여도 항상 엑세스 할 수 있어야 하므로 위치는 고정되어야 한다. 순서가 지정되지 않은 목록에는 기본값이 .. 2020. 11. 2. CSS3 Flexible box, Media query Flexible box 레이아웃 플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델이다. 이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다. 플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같다. display flex-direction justify-content align-items flex-wrap flex-flow align-content 또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같다. order align-self flex CSS3 Flex box 지원 버전 CSS3 플렉스 박스(fl.. 2020. 10. 29. CSS3 Button, User-interface, Multi-column CSS3 button CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있다. CSS에서 버튼은 태그 뿐만 아니라 태그와 태그로도 만들 수 있다. button 태그 a 태그 button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정할 수 있다. 다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제이다. 위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있다. 다음 예제는 그림자 효과를 설정한 버튼 예제이다. 위의 예제처럼 box-shadow 속성을 이용하면, 버튼에 실제와 같은 그림자 효과를 간단히 설정할 수 있다. 다음 예제는 버튼을 사용하지 못하도록 설정하는 예제이다. 위의 예제처럼 di.. 2020. 10. 29. CSS3 Transition, Animation Transition (전환) CSS3에서는 transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다. Transition 지원 버전 CSS3 전환(transition)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다. 속성 ie chrome firefox safari opera transition / transition-delay / transition-duration / transition-property / transition-timing-function 10.0 26.0 / 4.0 -webkit- 16.0 / 4.0 -moz- 6.1 / 3... 2020. 10. 28. CSS3 2D, 3D Transform 2D Transform CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있다. transform 속성은 HTML 요소에 대해 다음과 같은 동작을 제공한다. - 해당 요소를 움직인다. - 해당 요소를 회전시킨다. - 해당 요소의 크기를 변경한다. - 해당 요소를 기울인다. - 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킨다. CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공한다. CSS 좌표 체계 transform 속성에서 사용하는 x, y, z좌표는 다음 그림과 같은 좌표 체계를 따른다. CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단이 됩니다. .. 2020. 10. 27. CSS3 radial-gradient, shadow, web font Radial-gradient CSS3에서는 그래디언트 효과를 선형뿐만 아니라 원형으로도 나타낼 수 있다. CSS3 gradient 지원버전 CSS3 그래디언트(gradient)를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다. 속성 ie chrome firefox safari opera linear-gradient / repeating-linear-gradient 10.0 26.0 /10.0 -webkit- 16.0 / 3.6 -moz- 6.1 / 5.1 -webkit- 12.1 / 11.1 -o- radial-gradient / repeating-radial-gradient 10.0 .. 2020. 10. 26. CSS3, vendor prefix, 선형 그래디언트 CSS3 CSS3는 이전 버전 CSS와 완전히 호환되는 CSS의 최신 표준 권고안이다. CSS3 변경사항 CSS3에서 새롭게 추가되거나 변경된 대표적인 기능은 다음과 같다. - 선택자(Selectors) Level 3 - 미디어 쿼리(Media Queries) Level 3 - 색(Color) Level 3 - 네임스페이스(Namespaces) CSS3 module CSS3는 새롭게 정의된 기능과 함께 이전 버전의 CSS 기능까지도 함께 포함하고 있는 모듈(module)이라는 것으로 구성된다. CSS3를 구성하고 있는 주요 모듈은 다음과 같다. - 선택자(Selectors) - 박스 모델(Box Model) - 배경(Backgrounds) - 이미지(Image Values and Replaced Cont.. 2020. 10. 26. 이전 1 2 3 4 다음
