목록Color (6)

비전공자 개발일기

SafeArea Color Control

https://github.com/WallabyStuff/SafeAreaBrush GitHub - WallabyStuff/SafeAreaBrush Contribute to WallabyStuff/SafeAreaBrush development by creating an account on GitHub. github.com 1. pod init -> podFile -> pod 'SafeAreaBrush' 입력 후 저장 -> pod install import UIKit import SafeAreaBrush class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() fillSafeArea(position: ...
SWIFT 2023. 3. 6. 19:39
Multi Colored Text

Avengers ENDGAME * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-1: #186CB8; --color-2: #2A9A9F; --color-3: #F1B211; --color-4: #E83611; --color-5: #F9002F; } .wrapper { background-color: #000; line-height: 1; display: grid; place-items: center; min-height: calc(100vh - 16px); } h1 { font-size: 10vw; font-weight: 900; width: --webkit-min-content; width: --moz-min-content; wi..
HTML _CSS 2023. 1. 10. 00:24
RGB - HEX Converter

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; ..
Javascript 2022. 11. 19. 11:35
Color Switch Animated Login Form

Login Forgot Password Sign up * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #1DD1A1; transition: .5s; } .login { padding: 50px; background-color: #FFF; width: 400px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 25px 50px rgba(0, 0, 0, .1); } .logi..
Javascript 2022. 10. 7. 00:32
Cube Hover

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background-color: #25335B; min-height: 100vh; } .container { position: relative; top: -80px; transform: skewY(-20deg); animation: animate 5s linear infinite; } @keyframes animate { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } } .container .cube { z-index:..
HTML _CSS 2022. 9. 30. 07:22
Random Color Generator

Welcome to Random Color Generator Click on the HexCode to Copy Generate #967b28 #df9d4f #af704f #97013b #14ae2e * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to right, #967b28 0%, #967b28 20%, #df9d4f 20%, #df9d4f 40%, #af704f 40%, #af704f 60%, #97013b 60%, #97013b 80%, #14ae2e 80%, #14ae2e 100%); } #pallete1, #pallete2, #pallete3,#pallete..
Javascript 2022. 5. 15. 01:02
이전 Prev 1 Next 다음