1
00:00:01,010 --> 00:00:15,150
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.

2
00:00:15,150 --> 00:00:36,270
¿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?

3
00:00:36,270 --> 00:00:52,429
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?

4
00:00:52,429 --> 00:01:18,400
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?

5
00:01:18,400 --> 00:01:26,260
Y este elemento dip ahora mismo yo lo voy a dejar tal y como está, sin nada, ¿vale? Sin ponerle nada.

6
00:01:26,980 --> 00:01:33,439
Y ahora nos vamos a venir a mi parte de estilo, ¿vale? Y vamos a modificar el estilo de ese dip.

7
00:01:34,500 --> 00:01:39,439
Y lo primero que vamos a hacer, como ya hemos visto antes, es que le vamos a poner un tamaño, ¿vale?

8
00:01:39,439 --> 00:01:47,500
Le voy a poner un tamaño, una anchura de 400 píxeles y una altura también de 400 píxeles.

9
00:01:47,560 --> 00:01:53,299
De tal forma que esto está siendo ahora mismo una caja que puede tener contenido totalmente cuadrada, ¿vale?

10
00:01:54,879 --> 00:01:58,599
Ok, pues entonces para poner bordes, ¿vale?

11
00:02:01,769 --> 00:02:08,310
Para poner bordes utilizamos la propiedad Border Style, ¿vale?

12
00:02:08,310 --> 00:02:10,969
que tiene muchas opciones

13
00:02:10,969 --> 00:02:11,949
tiene muchas opciones

14
00:02:11,949 --> 00:02:14,030
y las vamos a ir viendo aquí una en una

15
00:02:14,030 --> 00:02:15,689
¿vale? para que me sigáis

16
00:02:15,689 --> 00:02:17,710
entonces, fijaros

17
00:02:17,710 --> 00:02:19,830
lo primero que vamos a hacer es poner border

18
00:02:19,830 --> 00:02:22,389
style, dos puntitos

19
00:02:22,389 --> 00:02:24,370
y estas son las opciones

20
00:02:24,370 --> 00:02:25,889
que me salen, ¿vale?

21
00:02:26,469 --> 00:02:28,349
que son varias, si yo pongo solid

22
00:02:28,349 --> 00:02:30,250
fijaros que aparece

23
00:02:30,250 --> 00:02:32,169
una línea entera, una línea

24
00:02:32,169 --> 00:02:33,189
sólida, ¿vale?

25
00:02:34,789 --> 00:02:36,490
que me cubre, que me cubriría

26
00:02:36,490 --> 00:02:38,370
toda la caja, ¿vale? si yo pongo

27
00:02:38,370 --> 00:02:42,240
double, me saldría una línea

28
00:02:42,240 --> 00:02:44,280
doble, ¿vale? más opciones, si yo pongo

29
00:02:44,280 --> 00:02:46,039
dash, sería

30
00:02:46,039 --> 00:02:48,159
una línea discontinua, si yo pongo dot

31
00:02:48,159 --> 00:02:50,479
sería una línea de puntitos

32
00:02:50,479 --> 00:02:51,460
si yo pongo double

33
00:02:51,460 --> 00:02:54,039
creo que ya la he puesto ya, si double ya la había puesto

34
00:02:54,039 --> 00:02:56,259
era una línea doble

35
00:02:56,259 --> 00:02:57,740
¿vale? si pongo groove

36
00:02:57,740 --> 00:03:00,539
tendría como un efecto ahí 3D

37
00:03:00,539 --> 00:03:02,539
eh...

38
00:03:02,539 --> 00:03:03,400
inedit, ¿no? perdón

39
00:03:03,400 --> 00:03:05,800
luego tenemos también

40
00:03:05,800 --> 00:03:08,039
inset, que también da una sensación de

41
00:03:08,039 --> 00:03:09,199
de 3D y

42
00:03:09,199 --> 00:03:12,159
Outset, ¿vale? que da la sensación

43
00:03:12,159 --> 00:03:14,000
también de 3D pero desde otra posición

44
00:03:14,000 --> 00:03:15,860
¿vale? como veis tenemos

45
00:03:15,860 --> 00:03:18,139
y también tenemos la opción

46
00:03:18,139 --> 00:03:20,219
de Reach, perdón, se me ha olvidado

47
00:03:20,219 --> 00:03:20,599
esta

48
00:03:20,599 --> 00:03:24,159
¿vale? que también es como un borde

49
00:03:24,159 --> 00:03:25,800
así en un modo 3D

50
00:03:25,800 --> 00:03:28,280
¿vale? entonces fijaros

51
00:03:28,280 --> 00:03:29,960
que tenéis varias opciones para poner

52
00:03:29,960 --> 00:03:32,120
fondos, simplemente es jugar

53
00:03:32,120 --> 00:03:33,400
con el que más os guste, ¿vale?

54
00:03:35,259 --> 00:03:35,740
entonces

55
00:03:35,740 --> 00:03:43,979
Es importante, si yo pongo solo solid, la palabra solid, fijaros que todos los lados, todos los bordes tienen el mismo tipo, ¿vale?

56
00:03:44,139 --> 00:03:47,120
Sin embargo, yo puedo poner bordes diferentes a cada lado.

57
00:03:47,319 --> 00:03:58,099
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.

58
00:03:58,099 --> 00:04:23,139
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?

59
00:04:23,139 --> 00:04:38,399
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í.

60
00:04:38,399 --> 00:05:06,050
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?

61
00:05:06,050 --> 00:05:31,209
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?

62
00:05:31,209 --> 00:05:58,379
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.

63
00:05:58,379 --> 00:06:21,379
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?

64
00:06:21,379 --> 00:06:47,519
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?

65
00:06:47,519 --> 00:07:07,240
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?

66
00:07:07,240 --> 00:07:22,680
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?

67
00:07:22,680 --> 00:07:48,379
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.

68
00:07:48,379 --> 00:08:02,660
¿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?

69
00:08:02,660 --> 00:08:17,480
¿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.

70
00:08:18,379 --> 00:08:41,279
¿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í.

71
00:08:41,279 --> 00:08:44,759
Y vamos a meter una nueva cajita, ¿vale?

72
00:08:44,980 --> 00:08:52,460
Fijaros que al meter la cajita, automáticamente ya me ha creado ese fondo, ¿vale?

73
00:08:53,980 --> 00:08:54,799
Esos bordes.

74
00:08:55,000 --> 00:08:55,299
¿Por qué?

75
00:08:55,379 --> 00:08:57,840
Porque está cogiendo el estilo que yo había definido previamente, ¿vale?

76
00:08:58,279 --> 00:08:59,019
¿Qué pasa?

77
00:08:59,299 --> 00:09:02,559
Que yo a este tip le voy a poner además un ID, ¿vale?

78
00:09:02,700 --> 00:09:07,159
Y lo voy a llamar bordes redondeados, ¿vale?

79
00:09:07,240 --> 00:09:08,379
Con la R mayúscula.

80
00:09:08,379 --> 00:09:24,980
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?

81
00:09:24,980 --> 00:09:40,460
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?

82
00:09:40,460 --> 00:09:49,480
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?

83
00:09:50,220 --> 00:10:05,259
Y aquí vamos a añadir una nueva propiedad para hacer bordes redondeados, para hacer bordes redondeados utilizamos border radius, ¿vale?

84
00:10:05,259 --> 00:10:14,799
Y nos venimos aquí y ponemos border radius y vamos a poner, por ejemplo, 92 píxeles, ¿vale?

85
00:10:15,100 --> 00:10:21,320
Y fijaros, ya tenemos todos los bordes son de un radio de 92 píxeles.

86
00:10:21,320 --> 00:10:28,799
Yo puedo hacer modificaciones y que cada radio, que digamos que cada esquina tenga un radio diferente, ¿vale?

87
00:10:28,820 --> 00:10:31,259
Pues si yo la pongo aquí, 21 píxeles, ¿vale?

88
00:10:32,639 --> 00:10:39,860
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.

89
00:10:40,139 --> 00:10:44,580
Si yo la pongo 181 píxeles, tendría tres radios diferentes, ¿vale?

90
00:10:44,580 --> 00:11:10,590
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.

91
00:11:10,590 --> 00:11:13,590
Y si ponemos la barra tendríamos el radio vertical, ¿vale?

92
00:11:14,090 --> 00:11:18,710
Por si queremos hacer más modificaciones, por si queremos que las figuras sean aún más diferentes, ¿vale?

93
00:11:19,289 --> 00:11:20,950
5 píxeles, ¿vale?

94
00:11:21,049 --> 00:11:27,070
Fijaros que ahora queda como una especie de cuadrado un poco raro, ¿vale?

95
00:11:27,129 --> 00:11:34,090
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?

96
00:11:34,509 --> 00:11:39,950
Quedan figuras más... polígonos más extraños, ¿vale?

97
00:11:42,029 --> 00:12:04,730
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.

98
00:12:04,730 --> 00:12:08,149
¿vale? y lo que yo ahora voy a hacer

99
00:12:08,149 --> 00:12:10,029
es, vamos a imaginarnos que quiero dejar

100
00:12:10,029 --> 00:12:12,090
los mismos tipos de

101
00:12:12,090 --> 00:12:13,190
bordes, tipos de

102
00:12:13,190 --> 00:12:15,769
colores, grosores de

103
00:12:15,769 --> 00:12:17,929
los elementos de pantería, entonces yo solo voy a

104
00:12:17,929 --> 00:12:19,789
modificar aquellos que corresponden

105
00:12:19,789 --> 00:12:21,289
al radio ¿vale?

106
00:12:21,669 --> 00:12:23,250
entonces voy a poner

107
00:12:23,250 --> 00:12:24,590
border

108
00:12:24,590 --> 00:12:27,590
radius ¿vale?

