분류 전체보기 (69) [CSS] div 위로 올라오는 애니메이션 효과 페이지 실행시 해당 요소가 아래에서 위로 올라오는 애니메이션을 CSS로 구현합니다. Content 1. CSS .content { position: relative; animation: fade_up 1s; }@keyframes fade_up { 0% { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); }} 2. HTML Content [CSS] 텍스트 마우스 오버시 밑줄 애니메이션 효과 텍스트에 마우스를 올리면 밑줄이 그려지는 애니메이션 효과입니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 1. CSS .menu { width: 90%; margin: 0 auto; } .menu li { position: relative; float: left; width: 20%; text-align: center; } .menu li a { display: block; padding: 20px 0; font-size: 15px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu li a:hover { color: #0026dd; } .menu li::after { content: ''; display: .. [jQuery] TOP(맨 위로 이동) 버튼 만들기 200px 이상 스크롤을 내리면 우측 하단에 버튼이 나타나며, 버튼 클릭 시 스크롤이 부드럽게 맨 위로 올라가는 코드입니다. 맨위로 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 맨위로 3. CSS .btn_top { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background: #0026dd; border: 0; border-radius: 50%; color: #fff; } 4.. jQuery $(function() { $(window).scroll(function() { var scrollPosition = $(this).scrollTop(); if (scrollPosition > 200.. [CSS] 글자에 테두리 효과 주기 1. webkit-text-stroke 글자에 테두리 효과를 주기 위해 간단하게 webkit-text-stroke 속성을 이용하는 방법이 있습니다. 그러나 해당 속성은 IE 브라우저에서 지원하지 않습니다. .text { -webkit-text-stroke: 1px #000; text-stroke: 1px #000; } 테두리 2. text-shadow 위 방법이 IE 브라우저에서는 지원되지 않으므로, 크로스 브라우징을 위해 text-shadow 속성을 이용하여 테두리 효과를 줄 수도 있습니다. .text { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } 테두리 [jQuery] 항상 제이쿼리 최신 버전 사용하기 항상 최신 버전의 제이쿼리를 사용하려면 태그 안에 아래 코드 중 하나를 넣어줍니다. /* 비압축 */ /* 압축 */ [jQuery] 반응형 이미지맵 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html Responsive Image Maps jQuery PluginResponsive Image Maps jQuery Plugin Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize. Download the plugin from github This image map was created in minutes wimattstow.com반응형 이미지에서도 이미지맵이 가능하도록.. [jQuery] 숫자 카운트업 효과 0에서 지정한 숫자까지 카운트업 되는 효과입니다. 100% 500% 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 100% 500% 3. CSS .count { float: left; width: 100px; height: 100px; line-height: 95px; margin: 0 5px; border: 5px solid #ddd; -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; font-size: 15px; color: #000; text-align: center; } .num { font-size: 28px; font-weight: bold; color: #0.. [jQuery] 화면 가운데 레이어 팝업 띄우기 (중앙 정렬/가운데 고정) 버튼 클릭 시 레이어 팝업을 화면 중앙에 띄우는 방법입니다. 팝업 열기 팝업 내용 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 팝업 열기 팝업 내용 3. CSS .btn_open { padding: 5px 10px; background: #759587; border: 0; color: #fff; cursor: pointer; } #mask { display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opa.. 이전 1 2 3 4 5 ··· 9 다음
