목록css3 (310)

비전공자 개발일기

Water Drop Card

01 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 02 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 03 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-c..
HTML _CSS 2022. 11. 18. 00:31
BG CSS Effect

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #001F25; } .loader { position: relative; width: 300px; height: 300px; } .loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(36deg * var(--i))); } .loader span::before { con..
HTML _CSS 2022. 11. 17. 16:58
Palindrome Checker

Check *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #b156fe; } .container{ width: 35%; min-width: 450px; background-color: #ffffff; padding: 50px 30px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; box-shadow: 0 20px 25px rgba(0,0,0,0.18); } .container *{ font-family: "DM Sans", sans-serif; outline: ..
Javascript 2022. 11. 16. 15:37
Toggle Button Animation

*, *:before, *:after { border: 0; box-sizing: border-box; margin: 0; padding: 0; } body { background: linear-gradient(#fff, #ccc); display: flex; height: 100vh; --on: #88e661; --off: #f0f0f0; --transDur: 0.6s; } input { position: fixed; transform: translateX(-100%); } .toy-toggle { background: radial-gradient(at top left, #fff 10%, #fff0 20%), radial-gradient(at top right, #fff 20%, #e4e4e4 35%)..
HTML _CSS 2022. 11. 15. 14:26
Temperature Convertor

Celsius Fahrenheit *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; font-size: 18px; } body{ background-color: red; } .wrapper{ width: 450px; background-color: #ffffff; padding: 70px 40px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; box-shadow: 0 20px 25px rgba(0,0,0,0.25); border-radius: 8px; display: flex;..
Javascript 2022. 11. 14. 14:04
Number Guessing Game

I am thinking of a number between 1-100. Can you guess it? GUESS No. Of Guesses: 0 Guessed Numbers are: None *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient( to right, #7f53ac, #657ced ); } .container{ position: absolute; width: 50%; min-width: 580px; transform: translate(-50%,-50%); top: 50%; left: 50%; background-color: #f..
Javascript 2022. 11. 13. 18:01
Right Click Menu

You can right click anywhere to change the background. Blue Orange Green This website is going to look better if you turn on the backdrop-filter property : -In the address bar, type "about:config". -Click on "Accept the risk and continue". -Type "backdrop-filter" in the search bar. -If it's written "false", double click on it to turn it on. This website is going to look better on Google Chrome, ..
Javascript 2022. 11. 12. 12:14
Responsive Services Section

Designing Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More Development Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More SEO Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-heig..
HTML _CSS 2022. 11. 11. 21:30
이전 Prev 1 ··· 10 11 12 13 14 15 16 ··· 39 Next 다음