109
00:12:28,250 --> 00:12:29,950
y como radio

110
00:12:29,950 --> 00:12:31,529
voy a poner 50%

111
00:12:31,529 --> 00:12:32,850
¿vale?

112
00:12:32,850 --> 00:12:40,769
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.

113
00:12:42,590 --> 00:12:50,509
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?

114
00:12:50,870 --> 00:12:58,610
Ejemplo de ello, vamos a meter una imagen, ¿vale? Voy a poner aquí dos saltos de línea, br y br, ¿vale?

115
00:12:58,610 --> 00:13:06,570
Y vamos a añadir una imagen que voy a utilizar como imagen la que utilizamos en el archivo de fondos de pantalla, ¿vale?

116
00:13:06,610 --> 00:13:10,429
Que la teníamos en Images y se llamaba imagen fondo, ¿vale?

117
00:13:10,789 --> 00:13:12,629
Y la estáis viendo aquí, ¿vale?

118
00:13:13,129 --> 00:13:15,789
Esa es la imagen que utilizamos ahí, ¿vale?

119
00:13:16,450 --> 00:13:22,350
Y como siempre hay que ponerle un Alt y le vamos a llamar imagen con bordes, ¿vale?

120
00:13:23,169 --> 00:13:28,129
Y ahora yo voy a modificar su estilo, voy a hacerla un poquito más pequeña, ¿vale?

121
00:13:28,610 --> 00:13:37,389
para que no sea tan grande, vamos a poner un width de 300 píxeles, ¿vale?

122
00:13:38,230 --> 00:13:44,809
Fijaros que si yo ahora no pusiera propiedad height, él directamente la autoescala, es decir,

123
00:13:45,049 --> 00:13:48,529
la mantiene la relación de aspectos, es decir, que su anchura y su altura,

124
00:13:48,870 --> 00:13:51,909
su relación entre la anchura y la altura sea siempre la misma, ¿vale?

125
00:13:52,110 --> 00:13:58,529
Si yo ahora lo quiero modificar y yo pongo una altura, yo podría poner aquí, por ejemplo, 600 píxeles,

126
00:13:58,610 --> 00:14:00,509
¿vale? fijaros que ahora la imagen

127
00:14:00,509 --> 00:14:02,330
se distorsiona ¿vale? ¿por qué?

128
00:14:02,409 --> 00:14:04,710
porque yo estoy modificando esa relación de aspectos

129
00:14:04,710 --> 00:14:06,350
¿vale? sin embargo voy a poner

130
00:14:06,350 --> 00:14:08,649
300 para que esté cuadradita

131
00:14:08,649 --> 00:14:08,990
¿vale?

132
00:14:10,629 --> 00:14:12,549
ahora le voy a poner un borde que va a ser

133
00:14:12,549 --> 00:14:14,110
un borde de 3 píxeles

134
00:14:14,110 --> 00:14:15,649
de tipo

135
00:14:15,649 --> 00:14:18,429
doble ¿vale? y le vamos a poner

136
00:14:18,429 --> 00:14:20,490
un color rojo

137
00:14:20,490 --> 00:14:20,750
¿vale?

138
00:14:22,789 --> 00:14:24,090
o morado

139
00:14:24,090 --> 00:14:26,490
¿vale? que le pega más ¿ok?

140
00:14:26,490 --> 00:14:27,549
y ahora

141
00:14:27,549 --> 00:14:29,330
le vamos a poner un radio

142
00:14:29,330 --> 00:14:30,350
¿vale?

143
00:14:31,490 --> 00:14:33,450
border radius ¿vale?

144
00:14:33,610 --> 00:14:34,970
y va a ser de 40 píxeles

145
00:14:34,970 --> 00:14:37,610
¿vale?

146
00:14:38,309 --> 00:14:40,090
que lo quiero poner circular completamente

147
00:14:40,090 --> 00:14:41,549
por 50% ¿vale?

148
00:14:41,769 --> 00:14:44,450
y fijaros que esto ya hace como una especie de recorte

149
00:14:44,450 --> 00:14:45,889
sobre la propia imagen

150
00:14:45,889 --> 00:14:49,429
¿vale? ¿ok?

151
00:14:50,129 --> 00:14:51,590
bueno pues espero que

152
00:14:51,590 --> 00:14:53,669
os haya resultado interesante

153
00:14:53,669 --> 00:14:55,509
y útil porque border es una cosa que haremos

154
00:14:55,509 --> 00:14:57,309
un montón para poner estilos ¿vale?

155
00:14:57,309 --> 00:14:58,990
y que se utiliza un montón porque

156
00:14:58,990 --> 00:15:01,190
da un mucho

157
00:15:01,190 --> 00:15:03,429
queda muy

158
00:15:03,429 --> 00:15:05,990
muy llamativo, muy resulto

159
00:15:05,990 --> 00:15:06,210
¿vale?

160
00:15:07,610 --> 00:15:08,350
venga, hasta ahora chicos