목록HTML _CSS (226)

비전공자 개발일기

Blob Effect Micro Interaction

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .blob-effect { position: relative; width: 200px; height: 200px; display: grid; place-items: center; } .blob-effect span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #A9FF68; border..
HTML _CSS 2023. 1. 22. 00:18
Animated Working Analog Clock

12 3 6 9 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; background-color: #ACBACA; min-height: 100vh; } .clock { width: 300px; height: 300px; background-color: #C9D5E0; display: flex; justify-content: center; align-items: center; border-radius: 50px; box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, .1), i..
HTML _CSS 2023. 1. 20. 00:09
Responsive Tabs

CSS Tabs Product Options Shipping Published Sweep + Slide Dog Toy 1 The Sweep + Slide is an indoor dog toy with a sleek base designed to glide across any floor. Not only does this toy stimulate your dog's natural chase instincts, but it also sweeps away floor dust and grime with a replaceable sweeper bottom cover. Tab 2 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te..
HTML _CSS 2023. 1. 19. 00:54
3D Cube Slider

.gallery { --s: 250px; /* the size */ display: grid; transform-style: preserve-3d; --_p: perspective(calc(2.5*var(--s))); animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5); } .gallery img { grid-area: 1/1; width: var(--s); aspect-ratio: 1; object-fit: cover; transform: var(--_t,) translateZ(calc(var(--s)/2)); } .gallery img:nth-child(2) {--_t: rotateX(-90deg)} .gallery img:nth-child(3) {--_t..
HTML _CSS 2023. 1. 17. 00:03
Stylish Checkbox

*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: hsl(188deg 3% 83%); } :root { --container: 16rem; --height: 5.125rem; --ball: 4.25rem; } [type="checkbox"] { appearance: none; display: none; } .checkbox__container { transform: scale(1.2); display: grid..
HTML _CSS 2023. 1. 15. 00:49
Animated Instagram Logo

*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; background: rgb(238, 238, 238); } a#instagram { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; display: block; width: 144px; height: 144px; outline: none; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: ..
HTML _CSS 2023. 1. 14. 00:21
Animated Service Section Card UI

Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More Development Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More Launch Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; display: flex; jus..
HTML _CSS 2023. 1. 13. 00:32
Skeleton Screen

html { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; background: linear-gradient(45deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%); } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { display: grid; grid-template-columns: 28% 70%; grid-gap: 2%; background-color..
HTML _CSS 2023. 1. 12. 00:08
이전 Prev 1 2 3 4 5 6 7 8 ··· 29 Next 다음