Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Colores - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 8 de febrero de 2021 por Fernando M.

53 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora vamos a ver cómo cambiar los colores de los elementos en hojas de estilo, ¿vale? 00:00:00
Pero de una forma... ya hemos visto la propiedad color, pero la vamos a ver más en detalle, ¿vale? 00:00:05
Para que entendamos bien cómo cambiar los colores. 00:00:11
Entonces, vamos a crear una web, ¿vale? 00:00:14
Como la que estáis viendo en pantalla, aunque creo que no se ve todavía, un segundito. 00:00:19
Ahora, ¿vale? 00:00:25
este archivo lo vamos a llamar 00:00:26
yo lo he llamado 00:00:29
colores.html 00:00:30
¿vale? 00:00:32
vamos a hacer la estructura de la web 00:00:34
vamos a ponerle aquí 00:00:36
de título colores 00:00:40
en hojas de estilo 00:00:42
¿vale? 00:00:44
y lo que vamos a hacer es crearnos una primera etiqueta h1 00:00:45
que va a ser propiedad 00:00:48
color ¿vale? 00:00:50
porque esa va a ser la propiedad básica 00:00:52
Vale, ya lo tenemos y lo que yo voy a hacer ahora es crearme un párrafo con un texto Lorem Ix, ¿vale? 00:00:56
Y lo primero que voy a hacer aquí va a ser cambiar la tipo de letra, ¿vale? Para que nos sirva de recordatorio. 00:01:09
Pongo body, ¿vale? Perdón, primero tengo que poner style, ¿vale? No puedo poner aquí el body así directamente. 00:01:17
pongo style, eso es 00:01:24
y ahora dentro del body pongo 00:01:27
dentro de style pongo, perdón, el body 00:01:29
y aquí voy a poner font-family 00:01:31
y voy a poner arial 00:01:33
¿vale? sans-serif 00:01:34
y de dentro voy a 00:01:37
cambiarle también el tamaño 00:01:39
¿vale? y le voy a poner 1,125 00:01:40
rem, ¿vale? 00:01:43
para que sea un poquito más grande 00:01:45
vale, entonces, lo primero que voy a hacer 00:01:46
vamos a ver, nosotros siempre hemos 00:01:50
estado todo el rato modificando 00:01:52
el color de la fuente de la siguiente forma, ¿vale? 00:01:55
Nosotros cogíamos y poníamos color 00:01:59
y aquí poníamos un color que poníamos green, por ejemplo, ¿vale? 00:02:02
Y como veis, aquí en brackets me aparecen un montón de palabras clave con el color green. 00:02:06
¿Qué es lo que pasa? 00:02:13
Pues pasa que hay muchos navegadores que esas palabras clave no las entienden, ¿vale? 00:02:15
Entonces, el sistema que más se utiliza es un sistema que se llama RGB, ¿vale? 00:02:19
Entonces, el sistema que hemos utilizado, ¿vale? Sistema RG, que viene de rojo, verde y azul, ¿vale? Red, green and blue, ¿vale? 00:02:26
Entonces, tenemos dos formas de poner este código. A través del número hexadecimal, que es un número que varía entre... 00:02:42
que puede coger valores 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 y luego A, B, C, D, E, E, ¿vale? 00:02:50
Y ahora vamos a ver con un ejemplo cómo se pone. 00:02:58
Vamos a poner aquí un id, ¿vale? 00:03:01
Que va a ser color hexadecimal, ¿vale? 00:03:04
Y lo que vamos a hacer es modificar ese párrafo, ¿vale? 00:03:08
Ese id, ponemos aquí color hexadecimal. 00:03:12
y vamos a poner la propiedad color, pero en vez de poner aquí el color directamente, vamos a poner una almohadilla. 00:03:16
Y ahora vamos a poner el color utilizando el código hexadecimal, ¿vale? 00:03:25
Como hemos dicho que vamos a utilizar el sistema RGB, esto va a ir por orden. 00:03:29
Va a ir primero el rojo, luego el verde y luego el azul, ¿vale? 00:03:33
Y los valores van a variar desde 0,0, que será el mínimo, para el cual no habrá rojo, por ejemplo, 00:03:37
hasta FF que será el máximo 00:03:43
que será el color rojo 00:03:45
¿vale? o que será que 00:03:47
la componente roja, perdón, es 00:03:49
más ¿vale? entonces si yo pongo aquí 00:03:51
0000 00:03:54
¿vale? sería que el rojo 00:03:56
es máximo, el verde es mínimo 00:03:59
y el azul es mínimo 00:04:01
por lo tanto como veis el texto parece rojo 00:04:02
¿vale? de hecho si yo pongo el ratón 00:04:05
aquí encima, veis que bracket 00:04:07
ya me está diciendo directamente que este color 00:04:09
es el rojo ¿vale? 00:04:11
¿Que yo quiero que sea verde? Pues entonces pondría la componente roja, la pondría 0, ¿vale? 00:04:13
Y la componente verde la pondría FF, ¿vale? 00:04:19
¿Que yo quiero mezclar rojo y verde? Pues pongo los dos al máximo, ¿vale? 00:04:25
Y me sale el amarillo. 00:04:30
¿Que yo no quiero que sea el máximo de rojo, sino que quiero que sea un rojo más tenue? 00:04:31
Pues, por ejemplo, 35, ¿vale? O menos aún, o 12. 00:04:35
Y si quiero bajar aún más la componente del verde a, yo qué sé, a 88A, ¿vale? 00:04:40
Y ahí voy jugando, ¿vale? 00:04:49
No nos preocupemos porque no hay que saberse los colores del memoria, ¿vale? 00:04:52
Ahora os voy a enseñar un truquito. 00:04:55
Pero antes voy a enseñar otra forma más de poner estos colores, ¿vale? 00:04:57
Porque tenemos siempre que acostumbrarnos a ponerlo en RGB. 00:05:01
No lo vamos a poner como, ¿vale? 00:05:04
Porque no se hace así en páginas web, ¿vale? 00:05:06
Vamos a poner un párrafo nuevo, con un texto lorem ipsum, y en este caso vamos a poner color RGB, ¿vale? 00:05:10
Y vamos a poner el id color RGB, ¿vale? 00:05:19
Y vamos a poner color, y en este caso, es otra forma de construir esto, ¿vale? 00:05:28
Cuando hablábamos que los colores podían variar entre 0, 0 y ff, es lo mismo que decir que el color varía entre 0 y 255, ¿vale? 00:05:33
Entonces, lo que nosotros haremos aquí será poner RGB y entre paréntesis poner el valor de rojo, por ejemplo, si yo quiero que sea máximo de rojo, 255, el valor de verde, si yo quiero que sea cero, de verde, cero, y el valor de azul, ¿vale? 00:05:42
Y fijaros cómo ese párrafo ahora es rojo, ¿vale? Si pongo mi ratón encima, igualmente veis que me aparece el color rojo, ¿vale? 00:05:59
Si yo ahora quiero poner valores, pues yo que sé, un poco al azar para ver qué color sale, ¿vale? 00:06:09
80, 198, 46, ¿vale? 00:06:14
Y ahora yo pongo mi ratón encima, fijaros que me aparece el color que corresponde, ¿vale? 00:06:24
Puedo bajar esta componente de verde un poco y poner, por ejemplo, 112, ¿vale? 00:06:28
¿Ok? 00:06:34
Entonces estas son las dos formas en las que vamos a poner siempre los colores 00:06:35
E insisto, no hay que saberse los colores de memoria, ¿vale? 00:06:41
Voy a enseñar como con brackets lo podemos hacer muy fácil 00:06:45
Vale, pues entonces 00:06:49
Muy sencillo, ¿vale? 00:06:51
Lo que decía, para cambiar los colores 00:06:54
Simplemente, fijaros que cuando yo pongo aquí mi ratón encima me aparece el color, ¿vale? 00:06:56
Pues le vamos a hacer doble clic de tal forma que se marque el color 00:07:00
O si no, no hace falta creo ni siquiera 00:07:03
Y le vamos a dar al botón derecho 00:07:05
Al darle al botón derecho os tiene que aparecer una opción que pone edición rápida 00:07:07
Y cuando le damos, fijaros que nos aparece como una ventanita 00:07:13
Donde nosotros podemos hacer clic en el color que queramos 00:07:19
Fijaros que tenemos toda esta rama y automáticamente ya me está saliendo aquí abajo el color en RGB 00:07:23
También puedo elegir la otra opción, formato RGB A 00:07:30
¿Vale? Que es el otro formato que os he enseñado, ¿vale? Que sería numerando el rojo entre 0 y 255, entre 0 y 255 el verde y el azul igual, ¿vale? 00:07:34
Entonces, os recomiendo estas dos opciones, ¿vale? Y ya con esto pues iréis jugando. Con esto podéis jugar un tercer componente que veis ahí al final, ¿vale? 00:07:47
Que no he hablado antes de él. A la derecha del todo, perdón, un cuarto valor, ¿vale? Tanto para el RGB como para él. Bueno, en este caso esto no existe si lo utilizamos en esta decimal, es importante aclararlo, ¿vale? 00:07:57
Pero si utilizamos el RGB, sí. Y esto lo que es, es la opacidad del color, ¿vale? Cómo de transparente es el color, ¿vale? Entonces fijaros que si yo pongo este color, que es como una especie de morado con un poco de sombra, ¿vale? Y directamente lo voy a cerrar aquí, a la X, ¿vale? 00:08:12
fijaros que el color que se me ve 00:08:33
vamos a ver si puedo 00:08:35
saltar, o sea que no, un segundito 00:08:41
voy a volver a abrir ahora, vale 00:08:46
se me ve ahí como 00:08:53
un poquito transparente, vale 00:08:55
si yo le pongo un 1 aquí, sería lo 00:08:57
máximo de opaco, vale 00:08:59
y si le pongo un 0,2 00:09:00
pues sería lo máximo de transparente 00:09:03
vale, entonces ahí 00:09:05
o un 0, perdón, si le ponemos un 0 00:09:07
sería totalmente transparente, vale 00:09:09
y un 0,2 pues sería 00:09:11
un poquito menos transparente 00:09:13
Entonces con eso podemos jugar, ¿vale? 00:09:15
Entonces jugaríamos con RGB o RGBA si queremos darle ese componente de opacidad, ¿vale? 00:09:16
O con almohadilla y los valores de estado primario, ¿vale? 00:09:22
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
53
Fecha:
8 de febrero de 2021 - 20:57
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
09′ 31″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
26.38 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid