일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- xcode
- jQuery
- 개발자
- button
- iOS 개발자
- 풀스택
- MAC
- 백엔드
- html5
- effect
- javascript
- php
- HTML
- 자바스크립트
- hover
- css3
- ipad
- react
- IOS
- CSS
- keyframes
- 비전공자
- front-end
- 비전공 개발자
- image
- iPhone
- 프론트엔드
- 애니메이션
- Animation
- SWIFT
- Today
- Total
목록css3 (310)
비전공자 개발일기
Sign in Forget Password Sign up * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EFF0F4; } .container { position: relative; left: -80px; display: flex; justify-content: center; align-items: center; } .container .drop { position: relative; width: 350px; height: 350px; box-shadow: inset 20..
Height Width Copy *{ padding: 0; margin: 0; box-sizing: border-box; outline: none; font-family: "Roboto Mono",monospace; font-weight: 400; color: #010120; } body{ background-color: #008dff; } .wrapper{ background-color: #ffffff; width: 45%; min-width: 550px; padding: 30px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 8px; } .output{ background-color: #..
Heads: 0 Tails: 0 Flip Coin Reset *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik",sans-serif; } body{ height: 100%; background: linear-gradient( to right, #575ce5 50%, #f9fbfc 50% ) fixed; } .container{ background-color: #ffffff; width: 400px; padding: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; box-shadow: 15px 30px 35px rgba(0,0,0,0.1)..
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .conic { position: relative; z-index: 0; width: 400px; height: 300px; margin: 20px; padding: 2rem; border-radius: 10px; overflow: hidden; } .conic::before { content: ""; position: absolute; z-index: -2; top: -50%; left: -50%; width:..
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --clr: #4FB6FF; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--clr); } .box { position: relative; width: 400px; height: 320px; background: #FFF radial-gradient( var(--clr) 0px, var(--clr) 7px, transparent 0px ); background-size: 20px 20px; background-position: -10px; } ...
Button Button Button * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #27282C; } .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 120px; } .container a { position: relative; padding: 16px 30px; font-size: 1.5em; color: var(--clr); text-shadow..
Card Title Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit aliquid atque porro ipsum minima nesciunt quo excepturi corrupti animi? Quo natus non soluta minus vitae? Card Title Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit aliquid atque porro ipsum minima nesciunt quo excepturi corrupti animi? Quo natus non soluta minus vitae? Card Title Lorem ipsum dolor sit, amet..
RGB HEX *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins",sans-serif; } body{ width: 100%; background-color: #976efa; } .container{ background-color: #ffffff; width: 80vmin; min-width: 250px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; padding: 50px 10px; ..