목록css3 (310)

비전공자 개발일기

Flight Loader

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #667ABA; } .loader { position: relative; width: 120px; height: 120px; } .loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(18deg * var(--i))); } .loader span::before { content: ''; position..
HTML _CSS 2022. 7. 24. 00:51
Modern CSS Button Glowing Effect

Button Button Button * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; gap: 40px; background-color: #27282C; } a { position: relative; background-color: #444; color: #FFF; text-decoration: none; text-transform: uppercase; font-size: 1.5em; letter-spacing: .1em; font-weight: 400; padd..
HTML _CSS 2022. 7. 23. 09:32
Rotating 3D Image Cube

* { background-color: #2598EB; } .wrapper { --imagesize: 300px; --transform: calc(var(--imagesize) / 2); perspective: 800px; } .wrapper:hover { transform: scale(1.5); } .cube { transform-style: preserve-3d; position: relative; width: var(--imagesize); height: var(--imagesize); animation: rotate 10s ease-in-out infinite; transform-origin: center center; margin: 250px auto; } .side { position: abs..
HTML _CSS 2022. 7. 22. 00:10
Raniy Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #181C1F; } .container { position: relative; height: 400px; border-bottom: 2px solid #FFF; } .cloud { position: relative; top: 50px; width: 320px; height: 100px; background-color: #FFF; border-radius: 100px; } .cloud::before { content: ""; p..
HTML _CSS 2022. 7. 21. 00:25
Animated Login Form

Login Form Email Show Password Password Forgot password? html, body { align-items: center; background: #f2f4f8; border: 0; display: flex; font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; justify-content: center; margin: 0; padding: 0; } form { --background: white; --border: rgba(0, 0, 0, 0.125); --borderDark: rgba(0, 0, 0, 0.25); --borderDarker: rgba(0, 0, 0, 0.5); --bgC..
HTML _CSS 2022. 7. 20. 00:13
Mordern 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. 7. 19. 00:14
Broken Effect

https://bennettfeely.com/clippy/ Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com * { margin: 0; padding: 0; box-sizing: border-box; } body { di..
HTML _CSS 2022. 7. 18. 00:41
3D Interactive Card Hover

body { margin: 0; background-color: #eee; background-image: url("https://images7.alphacoders.com/938/thumb-1920-938300.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh; overflow: hidden; } .overlay { background-color: rgba(255, 255, 255, 0.4); width: 100vw; height: 100vh; position: absolute; } .card { backdrop-filter: blur(5px); min-width: 3..
JQuery 2022. 7. 17. 00:39
이전 Prev 1 ··· 24 25 26 27 28 29 30 ··· 39 Next 다음