일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- IOS
- 비전공 개발자
- iPhone
- 백엔드
- CSS
- 풀스택
- 애니메이션
- image
- javascript
- css3
- iOS 개발자
- Animation
- ipad
- 개발자
- 비전공자
- jQuery
- keyframes
- 자바스크립트
- hover
- button
- effect
- 프론트엔드
- MAC
- xcode
- SWIFT
- html5
- HTML
- front-end
- php
- react
- Today
- Total
목록background (8)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cySutf/btrZKn9TOKt/xvZ7IoWgTRgDF27ddk9Zd0/img.png)
* { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; background-color: #0A4B78; display: flex; justify-content: center; align-items: center; } .container { width: 367px; height: 500px; position: relative; background: linear-gradient(to bottom, #01263A 0%, #4F94D4 70%, #C5d9ED 100%); box-shadow: 0 10px 20px rgba(0, 0, 0, .3), 0 10px 10px rgba(0, 0, 0, .3); border-radius: 80p..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BWVhl/btrWUHXK7uL/MBTuQaFlZFsiKGUWGKU0y1/img.png)
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .loader { position: relative; width: 60px; height: 60px; display: inline-block; background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxng7g/btrRMKZzxFL/qMmqUzcffa9snuZ9eUGhC0/img.png)
* { 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; } ...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b25H4l/btrQ27teH5z/HpmuDWLUtkk7Z9TzijHIRK/img.png)
You can right click anywhere to change the background. Blue Orange Green This website is going to look better if you turn on the backdrop-filter property : -In the address bar, type "about:config". -Click on "Accept the risk and continue". -Type "backdrop-filter" in the search bar. -If it's written "false", double click on it to turn it on. This website is going to look better on Google Chrome, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c4lPCz/btrOULtUbiV/np58Za6zNsQ65SzriiSkp1/img.jpg)
* { margin: 0; padding: 0; box-sizing: border-box; } section { position: relative; height: 100vh; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; } section i { position: relative; width: 60px; height: 60px; background-color: #222; } section i:nth-child(5n+1) { animation: animate 2s linear infinite, animateBG 5s li..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/55lWT/btrLnsXxvdE/q1SPfNZ7eHvyyDEyzcyaY0/img.jpg)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dHtMYu/btrE5r42vom/QT8dAjW5Scg4KkzDV1ogx1/img.jpg)
Background Color Picker Click me! # .center { padding-top: 70px; margin: auto; text-align: center; } .btn { margin: auto; text-align: center; } function getHex() { let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++) { color += letters[(Math.floor(Math.random() * 16))]; } return color; } function changeColor() { let hex = getHex(); document.getElementById("hex").innerHTM..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bAFej9/btrAePR2Bse/6UFQd0CLG2YVtChO3Quq81/img.jpg)
.animated-background { background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); background-size: 400% 400%; animation: animate-background 10s infinite ease-in-out; } @keyframes animate-background { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }