elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [MOD] círculo cromático usando css
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [MOD] círculo cromático usando css  (Leído 3,561 veces)
Panic0

Desconectado Desconectado

Mensajes: 218



Ver Perfil
[MOD] círculo cromático usando css
« en: 23 Septiembre 2020, 09:56 am »

 Hola a todos,hoy en mi secundaria nos pidieron (como prueba final)hacer un círculo cromático usando css.La verdad no tengo ni idea de como poder hacer esto y ya probé de todo.  :(

Les agradecería mucho pero mucho si me dan una ayuda.


Gracias de antemano.



:-(


« Última modificación: 24 Septiembre 2020, 09:48 am por el-brujo » En línea

Los ataques de pánico suelen comenzar de forma súbita, sin advertencia.
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: Necesito ayuda :-\
« Respuesta #1 en: 23 Septiembre 2020, 13:57 pm »

Puedes usar múltiples triángulos del mismo tamaño pegados entre ellos para formar un círculo. Cada uno de un color. Después le metes un círculo del color del fondo en el centro para transformar los triángulos en cuadriláteros.
 Te dejan usar svg para hacer los triángulos? Y javascript para eventos? Yo te recomendaría 100% svg, porque es sencillo y te permite control absoluto de todo. Pero entiendo que si el ejercicio tiene el objetivo de mejorar y comprender las posibilidades de CSS tenga que ser 100% css. Entonces:
Opción1: Radial Gradients
Opción2: Triángulos y círculos
Opción3: Gradientes y semicírculos

Debe haber cientos de formas distintas de hacerlo. Por ejemplo se te puede ocurrir alguna como usar una imagen y el elemento area de html para separar los colores por píxeles xD
https://www.w3schools.com/html/html_images_imagemap.asp

Organización de los colores


En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.042



Ver Perfil
Re: Necesito ayuda :-\
« Respuesta #2 en: 23 Septiembre 2020, 15:11 pm »

Yo también tuve una tarea similar, el objetivo del profesor era aclarar el tema de los colores RGB, CMY y las relaciones entre ellas como son: colores complementarios u opuestos:

Código
  1. <div class="croma"></div>
  2.  
  3. <style>
  4.  .croma {
  5.    width: 100px;
  6.    height: 100px;
  7.    border-radius: 50%;
  8.    background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
  9.  }
  10. </style>



- Como se puede apreciar, se ven claramente los colores RGB (Red, Green y Blue | Rojo, Verde y Azul), también se ven claramente en medio de estos los colores CMY (Cyan, Magenta y Yellow | Cian, Magenta y Amarillo)

- Además se pueden ver claramente los colores complementarios u opuestos, por ejemplo el opuesto a Rojo es Cyan, esto implicaría que aumentar la cantidad de Rojo disminuiría la cantidad de Cyan y viceversa. Esto es útil cuando se trabaja con retoque fotográfico a imágenes que tengan mucho o poco de un color.

Hay otros modelos y formas de representar el círculo cromático, dependerá de como lo quiera ver tu profesor.
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Necesito ayuda :-\
« Respuesta #3 en: 23 Septiembre 2020, 16:10 pm »

Lamentablemente conic-gradient sigue estando en draft y firefox por ejemplo no lo implementa. Mientras tanto Lea Verou (que fue la que propuso desde un principio el gradiente conico), deja un polyfil.

https://projects.verou.me/conic-gradient/

Aquí hay mucha m explicada xD

https://css-tricks.com/conical-gradients-css/

Saludos
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
texto sobre circulo
Diseño Gráfico
telurico 5 3,040 Último mensaje 6 Diciembre 2005, 19:56 pm
por + enrique ZP
Rotar circulo en el gimp
Diseño Gráfico
antraXactive 0 2,734 Último mensaje 7 Diciembre 2005, 01:55 am
por antraXactive
Circulo de Oro 2006
Diseño Gráfico
Azielito 0 1,707 Último mensaje 20 Octubre 2006, 18:25 pm
por Azielito
Matemática - Círculo unitario
Dudas Generales
criskapunk 1 18,228 Último mensaje 12 Marzo 2011, 03:01 am
por Ferno
Cuadrado y circulo con JFrame
Java
fabianekggg 0 2,063 Último mensaje 15 Septiembre 2018, 07:08 am
por fabianekggg
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines