목록HTML _CSS (226)

비전공자 개발일기

Colorful Glowing Liquid Bowl

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #121212; } .bowl { position: relative; width: 300px; height: 300px; background-color: rgba(255, 255, 255, .1); border-radius: 50%; border: 8px solid transparent; transform-origin: bottom center; animation: animate 5s linear infinite; } @key..
HTML _CSS 2022. 9. 9. 00:24
Paper

You can edit this text Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias alias maiores commodi aspernatur maxime minima inventore. Quasi libero, atque velit assumenda obcaecati temporibus exercitationem dignissimos eaque, itaque cum dolore aliquam! Cumque, unde at dicta delectus eum minus! Itaque necessitatibus eveniet dolore repellat maxime laboriosam est molestias officiis, c..
HTML _CSS 2022. 9. 8. 00:37
Rader Loading Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; gap: 50px; } .loader { position: relative; width: 300px; height: 300px; background-color: #333; border-radius: 50%; box-shadow: 25px 25px 75px rgba(0, 0, 0, .25), 10px 10px 70px rgba(0, 0, 0, .25); border: 2px solid #222; display: fle..
HTML _CSS 2022. 9. 7. 00:37
Mario Matching Game

Mario Matching Game Reset Game * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; } h2 { margin-bottom: 30px; font-size: 2.5em; } .box { position: relative; width: 600px; height: 200px; border-bottom: 2px solid #555; display: flex; justify-content: center; align-items: center; flex-di..
HTML _CSS 2022. 9. 6. 00:39
Oxygen

co is Carbon dioxide * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #CCC; } h2 { font-size: 6em; text-align: center; } h2 span { position: relative; display: inline-block; color: #03A9F4; } h2 span:nth-child(odd) { color: #414141; line-height: 1em; letter-spacing: -1em; overflow: hidden..
HTML _CSS 2022. 9. 5. 00:48
Wave BG Button

Button * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #0C0C0C; } a { position: relative; padding: 20px 50px; display: block; text-decoration: none; text-transform: uppercase; width: 200px; overflow: hidden; border-radius: 40px; } a span { position: relative; color: #FFF; font-size: 20px..
HTML _CSS 2022. 9. 4. 21:59
Tabs Using

about Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, aperiam! history vision goals history I'm baby wolf pickled schlitz try-hard normcore marfa man bun mumblecore vice pop-up XOXO lomo kombucha glossier bicycle rights. Umami kinfolk salvia jean shorts offal venmo. Knausgaard tilde try-hard, woke fixie banjo man bun. Small batch tumeric mustache tbh wayfarers 8-bit shaman chartr..
HTML _CSS 2022. 9. 3. 00:23
Lighting Loader

THIS is CSS's Magic * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .loader { position: relative; width: 150px; height: 150px; animation: animate 24s steps(12) infinite; } @keyframes animate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } h3 { position: absol..
HTML _CSS 2022. 9. 2. 00:23
이전 Prev 1 ··· 11 12 13 14 15 16 17 ··· 29 Next 다음