목록range (3)

웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Input range kawaii style (HTML + CSS only)

input tyle="range" 슬라이드 디자인 입니다.사이트 꾸미기에 좋을거 같습니다.HTML과 CSS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML  CSSbody{  margin: 0;  min-height: 100vh;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;  flex-wrap: wrap;  gap: 2em;  background: #f6f8fe;} [type="range"].kawaii {  --base: #fe8ce4;  --light: color-mix(in sRGB, var(--base) 60%, #fff);  --lighter: color-mix..
웹프로그램밍 자료실/기타 자료 2025. 3. 25. 09:11
[해피CGI][cgimall] 범위를 표현하는 인풋 슬라이드 Range With Sliding Value

해당 인풋은 사용자에게 더욱 직관적인 인터페이스를 제공해 줄 수 있습니다. 슬라이드를 이동할 때마다 범위가 나타납니다. 웹페이지를 좀 더 역동적이고 매력적으로 만들 수 있습니다. HTML 구조 Range CSS 소스 * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --white: hsl(0,0%,100%); --lt-gray: hsl(var(--hue),10%,95%); --primary0: hsl(var(--hue),90%,95%); --primary1: hsl(var(--hue),90%,90%); --primary3: hsl(var(--hue),90%,50%); --primary4: hsl(var(-..
웹프로그램밍 자료실/HTML 자료 2023. 11. 6. 09:44
[해피CGI][cgimall] % 물방울이 표시되는 CSS Range Slider

CSS와 JS를 이용하여 이동한 값에 따라 색상이 변경되며, 값을 변경하면 물방울표시가 출력되어 %값을 확인하기 좋은 range slider 입니다. 홈페이지 또는 첨부파일로 자세한 소스를 확인해보실 수 있으며, 스크립트 소스 중 위에 표시된 소스로 인해 filter값이 %값에 따라 다르게 출력되어 색상이 변경됩니다.
웹프로그램밍 자료실/기타 자료 2021. 3. 12. 09:30
Prev 1 Next