목록jQuery (45)

비전공자 개발일기

Glitchy Loading Indicator

LOADING... @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400); html, body { height: 100%; } body { background: radial-gradient(#222922, #000500); font-family: 'Source Code Pro', monospace; font-weight: 400; overflow: hidden; padding: 30px 0 0 30px; text-align: center; } .word { bottom: 0; color: #fff; font-size: 2.5em; height: 2.5em; left: 0; line-height: 2.5em; margin: aut..
Javascript 2023. 2. 26. 01:32
Confetti Text Effect

OLLEH!!! body { height: 100vh; display: grid; place-items: center; font-family: "bebas", sans-serif; background-color: #000; } .particletext { text-align: center; font-size: 48px; position: relative; color: #fff; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti..
HTML _CSS 2023. 2. 9. 23:17
Card Slider

Postcards From Italy Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Bunker Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Small Mountain Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Walking On a Dream Lorem ipsum dolor sit amet, consecte..
JQuery 2022. 11. 4. 00:48
Floating Menu

*{ margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } body{ background:#311b92; position:relative; } .share{ display:block; width:60px; height:60px; background:#ff9100; position:absolute; top:300px; left:50%; z-index:999; text-align:center; overflow:hidden; line-height:65px; font-size:1.5em; color:#fff; -moz-box-shadow: 0px 3px 9px rgba(0,0,0,.5); -webkit-box-shadow: 0p..
JQuery 2022. 10. 15. 00:25
Random IP Address Generator

Random IPv4 Generator Range Start End Amount Output Generate Copy Download Page loaded successfuly @import url('https://fonts.googleapis.com/css?family=Kodchasan&display=swap'); ::-moz-selection { color: #ffffff; background: #000000; } ::selection { color: #ffffff; background: #000000; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appear..
JQuery 2022. 10. 9. 00:33
Stopwatch

00 : 00 : 00 : 00 Your time starts now Stop * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Roboto; font-weight: 300; background: linear-gradient(to left, #635bfc, #8ffcf0); display: flex; justify-content: center; align-items: center; height: 100vh; } .container { width: 800px; margin: 150px auto; color: #ffffff; text-align: centre; } .wrap { display: inline-block; min-w..
Javascript 2022. 9. 27. 00:22
Snake Game

JavaScript Snake Game Score: You lose! Play html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5, h6,p,blockquote,pre,a,abbr,acronym, address,big,cite,code,del,dfn,em, img,ins,kbd,q,s,samp,small,strike, strong,sub,sup,tt,var,b,u,i,center, dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot, thead,tr,th,td,article,aside,canvas,details,embed, figure,figcaption,footer,header,h..
JQuery 2022. 9. 14. 00:15
Multi-Step Form

Account Setup Social Profiles Personal Details Create your account This is step 1 Social Profiles Your presence on the social network Personal Details We will never sell it /*custom font*/ @import url(https://fonts.googleapis.com/css?family=Montserrat); /*basic reset*/ * {margin: 0; padding: 0;} html { height: 100%; /*Image only BG fallback*/ /*background = gradient + image pattern combo*/ backg..
JQuery 2022. 8. 18. 23:51
이전 Prev 1 2 3 4 ··· 6 Next 다음