kgoon-Log

홈페이지의 기능이나 기타 여러가지 디자인적 요소로 많이 활용이 가능한 롤링 효과를 CSS만으로 구현하는 방법을 공유해 보고자 합니다. 텍스트 롤링 예제 미리보기 Text Rollingloading buttons forms switches cards buttonskgjs.kang2oon.com구현된 소스를 확인해 보겠습니다. HTML 소스 영역  loading buttons forms switches cards buttons CSS 소스 영역.card{position:absolute;top:50%;left:50%;transform:translate(-50%..

홈페이지 제작을 하다보면 슬라이드를 사용하는 경우가 왕왕 있습니다.슬라이드 내에 많은 기능이 들어가야 하다보면 필연적으로 jQuery와  같은 스크립트를 많이 사용하곤 합니다. 그러나 기능이 많지 않거나 브랜드, 고객사 등을 그냥 흘려보내는 용도의 홍보용 배너 같은 것을 제작할 경우도 자주 있는데 그럴 땐 굳이 스크립트 사용없이 html과 css만으로도 구현이 가능한 부분이 많이 있어 해당 방법을 공유해 보고자 합니다. 웹을 오래 전부터 사용하신 분은 태그를 아실텐데요. 현재는 사용되고 있지 않는 태그입니다. 이전 IE가 주력 브라우저 시장을 차지하고 있을 때 표준이 아닌 태그들이 정말 많이 사용된 시절이 있었네요. 갑자기 추억에 감겨 버렸네요.. 😅그 태그가 텍스트나 이미지에 스크롤 효과를 만드는..

CSS Gradient은 webkit에 의해 도입되었으나 많은 브라우져에서 호환이 되지 않는 문제로 인해 사용되어지지 않았습니다. 하지만 지금은 많은 브라우져에서 그라데이션을 지원하여 CSS 만으로도 배경에 그라데이션 효과를 줄수 있습니다. 그러나 모든 브라우져에서 CSS Gradient를 사용할 수 있는 것은 아니니 유의하시기 바랍니다. 지원 브라우져 현황 Firefox >= 3.6 MSIE > 5.5(!) Safari >= 4 Chrome Webkit Browsers 사파리와 크롬과 같은 웹킷 브라우져는 아래와 같은 규칙을 따릅니다. Firefox 3.6+ Internet Explorer Cross Browser CSS Gradient를 위해서는 위 세가지 코드를 모두 사용하여 CSS를 정의합니다. ..