번개애비의 라이프스톼일
인터랙티브 웹을 구현하기 위한 깨알같은 소스코드들 본문
신용카드 카드 입력창
신용카드를 입력받을때 좀더 인터렉티브하게 받을 수 있습니다.
CVV번호를 입력할때는 카드의 뒷면으로 넘어간다.
https://codepen.io/CodeWorks4U/pen/NWBMxPM
슬라이더
앞글자를 이용하여 좀더 다이나믹한 슬라이더를 만들수 있다.
https://codepen.io/CodeWorks4U/pen/poZBYqL
시간에 따라 바뀌는 배경색
배경색상이 5초간격으로 스무스하게 변경된다.
body{
animation:changeBG 5s infinite;
alternate linear;
}
@keyframes changeBG{
0%{
background:#ee6055;
}
25%{
background:#60d394;
}
50%{
background:#aaf683;
}
75%{
background:#ffd97d;
}
100%{
background:#ff9b85;
}
}
CSS로 그리는 로딩 사이트
움짤(gif)로 만다는 로딩이 아니라, CSS를 이용하여 보다 매끄럽게 로딩을 만들수 있다.
사이트에 접속하면 다양한 예제들을 볼 수 있다.
그라데이션 만드는 사이트
다양한 그라데이션을 만들어주는 사이트이다.
많은 옵션들을 지원하기 때문에 디자이너가 의도한대로 그라데이션을 만들어줄 수 있다.
웨이브를 만들어주는 사이트
물결모양을 만들어줄 수 있다.
애니메이션까지 적용하면 물결치는것 까지도 구현이 가능.
CSS 애니메이션 툴킷 사이트
다양한 애니메이션 효과들을 가져다가 사용할 수 있다.
CSS 카드 디자인 세트
카드 디자인과 각각의 애니메이션을 적용할 수 있는 예시들을 모아둔 사이트이다.
https://freefrontend.com/css-cards/
사이즈에 반응하는 그리드 예제
반응형 UI를 구성할때 그리드를 사용하면 그리드 영역안에서 요소들을 깨지지 않고 자연스럽게 배치할 수 있다.
.grid{
display:grid;
grid-template-columns:repeat(auto-fil, minmax(8rem, 1fr));
grid-auto-rows: 6rem;
}
마우스오버되지 않은 다른 영역을 흐리게
보통 마우스오버가 되는 대상을 위주로 스타일이 적용되지만,
:not() 옵션을 통해 그외 다른 대상들의 스타일에도 적용할 수 있다.
https://codepen.io/Parth-webdev/pen/qByNgVz
그림자효과를 만들어주는 사이트
단순한 그림자가 아니라 그럴싸한 그림자효과를 사용할 수 있다.
가로스크롤을 이용한 슬라이더
스크롤에 따라 반응하는 슬라이더를 확인할 수 있다.
롤링배너등에서 사용하면 좋을듯!
https://codepen.io/coding_dev_/pen/mdLJKjN
'IT' 카테고리의 다른 글
카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing) (31) | 2023.05.04 |
---|---|
24종 택배회사별 운송장번호 조회 URL (0) | 2023.03.30 |
폴리곤과 폴리곤을 비교하여 겹쳐졌는지 확인하기 (Polygon and Polygon Overlapping for PHP & Javascript) (0) | 2022.12.27 |
폴리곤 좌표와 검색할 좌표를 비교하여 해당 좌표가 폴리곤안에 들어와있는지 확인하는 PHP & Javascript함수 (point-in-polygon 알고리즘) (0) | 2022.12.26 |
CentOS 7.x Minimal에서 intel I219 랜카드 인식 불가 시 설치방법 (0) | 2022.11.15 |