Curso Basico de CSS - 6. Fondos — Transcript

Full transcript

1. 0:00[Música]
2. 0:05[Música]
3. 0:12Hola Qué tal amigos bienvenidos sean
4. 0:14este nuestro siguiente capítulo del
5. 0:15curso de css básico Mi nombre es Carlos
6. 0:18Arturo y bien pues en este capítulo
7. 0:20vamos a estar viendo algo también es
8. 0:22bastante fundamental en el diseño web y
9. 0:25es son los fondos los fondos que le
10. 0:27podemos dar tanto a los elementos como
11. 0:28nuestro fondo de Pina y bueno en Sí
12. 0:31vamos a ver esto así que vamos a
13. 0:33comenzar como ya sabes yo tengo la
14. 0:34estructura que estaba trabajando es un
15. 0:36simple sitio estructurado con dips y
16. 0:39elementos p simplemente para mostrártelo
17. 0:41y vamos a ver con los fondos que ya
18. 0:43podemos ver un poquito en capítulos
19. 0:45pasados pero aquí te lo voy a explicar a
20. 0:47fondo voy a hacer el selector a Body
21. 0:49porque vamos a agregarle un fondo a toda
22. 0:51nuestra página para agregarle el fondo a
23. 0:53toda la página usamos Body entonces con
24. 0:56Body vamos a decirle
25. 0:58background y le vamos a decir qué
26. 1:00queremos de color de fondo le podemos
27. 1:03poner tanto un azul como que bueno este
28. 1:05azul es muy feo Tápense los ojos Ahí
29. 1:08está si le ponemos por ejemplo un color
30. 1:12negro podemos ponerle el color que
31. 1:14nosotros queramos y eh normalmente
32. 1:17suelen ser colores suelen ser colores
33. 1:19claros Pero bueno depende de la temática
34. 1:21del sitio que tú tengas pero no solo
35. 1:24podemos poner colores que los colores
36. 1:26simplemente hacer esto poner background
37. 1:28y poner la unidad de color que ya te
38. 1:30mostré en los capítulos
39. 1:32pasados lo interesante es utilizar
40. 1:34imágenes de fondo en este caso yo aquí
41. 1:37en las imágenes tengo un logo que bueno
42. 1:39no es que se vaya a ver muy bien de
43. 1:41fondo pero lo voy a usar de prueba para
44. 1:43agregar una imagen de fondo simplemente
45. 1:45agregamos background le ponemos URL y
46. 1:48abrimos paréntesis y dentro de estos
47. 1:51paréntesis vamos a escribir la ruta de
48. 1:52la imagen en este caso mi ruta es
49. 1:55imágenes
50. 1:57diagonal logo.jpg si no me equivoco si
51. 2:00te fijas estamos donde está css este
52. 2:04aquí estamos ahorita mismo tenemos que
53. 2:06regresar una carpeta meternos en
54. 2:08imágenes y luego logotipo entonces aquí
55. 2:11Se nos olvidó decirle que vamos a
56. 2:13regresar una carpeta con esto decimos
57. 2:15regresamos una carpeta y después buscas
58. 2:17en imágenes y luego logo.jpg si
59. 2:20actualizamos y todo está bien Ahí está
60. 2:22tenemos nuestro fondo eh el fondo por
61. 2:25defecto se va a repetir infinitas veces
62. 2:28tanto en ancho como en alto Por ejemplo
63. 2:30si yo hago un zoom si te fijas un zoom
64. 2:33Negativo si te fijas tengo el fondo
65. 2:35repetido Cuántas veces quepa Eh Esto
66. 2:39suele servir para fondos que son
67. 2:41texturas y se pueden repetir si tu fondo
68. 2:44no es una textura no lo utilices porque
69. 2:46no no tiene caso que se que se repita
70. 2:48porque se va a ver feo en este caso como
71. 2:50mi fondo yo no quiero que mi fondo se
72. 2:52repita Porque se ve así de feo pero si
73. 2:55tú tienes un paisaje una textura que sí
74. 2:57se pueda repetir pues lo haces eh para
75. 3:00esto Cómo se hace para repetir y no
76. 3:03repetir pues simplemente le ponemos
77. 3:04background repeat que es esta propiedad
78. 3:07background repeat y si queremos que no
79. 3:10se repita escribimos no repeat ahí está
80. 3:13no repeat y ahí está el fondo
81. 3:15simplemente se va a agregar una vez no
82. 3:17se va a repetir podemos decirle que se
83. 3:20repita simplemente en horizontal que es
84. 3:23repeat gu x Ahí está y si hago un zoom
85. 3:26negativo ahí está se repite solo en lo
86. 3:28que es eh horizontal esto suele venir
87. 3:31bien para algunos fondos como puede ser
88. 3:34algún menú o algo así ya no se usa tanto
89. 3:37porque ahora ya tenemos degradados con
90. 3:39css Pero antes no se usaban degradados Y
91. 3:43si tú querías poner una imagen bonita
92. 3:45tenías que hacerla en Photoshop o algo y
93. 3:48duplicarla de esta forma con repeat gu x
94. 3:51también lo podemos hacer con gu y se
95. 3:53actualizamos Ahí está lo repetimos para
96. 3:56la para vertical con y eh voy a hacer un
97. 3:59zo de regreso Ahí está yo siemple suelo
98. 4:02poner repeat no no repeat y así lo
99. 4:07puedes trabajar ahora qué más puedes
100. 4:10hacer en este caso voy a agregar también
101. 4:12las todos los letras de color
102. 4:16blanco Ahí está para que se muestren y
103. 4:19no se pierdan con el
104. 4:21fondo qué más puedes hacer Voy a irme
105. 4:24aquí al documento y voy a agregar muchos
106. 4:26saltos de línea esto lo voy a hacer
107. 4:29vamos a agregar unos 100 voy agregar 100
108. 4:32saltos de línea con la etiqueta br para
109. 4:35que tenga un scroll si te fijas Por qué
110. 4:38Porque si te fijas si yo bajo con el
111. 4:40mouse el fondo se pierde vale el fondo
112. 4:42se queda ahí pero nosotros podemos hacer
113. 4:45algo genial con esta propiedad de
114. 4:48background background attachment con
115. 4:51background attachment nosotros podemos
116. 4:53decirle que el fondo esté fixed que
117. 4:55digamos que esté arreglado y si
118. 4:57actualizamos si te fijas Por más que
119. 4:58bajo el Mouse el contenido sí baja
120. 5:01Presta atención al contenido Porque si
121. 5:03yo bajo la página el contenido Sí sí
122. 5:06cambia pero el fondo digamos se queda
123. 5:09fijo en la pantalla y no se
124. 5:11modifica está esta parte o si no por
125. 5:14defecto está la de scroll que con scroll
126. 5:17el fondo también se se mueve ahí está el
127. 5:20fondo también sube y baja eh fixat se
128. 5:22usa mucho para algunos tipos de diseño
129. 5:24eh yo no lo suelo usar tanto sí lo uso
130. 5:27pero no para todos los diseños solo para
131. 5:30algunos normalmente siempre suelo usar
132. 5:32colores porque también es importante que
133. 5:33te fijes que si es una imagen la Imagen
134. 5:36tiene un peso y entonces el usuario
135. 5:38tiene que consumir ese peso y va a
136. 5:40tardar más la página en cargar es por
137. 5:42eso que es recomendable poner eh lo que
138. 5:44son imágenes muy livianas o colores y es
139. 5:48así es simple agregar fondos con css eh
140. 5:51voy a quitar esto del Body porque no
141. 5:54quiero que tengan fondo quiero que todo
142. 5:56regrese a su normalidad Porque si
143. 5:58recuerdas aquí tengo un Dif que es este
144. 6:00que tengo aquí yo quiero que los dip les
145. 6:02agreguemos un fondo Por qué Porque
146. 6:04también lo podemos hacer le podemos
147. 6:05tanto agregar el background decirle que
148. 6:08sea de color naranja el naranja más F
149. 6:11del mundo actualizamos ahí está el
150. 6:13naranja tiene el fondo que ya lo
151. 6:15habíamos visto y igual manera podemos
152. 6:17ponerle una URL le ponemos regresamos en
153. 6:21la imagen imágenes log jpg Ahí está si
154. 6:26actualizamos si te fijas la
155. 6:29lo que es nuestro DIF tiene también la
156. 6:31imagen de fondo el problema es que la
157. 6:33imagen Es muy grande es muy grande la
158. 6:35imagen Entonces vamos a hacer el wid
159. 6:38vamos a agregarle un no sé un un un alto
160. 6:42más
161. 6:42bien de unos 300 píxeles quizás y ahí
162. 6:48está se actualizamos si te fijas el div
163. 6:50que bueno le voy a agregar tamb un color
164. 6:53blanco color
165. 6:57blanco Ahí está
166. 7:00está Sí ahí está tenemos lo que es
167. 7:02nuestro texto y ahora sí si te fijas el
168. 7:05fondo está en nuestro di aquí lo que
169. 7:07pasa es que también se está repitiendo
170. 7:09podemos decirle que no se repita o lo
171. 7:11que sea background repeat no repeat ahí
172. 7:15está y y bueno desaparece que aquí
173. 7:21background repeat que me he equivocado
174. 7:24background repeat no repeat ahí está ahí
175. 7:28está y si te fijas el fondo no
176. 7:30desaparece incluso cuando el di está más
177. 7:33para esta parte que está acá e vamos a
178. 7:36regresar a la parte del Body porque se
179. 7:38me olvidó comentarte algo voy a regresar
180. 7:40el
181. 7:41código estoy regresando lo más rápido
182. 7:43que puedo Ahí está esta parte quiero
183. 7:46regresar al di Aquí está donde
184. 7:48tendríamos nuestro fondo hay algo que
185. 7:51también puedes hacer Y es que puedes
186. 7:52posicionar el fondo esto lo haces con
187. 7:55background position background position
188. 7:59y puedes modificar eh la forma en la que
189. 8:02posicionas tu fondo Por ejemplo puedes
190. 8:05decirle que se posicione 50% hacia la
191. 8:08derecha Ahí está 50% y cer0 hacia arriba
192. 8:12y abajo actualizamos y si te fijas se
193. 8:15posiciona un 50% hacia la derecha que
194. 8:18esto no es estar centrado Es importante
195. 8:20saber eso pero nosotros podemos decirle
196. 8:23que lo modifique 500 píxeles y que
197. 8:26modifique hacia abajo no sé 200 píxeles
198. 8:30Ahí está si actualizamos tenemos el
199. 8:32fondo avanza 500 píxeles hacia la
200. 8:34derecha y 200 hacia abajo
201. 8:36eh esta posición si está por defecto en
202. 8:40cero si no no tiene nada va a contar
203. 8:43desde la esquina superior izquierda
204. 8:46desde ahí es donde va a empezar a contar
205. 8:47el primer valor que le demos va a
206. 8:49Modificar el fondo hacia la derecha y el
207. 8:52segundo valor lo lo va a modificar
208. 8:54verticalmente hacia abajo es por eso que
209. 8:56nosotros le podemos dar dos valores si
210. 8:59no si no me equivoco puedo usar Center
211. 9:00si uso Center e me lo centra en todo el
212. 9:04documento porque vamos a ponerle Center
213. 9:08cero Ahí está si le pongo Center me
214. 9:11centra el fondo a en exactamente en
215. 9:15medio de todo nuestro documento y con
216. 9:17cero le digo que no me lo desplace en la
217. 9:19parte de arriba si yao le pusiera
218. 9:21obviamente pues 100 píxeles aquí le he
219. 9:24puesto 1 100 píxeles me lo va a separar
220. 9:26100 Ahí está Y esto es lo que lo que
221. 9:29queremos Ahí está yo en este caso lo
222. 9:32dejo en cero esta casi no la suelo usar
223. 9:35casi no suelo trabajar fondos como ya te
224. 9:37dije pero ahí está lo podemos usar
225. 9:39Igualmente podemos poner el attachment
226. 9:41en vez de scroll
227. 9:43fixed y nuestro fondo va a quedar en la
228. 9:46pantalla todo el tiempo todo el tiempo
229. 9:48Ahí está así que bien amigos pues eso ha
230. 9:51sido todo por este pequeño capítulo ya
231. 9:53sabes que mi nombre es Carlos Arturo y
232. 9:55nos vemos en el siguiente si te ha
233. 9:57gustado el video por favor No olvides
234. 9:59subirte al Canal así como también
235. 10:00seguirme en Twitter en @ falconmasters
236. 10:03por último te invito a que pases por mi
237. 10:04sitio
238. 10:05www.falconmasters.com en donde
239. 10:07encontrarás tutoriales y recursos sobre
240. 10:09desarrollo y diseño web