목록Programming (564)

비전공자 개발일기

Custome Upload File

Choose File(s) body{ background: no-repeat center url("https://i.postimg.cc/VLTVtKwp/image.jpg"); background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .file-upload { display: flex; justify-content:center; align-items: center; font-size: 15px; } .file-upload__input { display: none; } .file-upload__button { -webkit-appearance: ..
HTML _CSS 2023. 2. 11. 00:08
Neon Love

body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; } var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Initialize the GL context var gl = canvas.getContext("webgl"); if (!gl) { console.error("Unable to initialize WebGL."); } //Time var time = 0.0; //************** Shader sources ********..
HTML _CSS 2023. 2. 10. 00:09
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
Send Button Animation

Send Message body { display: grid; place-items: center; height: 100vh; background: #000; } .btn { background: #49D75C; border: none; outline: none; cursor: pointer; border-radius: 35px; font-size: 1rem; font-weight: bold; color: #FFF; display: grid; place-items: center; transition: all 0.25s ease; position: relative; width: 210px; height: 60px; overflow: hidden; } .btn i { font-size: 1.45rem; po..
HTML _CSS 2023. 2. 8. 18:31
Bouncing Ball

body { background-color: #333; } .wrapper { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 23rem; background-color: #333; overflow: hidden; } .wrapper::before { background-color: #FFF; content: ""; position: absolute; border-radius: 1rem; height: 0.15rem; left: 2rem; right: 2rem; bottom: 2rem; } .wrapper .ball { background-color: #FFF; borde..
HTML _CSS 2023. 2. 7. 00:20
Pulse effect on button hover

Hover me *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: grid; place-items: center; background: #151515; } .btn { font-family: sans-serif; font-weight: 700; background-color: #FFF; color: #151515; } .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; padding: 15px 40px; display: inline-block; border-radius: 100p..
HTML _CSS 2023. 2. 6. 19:17
Cocacola

cocacola Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus reprehenderit ex iste ea nobis, quis blanditiis amet nemo, aspernatur hic dolore commodi quia voluptatum adipisci soluta doloribus iusto, neque ipsa! Explore More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #15..
HTML _CSS 2023. 2. 5. 00:25
Movie Streaming Website

MOVIES. Features Pricing Sign Up / Log In ☰ Features Pricing Sign Up / Log In Stream Any Movie at Anytime with No Individual Movie Costs or Rental Fees. TRY IT FREE Thousands of movies with no rental fees. Our monthly plan gives you unlimited access to our movie library. Forget the theaters! Exclusive access to movies in theaters on release date. NEW 4K MOVIES VIEW MORE Watch your favorite movie..
HTML _CSS 2023. 2. 4. 00:19
이전 Prev 1 ··· 3 4 5 6 7 8 9 ··· 71 Next 다음