본문 바로가기

분류 전체보기

 (226)
inputmode 모바일 가상키보드 레이아웃 설정 input이나 textarea에 지정하는 inputmode는 pc버전에서는 focus했을때 아무 차이가 없지만, 모바일에서 가상 키보드가 나올때 키보드의 기본 레이아웃을 지정해준다. https://umings.github.io/file/input_test.html Document umings.github.io 위 링크 모바일에서 접속해서 확인해보면 어떻게 다른지 한눈에 확인가능. 삼성키보드 기준 화면은 아래 이미지 참고 참고 : https://mong-blog.tistory.com/entry/html-더-나은-사용자-입력을-위한-inputmode-속성
html파일 include 해서 사용하기 수십페이지짜리 프로젝트를 할때, 공통된 영역 (ex. header, footer)을 html 파일마다 코드를 써두면 나중에 혹시라도 공통영역에서 수정사항이 나왔을 때 그 수십 페이지를 다 들어가서 일일히 수정을 해야 하는 불상사가 일어날 때가 있다. 그래서 로컬에서 퍼블리셔가 작업할 때 include 용으로 header, footer는 따로 빼두고 자바스크립트로 include 해서 사용하면 편리하다. php나 java의 include처럼 html파일에서도 다른 파일 include가 가능하다! 다만, 서버통신을 거쳐야 하기 때문에 로컬환경 (ex. .html파일을 열어서 바로 볼때)에서는 안되고, 웹서버 환경 (ex. vscode liver server로 파일 열었을 때)에서만 작동하는 소스다. 그래서 개..
hover 영역만 스포트라이트(?)같은 효과 Magical Hover Effect (w/ Tutorial) https://codepen.io/Hyperplexed/pen/MWQeYLW See the Pen Magical Hover Effect (w/ Tutorial) by Hyperplexed (@Hyperplexed) on CodePen.
GSAP ScrollTrigger - Demo 회사 홈페이지 만들때 쓰긴 썼지만 어려운 ㅠㅠ scrolltrigger https://codepen.io/noeldelgado/pen/BaogqYy See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen.
The aurora (only CSS) 텍스트에 그라데이션 효과가 움직이는듯한 css https://codepen.io/ostylowany/pen/vYzPVZL See the Pen 🌌 The aurora (only CSS) by Ostylowany (@ostylowany) on CodePen.
swiper slide 효과 스와이핑 할때 효과가 괜찮은듯. https://codepen.io/TurkAysenur/pen/gORaboY See the Pen Product Showcase UI by Aysenur Turk (@TurkAysenur) on CodePen.
Simple CSS Waves https://codepen.io/goodkatz/pen/LYPGxQz See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
Animated Continuous Sections with GSAP Observer 스크롤 다운 할때 글자가 하나씩 나타나는듯한 효과. 예쁨 https://codepen.io/GreenSock/pen/XWzRraJ See the Pen Animated Continuous Sections with GSAP Observer by GreenSock (@GreenSock) on CodePen.
CodePen HomeNeumorphic Elements https://codepen.io/myacode/pen/PoqQQNM See the Pen Neumorphic Elements by Maria Marin (@myacode) on CodePen.
glowy hover effect https://codepen.io/inescodes/pen/PoxMyvX See the Pen glowy hover effect by Ines (@inescodes) on CodePen.
구름 흘러가는 효과 only css 이것도 4년전 프로젝트때 수정해서 사용한 소스! https://codepen.io/mghayour/pen/AxWBYW See the Pen Cloudy Sky by mghayour (@mghayour) on CodePen.
눈 내리는 효과 javascript 4년전에 프로젝트 할때 화면 백그라운드에 눈 내리는 효과 넣어야 할때 쓴 코드. 예전 프로젝트 살펴보다가 찾았는데 나름 괜찮았던듯. https://codepen.io/loktar00/pen/njPvwM See the Pen Its snowing! by Loktar (@loktar00) on CodePen. 이 소스를 기반으로 나는 스크립트를 조금 수정해서 아래와 같이 썼다. (마우스오버시 눈덩이 피하는것 같은 효과 빼고 개수 줄이고 등등) (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || wi..
글자수에 따라 ellipsis 처리하기 Setting a max character length 예제 : https://codepen.io/publisherkim/pen/MWZrpYG function ellipsis(elem, max) { elem.each(function () { var textLength = $(this).text().length; var text = $(this).text(); if (textLength > max) { $(this).text(text.substr(0, max - 3) + '…'); }; }); }; // use : ellipsis(selecter, maxlength); ellipsis($('.txt'), 85);
간단한 좋아요 버튼 css 애니메이션 simple like button animation 매우 간단한 linke button animation See the Pen like button animation by publisher.kim (@publisherkim) on CodePen. html like css .btn_like {width: 50px; height: 50px;background: url(https://umings.github.io/images/i_like_off.png) no-repeat center / 50px; cursor: pointer; border:0; font-size:0; margin:50px auto; display:block;} .btn_like.on {background: url(https://umings.github.io/images/i_like_on.png..
간단한 css gradient shadow animation css gradiend animation은 여러군데 활용 할수 있을듯. See the Pen css gradient animation by publisher.kim (@publisherkim) on CodePen. css @keyframes color { 0%,to {background-position: 10% 0;} 50% {background-position: 91% 0;} } .box{margin:20px auto 0; width:300px; height:300px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; position:relative; border-radius:20px;} ..
css shadow gradient 그래디언트 그림자 효과 https://alvarotrigo.com/shadow-gradients/ CSS Shadow Gradients — Generator [Fast & Easy] The CSS Shadows Gradient Generator was a tool that I was missing. One day I thought it'd be nice to add some beautiful gradients in a shadow for a web design I was working in. I then searched for a CSS generator to find the fastest way to do it, and I got alvarotrigo.com 밋밋한 box shadow가 아닌 gradient로 box shad..
scroll down button effect only css See the Pen scroll button effect only css by publisher.kim (@publisherkim) on CodePen. html SCROLL css @keyframes deco { 0% {transform: translateY(-56px);} 25% {transform: translateY(0);} 100% {transform: translateY(0);} } @keyframes big { 0% {transform: scale(1);opacity: 1;} 25% {transform: scale(1);opacity: 1;} 50% {transform: scale(2);opacity: 0;} 50.01% {transform: scale(1);opacity: 1;} 75% ..
button hover underline animation only css button에 hover시 텍스트 중간에서부터 언더라인이 scale되는 효과. See the Pen button hover css by publisher.kim (@publisherkim) on CodePen. html LINK1 LINK2 LINK3 LINK4 css .btns{text-align:center; padding:50px 0;} .btn{display:inline-block; color:#000; font-size:17px; margin:0 20px; position:relative;} .btn::after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; backgrou..
특정 요소에 opacity가 그라데이션으로 희미해지는 css 선택자 { -webkit-mask-image: linear-gradient(to right, black 93%, rgba(0, 0, 0, 0.2) 95%, transparent 97%); mask-image: linear-gradient(to right, black 93%, rgba(0, 0, 0, 0.2) 89%, transparent 97%); } swiper 등에 잘 사용할수 있을듯.
input text with animation label input text에 focus 됬을때 label이 애니메이션 되는 효과, input이 모두 채워졌을때 button에 active 효과 See the Pen input text with animation label by publisher.kim (@publisherkim) on CodePen. html 이름 휴대폰번호 고정값 샘플타이틀 확인 css .form_wrap{width:500px; margin:0 auto;} .form_list li + li{margin-top:7px;} .form_wrap .btn{line-height: 58px;height: 60px;width: 100%;font-size: 20px;font-weight: 600;border-radius: 10px;margin-top: 20..
맨위로
Total : Today :
728x90

티스토리툴바