목록HTML _CSS (226)

비전공자 개발일기

3D Animation Effect

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: radial-gradient(#785DFF, #0081E8); display: flex; justify-content: center; align-items: center; } .conatiner { position: relative; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: perspective(500px) rotateX(135deg); } .conati..
HTML _CSS 2022. 8. 8. 00:26
Scroll To Top

Main Title Bear claw gummi bears danish ice cream halvah cotton candy pastry chocolate bar. Croissant cotton candy cotton candy jelly beans shortbread cheesecake sugar plum. Marshmallow brownie liquorice jelly carrot cake bonbon jelly-o ice cream. Sweet roll cupcake tootsie roll candy sugar plum gingerbread pastry. Halvah carrot cake lemon drops cake marshmallow gingerbread pie sesame snaps. Che..
HTML _CSS 2022. 8. 6. 00:29
Text Animation

♠ POKER ♣ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } h2 { position: relative; font-size: 6em; color: #222; } h2::before { content: attr(data-text); position: absolute; color: #FFF; width: 350px; overflow: hidden; white-space: nowrap; border-right: 4px solid #FFF; filter: dro..
HTML _CSS 2022. 8. 5. 00:22
Sidebar Menu

Menu My drive Computers Shared with me Starred Trash aside { color: #fff; width: 250px; padding-left: 20px; height: 100vh; background-image: linear-gradient(30deg, #0048bd, #44a7fd); border-top-right-radius: 80px; } aside a { font-size: 12px; color: #fff; display: block; padding: 12px; padding-left: 30px; text-decoration: none; -webkit-tap-highlight-color: transparent; } aside a:hover { color: #..
HTML _CSS 2022. 8. 4. 00:14
Firework

body { background: linear-gradient(#0007, #0000), #123; margin: 0; height: 100vh; overflow: hidden; } @keyframes firework { 0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; } 50% { width: 0.5vmin; opacity: 1; } 100% { width: var(--finalSize); opacity: 0; } } /* @keyframes fireworkPseudo { 0% { transform: translate(-50%, -50%); width: var(--initialSize)..
HTML _CSS 2022. 8. 1. 00:12
Neumorphism Custom Range Slider

0 * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EDF1F4; } .box { position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; background: linear-gradient(to bottom, rgba(0, 0, 0, .05), #EDF1F4); border-radius: 40px; box-shadow: 15px 15px 20px rgba(0,..
HTML _CSS 2022. 7. 30. 00:58
WhatsApp LOGO

body{ margin: 0; padding: 0; background: lightblue; } div{ width: 70px; height: 70px; border-radius: 35px; background: #3AC371; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .white{ width: 80px; height: 80px; border-radius: 40px; background-color: #fff; box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3); } .white::before{ content: ""; top: 65px; left: -15px; border-width: 2..
HTML _CSS 2022. 7. 29. 00:13
Bubble Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .bubble { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 25px rgba(255, 255, 255, .25); animation: animate 8s ease-in-out infinite; } .bubble:nth-child(2) { position: relative; zoom: .45; ..
HTML _CSS 2022. 7. 28. 00:40
이전 Prev 1 ··· 14 15 16 17 18 19 20 ··· 29 Next 다음