Dreamweaver CC 2017 esencial

CSS3: transiciones y sombras

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Por último, seguiremos aplicando efectos avanzados, creando transiciones entre clases CSS y añadiendo sombras sobre un contenedor, y veremos que, aunque sean propiedades complejas, Dreamweaver nos lo hace muy fácil.

Transcripción

Hay algunas propiedades que son muy visuales que se pueden ver muy fácilmente como el margen o el padding, hay otras que no son tan claras. Si me voy a la parte de fondo un poco más abajo de la parte de fondo voy a encontrarme algunas opciones, algunas sirven para ver si se tienen que repetir o no una imagen de fondo o en qué posición concreta tiene que aparecer ese fondo dentro de un objeto. Y también un poco más abajo tenemos el Box-shadow. Este Box-Shadow sirve para añadir sombra. Supongamos que yo quiero poner una sombra dentro de este objeto, en realidad es a lo que tiendo, porque debería de añadir esta pequeña sombra interior que aparece en la parte superior. Pues vamos a ver cómo podemos hacerlo. Añadir una sombra es muy fácil, selecciono en "H-shadow", o sea, la sombra horizontal, por ejemplo le pongo 6 pixels, en la sombra vertical le pongo otros 6 pixels, y estamos viendo, efectivamente, cómo nos crea esas sombras. Aunque realmente me las está creando donde no tiene que ser, porque las está añadiendo dentro del selector de imagen. Hay que acordarse siempre de que, aunque esté aquí seleccionado, a dónde tengo que irme es al selector en concreto sobre el que quiero hacer modificaciones. Hemos visto cómo se añade esa sombra, pero quiero que caiga verticalmente, así que voy a mantener el valor 0 para el desplazamiento de la sombra horizontal, y voy a añadir solamente 6 pixels en la sombra vertical. Y aquí abajo se puede ver esa sombra. Pero esa sombra es demasiado exacta, necesito que además esté difuminada, así que le voy a añadir una propiedad ''Blur'' de 10 pixels. Ahora ya podemos ver como esa sombra se genera y tiene, además, un difuminado. Sin embargo, esta sombra se está generando fuera de la caja, y yo quiero que se genere dentro de esa caja. Para conseguirlo, tengo la opción Inset, aquí en la parte inferior. Pulsando sobre ella, me aplica la sombra por dentro. Pero como tiene mucho difuminado, también me estoy encontrando con que me añade algo de difuminado en los laterales, y yo solo quiero ese difuminado en la parte superior. Añadiendo un valor negativo sobre el Spread, menos 6 pixels, consigo que se suavice esa sombra, y además, se elimine la sombra que aparece en los laterales. Como podemos ver no se hace esta sombra, no se genera de una manera tan visual, sin embargo, hemos podido crear esa sombra muy fácil. Podría cambiarle el color, aunque en realidad el color que viene por defecto me parece bien. De todas formas, es interesante pararme un segundo, irme a los estilos CSS, y mirar el código que se ha generado. Este código que se ha generado ha sido la propiedad Box-Shadow, pero además, me ha añadido ese mismo Box-Shadow previamente con un pequeño prefijo. Ese prefijo Web kit, sirve para que el navegador el Safari en concreto, también sea capaz de interpretar cómo tiene que hacer esa sombra. Porque hay algunos navegadores que para algunas propiedades CSS 3 necesitan estos prefijos. Estos prefijos se pueden configurar dentro de Edición Preferencias y dentro de ellas en Estilos CSS, aquí tenemos los Prefijos de CSS que me va a añadir cuando sea necesario. En este caso solo hacía falta uno, pero hay veces que hacen falta los tres. Y esto en cuanto a las sombras. Otra cosa interesante es que mientras yo estoy trabajando en la vista En vivo y estoy haciendo modificaciones sobre estos objetos, estas modificaciones que hago en el Diseñador CSS, se van a ejecutar realmente sobre los archivos de estilo, que es un archivo distinto, así que tengo que acordarme de guardar este archivo, para que no pierda los cambios si hay cualquier tipo de problema. Y hay otras propiedades que pueden resultar un poco complejas, por ejemplo, supongamos que yo quiero que cuando se pase por encima de cualquiera de estos enlaces, inmediatamente me cambie de color, incluso cambie ese grosor, o incluso que lo haga con una pequeña animación. ¿Cómo puedo conseguirlo? Me voy a ir a los estilos, me voy a ir a la vista de Código. Esto es importante, hay algunas características que no voy a tener acceso a ellas desde el Diseñador CSS, características muy específicas, o que voy a tener acceso a ellas, pero va a ser programando, por ejemplo, en mi caso, tengo un selector, este en concreto, que sirve para los enlaces. Pero yo quiero que haya un selector nuevo que me sirva para que cuando se pase por encima de un enlace, haya modificaciones. Voy a copiar con Ctrl+C o Cmd+C en Mac, y voy a pegar ese mismo selector pero le voy a añadir: :hover eso sirve para hacer que una determinada propiedad cambie cuando pasa el cursor por encima del objeto seleccionado. Y voy a copiar este mismo código, pero voy a hacer modificaciones sobre él. En vez de tener 2 pixels voy a querer que tenga 10 pixels de alto. Y a parte voy a modificar su color. Ese color lo cambio fácilmente, podría escribirlo aquí si me lo supiese de memoria, pero realmente no me lo sé de memoria. Es interesante ver que cuando me pongo encima de un color, me muestra ese color, pero yo lo que quiero es cambiarlo, no que me lo muestre, pues utilizando el Quick edit, o Edición rápida, Ctrl+E o Cmd+E en Mac, puedo abrir el selector de color, y buscar un tono naranja. Hago clic cuando tengo ese color ya guardado, me voy a la vista En vivo, y aquí vemos como efectivamente me cambia esa línea en el momento en el que paso por encima. Voy a volverme a la vista de Código, se pueden aplicar más opciones por ejemplo, puedo crear una transición, puedo hacer que haya una pequeña transición, una pequeña animación, para que cambie ese color y ese alto, pero lo haga suavemente como una animación. En realidad eso podría haberlo hecho desde Más, y aquí empezar a escribir ese Transition. Aquí lo podemos ver, o cualquiera de sus propiedades. En vez de hacerlo desde ahí, lo haré desde el código porque me sirve para enseñar una cosa más. Pulso Ctrl+Barra espaciadora, y busco la propiedad que me interesa. Transición. Si tengo dudas sobre ella, puedo irme siempre a la página web en la que se explica, de todas formas, no lo necesito. Es una propiedad esta en la que, por un lado, especificar la propiedad sobre la que se va a aplicar, por ejemplo, podría pedir que fuese sobre el Border button, o puedo poner All, y así hacer que se aplique sobre cualquier propiedad, y luego voy a definir el número de segundos que quiero que tarde, por ejemplo, 2 segundos. En realidad, además de este código, tendré que añadir los prefijos que vaya a necesitar específicamente para los diferentes navegadores. Si ahora lo guardo y me voy a la vista En vivo, al pasar por encima, vemos como poco a poco me ejecuta esa transición. La he hecho muy lenta, no queda bonito, pero lo he hecho adrede para que se pueda ver el efecto. También podemos añadir que la animación se haga con una determinada aceleración, por ejemplo, que se haga un Ease-In-Out O sea, que tenga una pequeña aceleración al principio, y al final, e incluso esto también lo puedo controlar, y Dreamweaver nos ofrece una herramienta que está muy bien para controlarlo gráficamente. Y es que utilizando Quick edit, pulsando con Ctrl+E, cuando tengo el cursor sobre ese código puedo ver la curva de aceleración que tiene ese tipo de aceleración en concreto. Y pinchando y modificando sobre los selectores de los dos puntos de esa curva, puedo hacer cambios sobre esa aceleración. Cuando lo tengo listo, vuelvo de nuevo a pulsar Ctrl+E y lo guardo. Y aquí vemos que, efectivamente, a cambiado una de las que viene por defecto, por una curva Bezier, en la que se definen los puntos que crean esa curva. Ahora la animación tiene que venir con un poco más de aceleración en el momento en el que se está ejecutando.

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.