목록css3 (310)

비전공자 개발일기

Create Hover Effect

Home About Services Work Team Contact * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #FFF; } ul li{ list-style: none; text-align: center; } ul li a { color: #333; text-decoration: none; font-size: 2em; font-weight: 300; padding: 5px 20px; display: i..
HTML _CSS 2022. 12. 12. 00:50
Get User Location

Click on the 'Get Location' Button Get Location * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(45deg, #0076ec, #42a1ff); } .container { width: 80vw; max-width: 37.5em; background-color: #ffffff; padding: 3em 1.8em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 0..
Javascript 2022. 12. 11. 00:35
Infinite Ticker

Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not c..
HTML _CSS 2022. 12. 10. 00:59
Calculator basic operator

* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; } body { height: 100vh; background: linear-gradient(to bottom, #f9544c 50%, #090c31 50%); } .calculator { width: 400px; background-color: #15173c; padding: 50px 30px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 5, 24, 0.4); }..
Javascript 2022. 12. 9. 00:29
Create Email Validation

Email Id Please Enter A Valid Email Id *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient( 135deg, #61d954, #2ebf75 ); } .container{ width: 400px; background-color: #ffffff; padding: 50px 30px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 10px; box-shadow: 25px 25px 30px rgba(0,0,0,0...
Javascript 2022. 12. 8. 00:37
Password Strength Checker with color

Password Strength Check * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .container { width: 400px; padding: 30px 30px 70px 30px; background-color: #333; display: flex; justify-content: center; flex-direction: column; border: 1px solid #111; gap: 10px; -webkit-..
Javascript 2022. 12. 7. 08:33
Image Distribution Effect

* { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; overflow: hidden; background-color: #FFF; } .container { display: flex; flex-wrap: wrap; transform-style: preserve-3d; perspective: 1000px; } .container .block { width: 5vw; height: 5vw; background: url('img.jpg'); background-size: cover; background-attachment: fixed; background-position: center; t..
Javascript 2022. 12. 6. 00:37
3D Flip Product Card

New Apple Watch $500 Buy Now * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #09383E; } .card { width: 300px; height: 400px; background-color: #FFF; transform-style: preserve-3d; transform: perspective(2000px); transition: 1s; box-shadow: inset 300px 0 50px rgba(0, 0,..
HTML _CSS 2022. 12. 5. 00:29
이전 Prev 1 ··· 7 8 9 10 11 12 13 ··· 39 Next 다음