목록css3 (310)

비전공자 개발일기

Isometric Cards

ROCKET Lorem ipsum dolor sit amet consectetur adipisicing elit. Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Code Lorem ipsum dolor sit amet consectetur adipisicing elit. * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f3f3f3; overflow: hidden; width: 1200px; margin: ..
HTML _CSS 2022. 5. 28. 01:06
Sly.js example Naver App Menu(수평 스크롤)

https://darsa.in/sly/ Sly Reward the developer Introduction Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support. It can be used as a simple scrollbar replacement, as an advanced item based navigation tool, or as a great navigation a darsa.in 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 메뉴10 메뉴11 메뉴12
JQuery 2022. 5. 27. 01:52
Page Scroll Effect

SCROLL * { margin: 0 ; padding: 0; } body { background-color: #111; height: 200vh; } section { position: absolute; width: 100%; height: 100%; background: #2abbff; } section p{ font-size: 100px; color: #6667ab; text-align: center; position: absolute; top: 70%; left: 39%; z-index: 3; } section .curve { width: 100%; height: 200px; position: absolute; bottom: -200px; transform-origin: top; } section..
HTML _CSS 2022. 5. 26. 00:05
Download Button Animation

Download Downloading Open File Download Downloading Open File .button.dark-single { --background: none; --rectangle: #242836; --success: #4bc793; } .button.white-single { --background: none; --rectangle: #f5f9ff; --arrow: #275efe; --success: #275efe; --shadow: rgba(10, 22, 50, .1); } .button.dark { --background: #242836; --rectangle: #1c212e; --arrow: #f5f9ff; --text: #f5f9ff; --success: #2f3545..
Javascript 2022. 5. 25. 00:14
DETECT USER BROWSER

Browser /* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(#252930 50%, #675AFE 50%); } ::selection{ color: ..
Javascript 2022. 5. 24. 01:19
SWIPE.js jQuery

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Slide 1 Slide 2 Slide 3 ... html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0..
JQuery 2022. 5. 23. 01:08
DOWNLOAD BUTTON COUNTDOWN TIMER

DOWNLOAD FILES Please Wait.... If the download did't start automatically, CLICK here * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .download-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 .5rem; } .dow..
Javascript 2022. 5. 22. 00:28
PHONE NUMBER VAILDATION

Phone Number Validation With Simple Javascript CHECK body { border: 2px solid #007BFF; background-color: #EFEFEF; } .container { margin: 250px 0; } .container h1 { color: #007BFF; } .container .input-group input { border-color: #007BFF; border-width: 3px; border-radius: 25px 0 0 25px !important; } .container .input-group .input-group-btn button { border-radius: 0 25px 25px 0 !important; } $(docu..
JQuery 2022. 5. 21. 00:07
이전 Prev 1 ··· 31 32 33 34 35 36 37 ··· 39 Next 다음