목록css3 (310)

비전공자 개발일기

Chatbot

Ask Your Question?? Yeah,ask Some Question Answer Appering Hear * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; font-family: sans-serif; padding: 10em 10em; background: url(./bg.jpg); opacity: 0.5; background-position: center; background-repeat: no-repeat; background-position: 100% 20%; background-size: cover; display: flex; align-items: center; justify-c..
Javascript 2022. 7. 8. 22:10
QR code Generator

GENERATE QR CLEAR * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #ECECEC; font-family: Arial, Helvetica, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { padding: 40px 60px; background-color: #FFF; display: flex; align-items: center; border: 5px solid rgba(190, 190, 190, 0); box-shadow: 0 0 15px rgba(100, 100, 1..
Javascript 2022. 7. 7. 00:15
Heart Animation Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; pointer-events: none; filter: drop-shadow(0 0 15px rgba(0, 0, 0, .6)); animation: fadeInOut 1s linear infinite } @keyframes fadeInOut { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } } span::before { content: ''; position: absolute; width: 100%;..
Javascript 2022. 7. 6. 00:30
Javascript Particles

* { margin: 0; padding: 0; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; background-color: #F00; width: 10px; height: 10px; pointer-events: none; border-radius: 50%; } span::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #FFF; animation: moveParticles 2s linear infinite; } @keyframes ..
Javascript 2022. 7. 5. 00:02
CSS Wave

Simple CSS Waves @import url(//fonts.googleapis.com/css?family=Lato:300:400); body { margin:0; } h1 { font-family: 'Lato', sans-serif; font-weight:300; letter-spacing: 2px; font-size:48px; } p { font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size:14px; color: #333333; } .header { position:relative; text-align:center; background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172..
HTML _CSS 2022. 7. 4. 00:51
Analog Clock

12 3 6 9 : : @font-face { font-family: "Digital-7"; font-style: normal; font-weight: 400; src: local("Digital-7"), local("Digital-7-Regular"), url(https://allfont.net/cache/fonts/digital-7_b73ef91485431ac0271f24009e14ccee.woff) format("woff"), url(https://allfont.net/cache/fonts/digital-7_b73ef91485431ac0271f24009e14ccee.ttf) format("truetype"); } :root { --clock-size: 300px; } * { box-sizing: b..
Javascript 2022. 7. 3. 00:44
Sumoselect

https://hemantnegi.github.io/jquery.sumoselect/ Jquery.sumoselect by Hemant Negi jquery.sumoselect jquery.sumoselect.js - A cross device Single/Multi Select jQuery Select plugin. LIVE DEMO HERE Sumoselect full : jquery.sumoselect.js Minified : jquery.sumoselect.min.js A jQuery plugin that progressively enhances an HTML Select Box into hemantnegi.github.io https://codepen.io/sang-ulae-mustance/pe..
JQuery 2022. 7. 2. 10:56
Google Search Clone

Sign in Images Gmail Google Search I'm Feeling Lucky ul { list-style-type: none; overflow: hidden; } li { float: right; } li a { color: #000; display: block; text-align: center; padding: 10px 10px; text-decoration: none; font-size:14px; } li a:hover { text-decoration: underline; } .grid{ height:23px; position:relative; bottom:4px; } .signbutton{ background-color: #4885ed; color: #fff; border:non..
HTML _CSS 2022. 7. 1. 01:03
이전 Prev 1 ··· 26 27 28 29 30 31 32 ··· 39 Next 다음