Saltar navegación

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

CSS - Bordes - 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 22 de febrero de 2021 por Fernando M.

159 visualizaciones

Más información Transcripción

Descargar la transcripción

Ahora vamos a ver cómo poner bordes en los diferentes elementos. Una cosa que se utiliza un montón y que luego nos va a ayudar a entender mejor el dimensionamiento y cómo poner objetos dentro de nuestra página. 00:00:01
¿Vale? Vamos a hacer como siempre, partimos, este es el archivo anterior, ¿vale? Para ir más rápido, archivo, vamos, uy, perdona, ¿vale? Le vamos a dar archivo, guardar como, ¿vale? Y aquí le vamos a poner un nombre nuevo que lo vamos a llamar bordes.html, ¿vale? 00:00:15
Ahí estáis viendo, ¿vale? Y pues hago como siempre, me voy a borrar estos elementos que no me interesan ahora mismo, ¿vale? Y me voy a borrar toda la cabecera, todo el contenido, perdón, ¿vale? 00:00:36
Y ahora aquí me voy a poner bordes en CSS, ¿vale? Entonces, lo primero que vamos a hacer aquí es crearnos un elemento div, ¿vale? Vamos a crearnos un elemento div. Ponemos div, la palabra div, ¿vale? Y le damos al tabulador. Y aquí tenemos nuestro elemento div, ¿vale? 00:00:52
Y este elemento dip ahora mismo yo lo voy a dejar tal y como está, sin nada, ¿vale? Sin ponerle nada. 00:01:18
Y ahora nos vamos a venir a mi parte de estilo, ¿vale? Y vamos a modificar el estilo de ese dip. 00:01:26
Y lo primero que vamos a hacer, como ya hemos visto antes, es que le vamos a poner un tamaño, ¿vale? 00:01:34
Le voy a poner un tamaño, una anchura de 400 píxeles y una altura también de 400 píxeles. 00:01:39
De tal forma que esto está siendo ahora mismo una caja que puede tener contenido totalmente cuadrada, ¿vale? 00:01:47
Ok, pues entonces para poner bordes, ¿vale? 00:01:54
Para poner bordes utilizamos la propiedad Border Style, ¿vale? 00:02:01
que tiene muchas opciones 00:02:08
tiene muchas opciones 00:02:10
y las vamos a ir viendo aquí una en una 00:02:11
¿vale? para que me sigáis 00:02:14
entonces, fijaros 00:02:15
lo primero que vamos a hacer es poner border 00:02:17
style, dos puntitos 00:02:19
y estas son las opciones 00:02:22
que me salen, ¿vale? 00:02:24
que son varias, si yo pongo solid 00:02:26
fijaros que aparece 00:02:28
una línea entera, una línea 00:02:30
sólida, ¿vale? 00:02:32
que me cubre, que me cubriría 00:02:34
toda la caja, ¿vale? si yo pongo 00:02:36
double, me saldría una línea 00:02:38
doble, ¿vale? más opciones, si yo pongo 00:02:42
dash, sería 00:02:44
una línea discontinua, si yo pongo dot 00:02:46
sería una línea de puntitos 00:02:48
si yo pongo double 00:02:50
creo que ya la he puesto ya, si double ya la había puesto 00:02:51
era una línea doble 00:02:54
¿vale? si pongo groove 00:02:56
tendría como un efecto ahí 3D 00:02:57
eh... 00:03:00
inedit, ¿no? perdón 00:03:02
luego tenemos también 00:03:03
inset, que también da una sensación de 00:03:05
de 3D y 00:03:08
Outset, ¿vale? que da la sensación 00:03:09
también de 3D pero desde otra posición 00:03:12
¿vale? como veis tenemos 00:03:14
y también tenemos la opción 00:03:15
de Reach, perdón, se me ha olvidado 00:03:18
esta 00:03:20
¿vale? que también es como un borde 00:03:20
así en un modo 3D 00:03:24
¿vale? entonces fijaros 00:03:25
que tenéis varias opciones para poner 00:03:28
fondos, simplemente es jugar 00:03:29
con el que más os guste, ¿vale? 00:03:32
entonces 00:03:35
Es importante, si yo pongo solo solid, la palabra solid, fijaros que todos los lados, todos los bordes tienen el mismo tipo, ¿vale? 00:03:35
Sin embargo, yo puedo poner bordes diferentes a cada lado. 00:03:44
Si yo pongo primero solid y luego yo pongo dash, por ejemplo, fijaros que los bordes superior e inferior me los pone en solid y el izquierdo y derecho en discontinuo. 00:03:47
Si yo ahora pongo double, fijaros que el superior es solid, el inferior es double y el izquierdo y el derecho es dash, ¿vale? Si yo ahora aquí pongo, pues, por ejemplo, groove, ¿vale? Pues el superior es sólido, el derecho es dash, el inferior es double y el izquierdo es groove, ¿vale? 00:03:58
Y puedo hacer una mezcla de diferentes bordes, ¿vale? Voy a poner aquí en vez de este, voy a poner... voy a poner... dos, ¿vale? Ahí. 00:04:23
Ok, otra propiedad. Esto sería para poner los bordes, ¿vale? Ahora, para modificar la anchura utilizamos border width, ¿vale? Border width. Y si yo ahora aquí pongo 5 píxeles, pues fijaros que toda la anchura se me ha modificado con 5 píxeles, ¿vale? 00:04:38
Esto funciona exactamente igual que la propiedad anterior. Si yo ahora pongo aquí 5, luego pongo 8, luego pongo 10 y luego pongo 1, ¿vale? Fijaros que cada una de las dimensiones afecta a uno de los bordes. Siempre lo hacen en el sentido de las agujas del reloj desde el superior. Sería arriba, derecha, izquierda, abajo. Perdón, arriba, derecha, abajo, izquierda, ¿vale? 00:05:06
Y también podemos modificar el color. Para modificar el color del borde, pues ponemos border-color, ¿vale? Y ahora hacemos border-color y empezamos a jugar. Y ponemos, por ejemplo, ff00. Y todos los bordes me salen rojos. 00:05:31
Y esto, otra vez, funciona exactamente igual que antes, si yo ahora me pongo aquí 00FF00, pues fijaros que el izquierdo y el derecho se me han puesto en verde, si yo ahora pongo 00FF00FF, pues me modifica el último, el de abajo, y aquí con este me modificaría el izquierdo, ¿vale? 00:05:58
Entonces cada borde tendría un color, ¿vale? ¿Qué pasa? Que aquí hay lo que se llama una propiedad de atajo, ¿vale? Para no tener que ir poniendo style, width y color, yo todo esto, ¿vale? Tal y como lo veis, lo podría ahora mismo borrar, que no lo voy a borrar, lo que voy a hacer es comentarlo, ¿vale? Comento, comento y comento y yo podría poner una única propiedad que sea borde, ¿vale? 00:06:21
Y dentro de ese border, pues, por ejemplo, pongo, quiero un border de 5 píxeles que sea de puntos, ¿vale? Y que tenga el color, pues, 71, 62, 30, ¿vale? Esa especie de marrón grisal, ¿vale? 00:06:47
De la misma forma, ¿vale? Esto serían, fijaros, los bordes, todos los bordes, esto afectaría a todos los bordes, ¿vale? Y tú dirás, claro, pero con esto no tengo capacidad de poner un borde izquierdo de una forma o el derecho de otra forma, ¿vale? 00:07:07
Pues entonces, en vez de utilizar esta propiedad de atajo border, utilizaríamos, ¿vale? Voy a poner aquí un punto y coma. Utilizaríamos, por ejemplo, border-bottom, ¿vale? Para modificar solo el borde inferior. Y pondríamos, pues por ejemplo, 10 píxeles, que sea de tipo rich, ¿vale? Y el color, pues que sea 098721, ¿vale? Ese mismo. 00:07:22
¿Qué quiero modificar el izquierdo? Pues border left, ¿vale? Y ponemos aquí 8 píxeles de tipo groove y de color 1, 2, 3, 4 de A, ¿vale? 00:07:48
¿Y qué quiero modificar el borde superior? Pues border top y aquí ponemos 2 píxeles de tipo sólido y de color 1, 1, 2, 1, 9, 9. 00:08:02
¿Vale? Y fijaros, y de la misma forma podría hacer ahora un border right, ¿vale? Si pongo un border right, no necesito poner esta sentencia, ¿vale? ¿Ok? Vale. Seguimos haciendo cositas. Vamos a hacer una cosita nueva y es que ahora vamos a meter aquí dos saltos de línea, ¿vale? Así. 00:08:18
Y vamos a meter una nueva cajita, ¿vale? 00:08:41
Fijaros que al meter la cajita, automáticamente ya me ha creado ese fondo, ¿vale? 00:08:44
Esos bordes. 00:08:53
¿Por qué? 00:08:55
Porque está cogiendo el estilo que yo había definido previamente, ¿vale? 00:08:55
¿Qué pasa? 00:08:58
Que yo a este tip le voy a poner además un ID, ¿vale? 00:08:59
Y lo voy a llamar bordes redondeados, ¿vale? 00:09:02
Con la R mayúscula. 00:09:07
Y ahora me voy a venir aquí, ¿vale? Y voy a modificar ese estilo, ¿vale? Pongo dip, porque quiero modificar, bueno, podría poner solo almohadilla, ¿vale? Y poner bordes redondeados, ¿vale? 00:09:08
Abre y cierro llave y dentro, fijaros que voy a poner, voy a modificar la anchura, ¿vale? Voy a poner en vez de 400 píxeles, voy a poner 300 píxeles. Voy a modificar también la altura, que sea también 300 píxeles, ¿vale? 00:09:24
Voy a ponerle un borde que sea de 2 píxeles y sólido, fijaros que al no definir color ya se me ha puesto en negro, ¿vale? 00:09:40
Y aquí vamos a añadir una nueva propiedad para hacer bordes redondeados, para hacer bordes redondeados utilizamos border radius, ¿vale? 00:09:50
Y nos venimos aquí y ponemos border radius y vamos a poner, por ejemplo, 92 píxeles, ¿vale? 00:10:05
Y fijaros, ya tenemos todos los bordes son de un radio de 92 píxeles. 00:10:15
Yo puedo hacer modificaciones y que cada radio, que digamos que cada esquina tenga un radio diferente, ¿vale? 00:10:21
Pues si yo la pongo aquí, 21 píxeles, ¿vale? 00:10:28
Fijaros que yo ahora tengo izquierda superior y derecha inferior, lo tengo de un radio de 92 y las otras dos de un radio de 21. 00:10:32
Si yo la pongo 181 píxeles, tendría tres radios diferentes, ¿vale? 00:10:40
Y el último, pues, 70 y... no, vamos a poner un valor intermedio, 50 píxeles, ¿vale? Y si nosotros cogemos ahora y ponemos la barra, ¿vale? Voy a ponerlo aquí, tendríamos radio horizontal, ¿vale? Radio horizontal. 00:10:44
Y si ponemos la barra tendríamos el radio vertical, ¿vale? 00:11:10
Por si queremos hacer más modificaciones, por si queremos que las figuras sean aún más diferentes, ¿vale? 00:11:14
5 píxeles, ¿vale? 00:11:19
Fijaros que ahora queda como una especie de cuadrado un poco raro, ¿vale? 00:11:21
Y si yo pongo ahora 50 píxeles, pues veis como no es lo mismo el radio que yo tengo en un lado de la esquina como en el otro, ¿vale? 00:11:27
Quedan figuras más... polígonos más extraños, ¿vale? 00:11:34
Ok, ¿qué más? ¿Cómo hacer un círculo? Imaginaros que yo quiero hacer una caza que sea un círculo. De nuevo pongo un salto de línea o otro salto de línea, vamos a poner un dip, a este dip le vamos a poner un id que va a ser círculo y vamos a modificar ese estilo círculo. 00:11:42
¿vale? y lo que yo ahora voy a hacer 00:12:04
es, vamos a imaginarnos que quiero dejar 00:12:08
los mismos tipos de 00:12:10
bordes, tipos de 00:12:12
colores, grosores de 00:12:13
los elementos de pantería, entonces yo solo voy a 00:12:15
modificar aquellos que corresponden 00:12:17
al radio ¿vale? 00:12:19
entonces voy a poner 00:12:21
border 00:12:23
radius ¿vale? 00:12:24
y como radio 00:12:28
voy a poner 50% 00:12:29
¿vale? 00:12:31
Y fijaros que ahora lo que tengo es un círculo, ¿vale? Con los bordes que había definido antes, ¿vale? En la parte del div. 00:12:32
Vale, y esto no se tiene por qué hacer solo elementos div. Como digo, todas estas propiedades que vemos se hacen a prácticamente todos los elementos de HTML, ¿vale? 00:12:42
Ejemplo de ello, vamos a meter una imagen, ¿vale? Voy a poner aquí dos saltos de línea, br y br, ¿vale? 00:12:50
Y vamos a añadir una imagen que voy a utilizar como imagen la que utilizamos en el archivo de fondos de pantalla, ¿vale? 00:12:58
Que la teníamos en Images y se llamaba imagen fondo, ¿vale? 00:13:06
Y la estáis viendo aquí, ¿vale? 00:13:10
Esa es la imagen que utilizamos ahí, ¿vale? 00:13:13
Y como siempre hay que ponerle un Alt y le vamos a llamar imagen con bordes, ¿vale? 00:13:16
Y ahora yo voy a modificar su estilo, voy a hacerla un poquito más pequeña, ¿vale? 00:13:23
para que no sea tan grande, vamos a poner un width de 300 píxeles, ¿vale? 00:13:28
Fijaros que si yo ahora no pusiera propiedad height, él directamente la autoescala, es decir, 00:13:38
la mantiene la relación de aspectos, es decir, que su anchura y su altura, 00:13:45
su relación entre la anchura y la altura sea siempre la misma, ¿vale? 00:13:48
Si yo ahora lo quiero modificar y yo pongo una altura, yo podría poner aquí, por ejemplo, 600 píxeles, 00:13:52
¿vale? fijaros que ahora la imagen 00:13:58
se distorsiona ¿vale? ¿por qué? 00:14:00
porque yo estoy modificando esa relación de aspectos 00:14:02
¿vale? sin embargo voy a poner 00:14:04
300 para que esté cuadradita 00:14:06
¿vale? 00:14:08
ahora le voy a poner un borde que va a ser 00:14:10
un borde de 3 píxeles 00:14:12
de tipo 00:14:14
doble ¿vale? y le vamos a poner 00:14:15
un color rojo 00:14:18
¿vale? 00:14:20
o morado 00:14:22
¿vale? que le pega más ¿ok? 00:14:24
y ahora 00:14:26
le vamos a poner un radio 00:14:27
¿vale? 00:14:29
border radius ¿vale? 00:14:31
y va a ser de 40 píxeles 00:14:33
¿vale? 00:14:34
que lo quiero poner circular completamente 00:14:38
por 50% ¿vale? 00:14:40
y fijaros que esto ya hace como una especie de recorte 00:14:41
sobre la propia imagen 00:14:44
¿vale? ¿ok? 00:14:45
bueno pues espero que 00:14:50
os haya resultado interesante 00:14:51
y útil porque border es una cosa que haremos 00:14:53
un montón para poner estilos ¿vale? 00:14:55
y que se utiliza un montón porque 00:14:57
da un mucho 00:14:58
queda muy 00:15:01
muy llamativo, muy resulto 00:15:03
¿vale? 00:15:05
venga, hasta ahora chicos 00:15:07
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
159
Fecha:
22 de febrero de 2021 - 21:28
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
15′ 09″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
39.44 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid