Es bastante fácil desarrollar una aplicación del lado del cliente. Los colores primarios como sabemos son Rojo(R), Verde(G), Azul(B) y mezclándolos podemos formar cualquier color que queramos.
En este artículo, aprenderemos a obtener el valor RGB del usuario y usaremos CSS para formar el color usando la propiedad RGB (rojo, verde, azul).
Requisito previo: Se requieren conocimientos básicos de algunas tecnologías front-end como HTML, CSS, JavaScript.
Código HTML:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href= "https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet"> </head> <body> <div class="neumorphism-3"></div> <div class="inpt"> <input type="number" id="red"> <input type="number" id="green"> <input type="number" id="blue"> </div> <h1 class="rainbow-text">--RGB-TO-COLOR--</h1> <script src="script.js"></script> </body> </html>
Código CSS: el CSS contiene algunas líneas adicionales para un efecto de desplazamiento genial. El siguiente código es el contenido del código «styles.css» utilizado en el código HTML anterior.
Nombre de archivo: estilo.css
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #f7f7f7;
padding-top: 14%;
}
.neumorphism-3 {
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: -3px -3px 7px #e9e9e9a9,
3px 3px 7px #e9e9e9a9;
position: absolute;
top: 40px;
left: 490px;
}
.neumorphism-3:hover {
top: 30px;
box-shadow: -3px -3px 7px #999999a9,
-3px -3px 12px #e9e9e9a9,
3px 3px 7px #999999a9,
-3px -3px 12px #e9e9e9a9;
animation: uplift 0.1s 1 linear;
}
.neumorphism-3:not( :hover) {
animation: downlift 0.1s 1 linear;
top: 40px;
}
@keyframes uplift {
0% {
top: 40px;
}
25% {
top: 37.5px;
}
50% {
top: 35px;
}
75% {
top: 32.5px;
}
100% {
top: 30px;
}
}
@keyframes downlift {
0% {
box-shadow: -3px -3px 7px #999999a9,
-3px -3px 12px #e9e9e9a9,
3px 3px 7px #999999a9,
-3px -3px 12px #e9e9e9a9;
top: 30px;
}
25% {
box-shadow: -3px -3px 7px #b3b3b3a9,
-3px -3px 12px #e9e9e9a9,
3px 3px 7px #b3b3b3a9,
-3px -3px 12px #e9e9e9a9;
top: 32.5px;
}
50% {
top: 35px;
box-shadow: -3px -3px 7px #d6d6d6a9,
-3px -3px 12px #e9e9e9a9,
3px 3px 7px #d6d6d6a9,
-3px -3px 12px #e9e9e9a9;
}
75% {
top: 37.5px;
box-shadow: -3px -3px 7px #f3f3f3a9,
-3px -3px 12px #e9e9e9a9,
3px 3px 7px #f3f3f3a9,
-3px -3px 12px #e9e9e9a9;
}
100% {
box-shadow: -3px -3px 7px #e9e9e9a9,
3px 3px 7px #e9e9e9a9;
top: 40px;
}
}
div.input {
position: absolute;
top: 450px;
left: 550px;
}
div.input input {
height: 30px;
width: 60px;
font-size: 30px;
color: seashell;
text-align: center;
opacity: 0.7;
border: none;
border-radius: 4px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
/* Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.rainbow-text {
background-image: linear-gradient (
to left, violet, indigo, blue,
green, yellow, orange, red);
width: 300px;
height: 50px;
-webkit-background-clip: text;
color: transparent;
font-family: "Itim";
text-align: center;
position: relative;
top: 340px;
left: 500px;
}
Código JavaScript: El siguiente es el código JavaScript «script.js» utilizado en el código HTML anterior.
Nombre de archivo: script.js
Javascript
let red = document.getElementById('red');
let green = document.getElementById('green');
let blue = document.getElementById('blue');
let box = document.querySelector('div.neumorphism-3');
let r = 0, g = 0, b = 0;
red.addEventListener("keyup", function (event) {
r = red.value;
if (!r)
r = 0;
box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
green.addEventListener("keyup", function (event) {
g = green.value;
if (!g)
g = 0;
box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
blue.addEventListener("keyup", function (event) {
b = blue.value;
if (!b)
b = 0;
box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
Salida: después de ejecutar el archivo, puede elegir valores específicos para R, G, B y obtener los colores deseados.
RGB
Publicación traducida automáticamente
Artículo escrito por sauparnagupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA