Dreamweaver CC 2017 esencial

CSS de diseño: fondos, gradientes e imágenes

¡Prueba gratis durante 10 días

nuestros 1270 cursos !

Prueba gratis Mostrar modalidades de suscripción
Tras usar las propiedades relacionadas con el tamaño y colocación de los objetos, vamos ahora a usar algunas propiedades nuevas que modifican el fondo de los elementos o que permiten poner colores degradados.

Transcripción

(hombre) Dentro del diseñador CSS tenemos varios apartados de propiedades CSS. Vamos a ir utilizando algunos de ellos. No se trata tanto de ver todas las posibilidades de CSS, que no tiene sentido, pero sí de ver los grupos principales. Para empezar, en este panel de propiedades tenemos la opción que es "Mostrar conjunto". "Mostrar conjunto" lo que hace es dibujarme las propiedades seleccionadas para un selector concreto, pero solo esas. Si yo lo deselecciono, me da todas las propiedades aunque no haya ningún valor seleccionado en ellas. Es una buena idea utilizarlo para descubrir las diferentes propiedades CSS que se pueden aplicar a un elemento. Además, también está bastante bien, porque en muchas de ellas hay dibujos que me permiten entender fácilmente para que sirve cada una de esas propiedades. Voy ahora a trabajar sobre el fondo de los objetos. Quiero hacer que en la parte central tenga un determinado fondo. De hecho, sobre la maqueta que ya tengo pre hecha, puedo ver como efectivamente es una zona en la que va a haber una imagen de fondo. Lo primero, necesito seleccionar ese objeto. Como siempre, me voy al dom, y busco en concreto el "Main", dentro de este "Main" es donde voy a tener que poner ese fondo. Si no estoy seguro, bueno, puedo encogerlo y efectivamente veo que después viene el "Banner", y está el "Main", este es el elemento concreto sobre el que tengo que aplicar esos estilos. Ahora ya me vuelvo al diseñador CSS y le añado un selector para esa etiqueta "Main". Podría utilizar clases, directamente, las que me vienen por defecto, o también puedo utilizar directamente la etiqueta que quiera aplicar, de hecho, se puede ver como me da ayuda también, para poder hacerlo automáticamente. Selecciono ese "Main" y ahora sobre esta etiqueta voy a trabajar sobre el fondo. Hay un apartado entero para el fondo, selecciono ese fondo y la opción más simple, la opción más básica, bueno pues, el selector de color, y poner un color de fondo. Por ejemplo, un tono gris con tonos azulados. Pulso "Intro" y podemos ver como efectivamente se añade ese color. Si en vez de añadir un color de fondo lo que quiero es hacer algo un poco más complejo, también voy a poder. Por ejemplo, puedo irme a "Background image", que sirve para crear o imágenes de fondo o gradientes. Voy a seleccionar el gradiente. Esto me abre una ventana que es parecida a la anterior, pero con un selector en la parte izquierda que me permite generar ese gradiente. Si yo quiero que vaya de derecha a izquierda, puedo girar el selector de ángulo, y veo además el ángulo exacto que me devuelve, por ejemplo 90 grados, aquí vemos como es distinto a sí vuelvo de nuevo a hacer clic y lo vuelvo a poner sobre 180°. Suele ser bastante difícil acertar exactamente el número, así que generalmente es más cómodo poner los grados exactos. Para poder cambiar los colores de este gradiente, seleccionaría el cuadrado que aparece en la parte de la izquierda de la demostración de ese degradado. Entonces, haciendo clic sobre este blanco lo puedo cambiar y puedo poner que tenga un tono suave que sea un poquito más azulado. En realidad tengo varios selectores, puedo hacer clic en cualquier parte de la caja central para seleccionar un color, y puedo modificar su tono en el primero de los primero de los selectores verticales. Hacer que cambie ese tono. Puedo hacer que cambie en su oscuridad en el segundo de los selectores y puedo hacer que cambie también su transparencia. En principio voy a seleccionar un tono gris claro, selecciono el segundo de los colores, me voy de nuevo a la gama de los azules, selecciono un tono más oscuro y cuando pulse en "Intro", inmediatamente me hace ese degradado. Este degradado que todavía tiene más posibilidades. Por ejemplo, puedo utilizar cuenta gotas y eso me sirve para recuperar un colo concreto, dentro de la pantalla. Si quiero utilizar, por ejemplo, los colores que tiene esa fotografía, puedo hacer que el primero de los colores tenga el tono azulado de la arena y el segundo de los colores, selecciono este segundo color, tenga un tono azulado del cielo. Más posibilidades que vamos a tener, es la de añadir nuevos tonos intermedios. Puedo hacer clic en cualquier parte en el medio y añadir un tono cualquiera. Pinchando y arrastrando sobre estos cuadrados de color también puedo modificar cómo se va a aplicar ese degradado, puedo ir cambiándolo. Y pinchando y arrastrando hacia la izquierda, elimina ese color. Cuando ya hay una propiedad que no quiero utilizar, por ejemplo, en realidad este fondo, no lo voy a aplicar realmente, si me pongo encima de esa propiedad sin hacer clic, me muestra una papelera, pues haciendo clic sobre esa papelera, elimina esa propiedad de los estilos CSS. Y como última posibilidad, puedo añadir una imagen. Pinchando en la carpeta puedo moverme dentro de la estructura de carpetas de mi sitio y seleccionar la imagen que quiero utilizar como imagen de fondo, que es esta de aquí. Pulso en aceptar y aquí tendría ya esa imagen guardada como imagen de fondo de ese elemento en concreto. Es interesante tener en cuenta que esta es una imagen de fondo aplicada sobre un objeto, no una imagen colocada como una etiqueta imagen, es muy distinto el concepto.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.