일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- image
- keyframes
- 프론트엔드
- 비전공자
- HTML
- 개발자
- CSS
- effect
- css3
- 풀스택
- hover
- 백엔드
- MAC
- react
- 자바스크립트
- IOS
- front-end
- javascript
- php
- SWIFT
- 애니메이션
- html5
- ipad
- jQuery
- Animation
- 비전공 개발자
- iOS 개발자
- xcode
- iPhone
- button
- Today
- Total
목록프론트엔드 (470)
비전공자 개발일기
Check *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #b156fe; } .container{ width: 35%; min-width: 450px; background-color: #ffffff; padding: 50px 30px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; box-shadow: 0 20px 25px rgba(0,0,0,0.18); } .container *{ font-family: "DM Sans", sans-serif; outline: ..
*, *:before, *:after { border: 0; box-sizing: border-box; margin: 0; padding: 0; } body { background: linear-gradient(#fff, #ccc); display: flex; height: 100vh; --on: #88e661; --off: #f0f0f0; --transDur: 0.6s; } input { position: fixed; transform: translateX(-100%); } .toy-toggle { background: radial-gradient(at top left, #fff 10%, #fff0 20%), radial-gradient(at top right, #fff 20%, #e4e4e4 35%)..
Celsius Fahrenheit *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; font-size: 18px; } body{ background-color: red; } .wrapper{ width: 450px; background-color: #ffffff; padding: 70px 40px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; box-shadow: 0 20px 25px rgba(0,0,0,0.25); border-radius: 8px; display: flex;..
I am thinking of a number between 1-100. Can you guess it? GUESS No. Of Guesses: 0 Guessed Numbers are: None *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient( to right, #7f53ac, #657ced ); } .container{ position: absolute; width: 50%; min-width: 580px; transform: translate(-50%,-50%); top: 50%; left: 50%; background-color: #f..
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, ..
Designing Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More Development Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More SEO Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-heig..
Our Services Web Application Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry... Read More Highly customizable Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry... Read More Responsive design Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ..
Spin Click On The Spin Button To Start * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(135deg, #c3a3f1, #6414e9); } .wrapper { width: 90%; max-width: 34.37em; max-height: 90vh; background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 3em; border-radius:..