curso html 5 & jquery - leccion 10
TRANSCRIPT
HTML
CSS
Sombras
La estructura de las sombras aplicadas a cajas (box-shadow) o a texto (text-shadow) tiene 4 valores : DesplazamientoHorizontal DesplazamientoVertical Difuminado Color.
EjemploBox-shadow: 3px 6px 2px black;Box-shadow: 3px -6px 2px black;Box-shadow: -20px -15px 20px black;
Text-shadow: 0px 0px 25px #80ff00; Si no posee desplazamiento horizonta y vertical pero si tiene
un difuminado grande y colo claro en fondo oscuro, creamos un efecto de brillo
Sombra - Efecto Brillo
Añadiendo el valor "inset" como primer valor del conjunto box-shadow seguido de la estructura común, establecemos la sombra de forma interna en el elemento al que se la queramos asignar.
EjemploBox-shadow: inset 10px 10px 5px gray;
Recomendación:◦ Valores horizontales y verticales pequeños◦ Valores difuminado mayor
Sombreado Interno
Para usar múltiples sombras aplicadas al mismo elemento solo hay que separar cada sombra con una coma (,) y respetar la estructura básica.
Ejemplotext-shadow: 1px 1px 0px #585858,
2px 2px 0px #585858,3px 3px 0px #585858,4px 4px 0px #585858,5px 5px 0px black;
Efectos 3D
CSS
Transformaciones
Estructura◦ Transform: tipo(cantidad)◦ Transform: tipoX(cantidad)◦ Transform: tipoY(cantidad)◦ Transform: tipo(cantidadX, cantidadY)
Estructura y sintaxis
Rotar caja.
SintaxisTransform: rotate();
Rotar teniendo como posición origen el centro del elemento Ejemplo
◦ Transform: rotate(10deg);
Rotar teniando como posicion origen esquina superior izquierda Ejemplo
◦ Transform-origin: left top;◦ Transform: rotate(10deg);
Transformación - Rotate
Deformar la caja .
SintaxisTransform: skew();
Por defecto se aplica en sentido horizontal. Ejemplo
◦ Transform: skew(5deg);◦ Transform: skewX(5deg);◦ Transform: skewX(-5deg);◦ Transform: skewY(5deg);◦ Transform: skewX(5deg) skewY(10deg);◦ Transform: skew(5deg, 10deg);
Transformación - Skew
Incrementar el tamaño de la caja.
SintaxisTransform: scale();
Ejemplo◦ Transform: scale(0.5);◦ Transform: scaleX(0.5);◦ Transform: scaleY(0.5);◦ Transform: scale(0.5, 0.8);
Transformación - Scale
Trasladar un elemento de la pagina.
SintaxisTransform: translate();
Por defecto se aplica en sentido horizontal. Ejemplo
◦ Transform: translate(10px);◦ Transform: translateX(10px);◦ Transform: translateX(-10px);◦ Transform: translateY(10px);
Transformación - Translate
Si se define valores diferentes para un mismo atributo, el CSS reconoce como valido el ultimo definido.◦ Transform: rotate(10deg);◦ Transform: skew(5deg);
Para que CSS reconozca todas las variaciones se deben colocar una a continuación de la otra separadas por espacio, no por coma.◦ Transform: rotate(10deg) skew(5deg) translate(-
5px) scaleX(0.8);
Combinar Transformaciones
CSS
Transiciones
A que atributos deseamos aplicar la transición?Transition-property: all;
Cuanto tiempo va a tardar la transición en completarse?Transition-duration: 1s
Cual es la progresión que toma la transición?Transition-timing-function: linear; (todo con la misma velocidad)Valores de aceleración
◦ Ease◦ Ease-in◦ Ease-out◦ Ease-in-out
Cuanto retardo se desea aplicar para comenzar la transicion?Transition-delay: 1s;
Aplicar todas las transiciones en una sola línea.Transition: all 0.3s ease 0.2s;
Div:hover{Transition: all 0.3s ease 0.2s;}
Sintaxis
CSS
Animaciones Keyframe
Los valores de la animación son: ◦ animation-name: indica el nombre que tendrá el keyframe que
se añadirá a continuación◦ animation-duration: tiempo total de la animación◦ animation-iteration-count: veces que se repetirá. Para que sea
en bucle pondremos el valor "infinite" (en el video el nombre de esta propiedad lo dije mal).
◦ animation-delay: retardo con el que comenzará a aplicarse la reproducción de la animación
EjemploDiv:hover{Animation: nombre 1.5s 1}
Valores de la Animación
@keyframe nombre{0%{Transform: sacle(0.5);}50%,80%{Background: yellow;}60%{Background: green;}
}
Keyframes
@keyframe nombre{from{
Transform: rotate(30deg);}
to{ Transform: translate(20px);}
}
Keyframes
CSS
Filtros de Imágenes
Si no saben manejar Photoshop o cualquier otro editor gráfico y desean dar efectos a las imágenes para sus sitios webs, pueden aplicar filtros a imágenes con CSS3 sin tener que hacer nada en la imagen que quieren usar. Simplemente con una sola línea de código CSS pueden aplicar sus efectos a las imágenes, sin saber diseño gráfico, sin saber programar.
En los siguientes ejemplos verán la imagen original sin ningún efecto aplicado y a continuación cómo quedaría esa imagen tras aplicarle el efecto fotográfico con CSS.
Efectos Fotográficos
Efecto Desenfoque
Código HTML:<figure id="desenfoque"> <img src="imagen.jpg"
class="blur" alt=""> </figure> Código CSS:-webkit-filter: blur(Npx); figure .blur{ -webkit-filter:
blur(1.3px); } Se recomienda usar cantidades de píxeles no superiores a 4,
ya que el efecto resultante es tal que puede desconcertar al usuario al no quedar absolutamente nada claro qué es lo que hay en esa zona de la página en la que nosotros queremos que haya una imagen distorsionada. Pero eso lo sabes tú, el resto verá un borrón y no entenderá que ocurre, por eso si quieres usar diferentes grados de desenfoque en cantidades entre 0 y 4 puedes valerte de decimales
Efecto Desenfoque
Efecto Brillo
Código HTML:<figure id="brillo"> <img src="imagen.jpg"
class="brightness" alt=""> </figure>Código CSS:
-webkit-filter: brightness(N); figure .brightness{ -webkit-filter: brightness(1.5); }
Se recomienda usar cantidades no superiores a 3 por la misma razón que en el caso anterior.
Efecto Brillo
Efecto Contraste
Código HTML:<figure id="contraste"> <img src="imagen.jpg"
class="contrast" alt=""> </figure>Código CSS:
-webkit-filter: contrast(N); figure .contrast{ -webkit-filter: contrast(1.3); }
En este caso, no hay un límite recomendado, ya que en cantidades elevadas a efectos visuales no hay diferencia entre ponerle un contrast(20) que un contrast(500), así que la cantidad que le indiques depende de lo que quieras lograr.
Efecto Contraste
Efecto Escala de Grises
Código HTML:<figure id="escala_grises"> <img src="imagen.jpg"
class="grayscale" alt=""> </figure> Código CSS:-webkit-filter: grayscale(N%); figure .grayscale{ -
webkit-filter: grayscale(70%); }
Al aplicar un 100% volvemos la imagen a blanco y negro de forma absoluta en escala de grises, así que de nuevo en este efecto el porcentaje que se tenga que aplicar es en función del objetivo que se desea.
Efecto Escala de Grises
Efecto Rotación de Color
Código HTML:<figure id="rota_color"> <img src="imagen.jpg" class="huerotate"
alt=""> </figure> Código CSS:-webkit-filter: hue-rotate(Ndeg); figure .huerotate{ -webkit-filter: hue-
rotate(90deg); }
Este efecto es muy interesante y para entenderlo hay que observar la rueda de color de la imagen de abajo. La explicación es la siguiente: observen como ejemplo el color rojo del símbolo de la taza de HTML5, y vean dónde se encuentra ese rojo en la rueda de color. Tras aplicarle una rotación de color de 90 grados, ésta rotación siempre se hará hacia la derecha, es decir, en el sentido opuesto a las agujas del reloj. 90 grados a la derecha en esa dirección en la rueda de color nos lleva al verde señalado. Pues bien, es ése verde el que sustituye el rojo inicial, y esa misma transformación se hace con el resto de colores.
Efecto Rotación de Color
Efecto Rotación de Color
Si le aplicáramos una rotación de 180 grados, la imagen tendría los opuestos en la rueda de color.
Efecto Inversión
Código HTML:<figure id="inversion"> <img
src="imagen.jpg" class="invert" alt=""> </figure>
Código CSS:-webkit-filter: invert(N%); figure .invert{ -webkit-
filter: invert(80%); }
Al aplicar un 100% logramos una inversión total en los colores (no confundir con la rotación de color del efecto anterior).
Efecto Inversión
Efecto Opacidad
Código HTML:<figure id="opacidad"> <img src="imagen.jpg"
class="opacity" alt=""> </figure> Código CSS:-webkit-filter: opacity(N%); figure .opacity{ -webkit-
filter: opacity(30%); }
Este efecto que también se puede usar con CSS con "opacity: 0.3;" puede utilizarse como filter usando porcentajes, con la misma lógica que con opacity, es decir, un 0% sería totalmente transparente y un 100% no tendría transparencia alguna.
Efecto Opacidad
Efecto Saturación
Código HTML:<figure id="saturacion"> <img src="imagen.jpg"
class="saturate" alt=""> </figure> Código CSS:-webkit-filter: saturate(N); figure .saturate{ -webkit-
filter: saturate(7); }}
La saturación de una imagen es un efecto básico que debe usarse con cuidado. En este ejemplo se usa una saturación de 7, si se usaran saturaciones más elevadas la imagen comenzaría a pixelarse notoriamente, y quizás el resultado se aleje de nuestro gusto.
Efecto Saturación
Efecto Sepia
Código HTML:<figure id="sepia"> <img src="imagen.jpg"
class="sepia" alt=""> </figure> Código CSS:-webkit-filter: sepia(N%); figure .sepia{ -webkit-filter:
sepia(80%); }
Este efecto es uno de los que más reclamo tiene, incluso muchas cámaras fotográficas lo tienen incluido en el modo de toma de imágenes. El funcionamiento es igual que la escala de grises, pero aplicándole el toque sepia, es decir un 100% sería totalmente con escala de sepia y un 0% sería la imagen original.
Efecto Sepia
Todos estos efectos pueden combinarse, pero recuerden que esta combinación ha de hacerse en una sola línea de código, es decir si quieren aplicarle a una imagen escala de grises y desenfoque, no funcionará si escriben:
◦ figure .combinacion{ -webkit-filter: grayscale(80%); -webkit-filter: blur(2px); }
Combinaciones de efectos fotográficos con CSS3
En tales casos, sólo se aplicaría el último efecto listado, es decir, el desenfoque. Por eso el modo correcto es el siguiente:
◦ figure .combinacion{ -webkit-filter: grayscale(80%) blur(2px); }
Se deben poner todos consecutivamente sin necesidad de separarlos por comas. Pero recuerden que según como hagan las combinaciones unos efectos pueden anular a otros, es decir si por ejemplo, usan una rotación de color y después le aplican un filter sepia al 100%, lógicamente, no habrá colorido aunque hayamos hecho el efecto de rotación de color.
Combinaciones de efectos fotográficos con CSS3
Algo muy interesante de estos efectos es que igualmente pueden aplicarse a videos, y también combinarse unos con otros. El código sería el siguiente:
Código HTML:<video controls width="570" height="321" class="video-
filter" id="video"> <source src="video.mp4" video/mp4; codecs="avc.h264,avc.42E01E,mp4a.40.2"/> </video>
Código CSS:.video-filter{ -webkit-filter: saturate(6) brightness(0.5); }
En este caso a un video le hemos aplicado una saturación algo elevada y un leve aumento del brillo.
Efectos de color en videos
Como conclusión recuerden que el uso de estos efectos debe hacerse de forma coherente y por supuesto en la medida justa, sin abusar. Si se emplean con habilidad pueden ser muy efectivos y útiles para la navegación de usuario.
Por ejemplo, si alguna sección de su sitio web tiene diferentes partes, cada una representada por alguna imagen o logo, para saber cuál de todas las partes es la que el usuario está viendo pueden valerse de tales efectos. Las imágenes que representen las partes que el usuario no está viendo podrían quedarse desenfocadas y en blanco y negro, y la imagen de la zona visible en ese momento en color y resaltada quizás con algo de contraste. Esto mismo puede emplearse en el evento :hover.
Consejos de uso de filtros
Aquí tienen un ejemplo: Código HTML:<figure id="combinado"> <img src="imagen.jpg"
class="combinaciones" alt=""> </figure> Código CSS:figure .combinaciones{ -webkit-filter: blur(2px) grayscale(100%);
-webkit-transition: all 0.4s ease; } figure .combinaciones:hover{ -webkit-filter: blur(0px) grayscale(0%) contrast(4); border-radius: 50%; border: 8px solid green; }
En este caso al posar el rato en la imagen se le quita el desenfoque, también se le quita el escalado de grises y por último se le aplica un contraste y se adorna con un borde redondeado del 50% convirtiendo la imagen en un círculo, si sus dimensiones son cuadradas.
Consejos de uso de filtros
Así que recuerden hacer un uso moderado de estos efectos, emplearlos teniendo en cuenta qué efecto y sensaciones provocará en el usuario.Con habilidad y buen gusto seguro que hará más cool el resultado.
Nota:Estos efectos quizás sólo funcionen al 100% en Google Chrome, con el tiempo se implementarán de forma completa en el resto de navegadores. Por eso notarán que el código css lleva el prefijo -webkit- únicamente. Cuando otros navegadores también reconozcan estos efectos simplemente habría que usarse el prefijo que correspondiese.
Consejos de uso de filtros
CSS
Responsive Design
Manera de orientar el cambio según el tamaño del dispositivo orientado a smartphones.
En primera instancia se debe pensar en un diseño que se adapte a dispositivos mobiles y a partir de ahí desarrollar la pagina para que tome el tamaño de pantallas mas grandes.
Mobile First
Teléfonos en posición horizontal@media screen and (min-width: 480px){
Div{Backgrund: red;}
} Tablet@media screen and (min-width: 767px){
Div{Backgrund: red;}
}
Pantallas de escritorios grandes@media screen and (min-width: 950px){
Div{Backgrund: red;}
}
Responsive Design
CSS
Propiedades Avanzadas
Las variables CSS añaden dos nuevas funcionalidades a los archivos CSS tradicionales:◦ Permiten asignar cualquier valor a una propiedad cuyo nombre podemos elegir
libremente.◦ Permiten reutilizar esos valores en cualquier otra propiedad gracias a la función
var() Este ejemplo sencillo muestra cómo definir y usar una variable CSS::root { --color-principal: #06c; } #foo h1 { color: var(--color-principal); } --color-principal es una propiedad CSS definida arbitrariamente por el
creador de esta hoja de estilos y cuyo valor es #06c. Aunque puedes elegir cualquier nombre para las variables, estos siempre tienen que empezar con dos guiones medios (--).
La función var() obtiene el valor de la propiedad cuyo nombre se indica y lo inserta en el lugar donde se llama a la función. De esta manera, el ejemplo anterior es equivalente a:
#foo h1 { color: #06c; }
Variables
Variables – Navegadores Soportados
Definición--color_principal: #FF0800;--distancia: 50px;
InvocaciónVar(--color_principal);Var(--distancia);
Variables - Sintaxis
La función var() obtiene el valor de la propiedad indicada. Su sintaxis completa es la siguiente:
var(<nombre-propiedad> [, <valor-por-defecto> ]? )
El primer argumento (<nombre-propiedad>) es el nombre completo de la propiedad cuyo valor se quiere obtener. El segundo argumento (<valor-por-defecto>) es opcional y es el valor utilizado cuando la propiedad no existe.
Variables
La función var() también tiene algunas limitaciones. En primer lugar, las variables no se pueden usar como nombre de la propiedad CSS. Por eso el siguiente ejemplo no es equivalente al estilo margin-top: 20px; y el navegador mostraría un mensaje de error:
.foo { --lado: margin-top; var(--lado): 20px; } Igualmente, no puedes usar el valor de una variable
como parte del valor de una propiedad. Por eso el siguiente ejemplo tampoco es equivalente a margin-top: 20px y el navegador mostraría un mensaje de error:
.foo { --separacion: 20; margin-top: var(--separacion)px; } En este último caso, la solución sería utilizar otra
función llamada calc().
Variables
La función calc() es muy útil para realizar cálculos al definir los valores de las propiedades CSS. Todos los navegadores modernos la soportan sin problemas y se puede combinar con las variables CSS.
Ejemplo:.foo { --separacion: 20; margin-top: calc(var(--separacion) * 1px); }
Funcion Calc()
Para empezar hay que saber que ésta propuesta viene desde Microsoft, por lo que actualmente sólo es soportado en Internet Explorer 11 y 12 y el nuevo Microsoft Edge.
Pero si somos Chrome Addicts, podemos utilizarlo en Chrome (no toda la especificación) en nuestro navegador favorito si activamos una determinada flag, vamos a ello.
Grid Layout
Procura tener instalada la última versión de Chrome, y dirígete a la URL chrome://flags
Dentro de las numerosas funcionalidades que nos ofrece, debemos activar la que dice Enable experimental Web Platform features.
Después de activarla, reiniciamos Chrome y ya tendremos habilitada esa funcionalidad.
Grid Layout
Con CSS Grid Layout no importa el orden que ocupen los bloques en el HTML, pues el módulo a través de sus propiedades se encarga de colocarlo en la posición que queramos.
Pero tenemos que ser prácticos y lo más habitual y recomendado es escribir el HTML en el orden semántico, de cara también a mantenibilidad, rastreo de buscadores e indexabilidad en los mismos.
https://css-tricks.com/snippets/css/complete-guide-grid/https://hacks.mozilla.org/2015/09/the-future-of-layout-with-css-grid-layouts/
Grid Layout
Flexbox consiste en contenedores flexibles y elementos de flexión.
Un contenedor de flexión se declara mediante el establecimiento de la propiedad de presentación de un elemento a cualquiera de flexión (traducido como un bloque) o en línea-flex (traducido como en línea).
Dentro de un recipiente flex hay uno o más elementos de flexión.
Nota: Todo fuera de un contenedor de flexión y en su interior un elemento de flexión se representa como de costumbre. Flexbox define el número de elementos de la flexión se colocan dentro de un contenedor flexible.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/http://www.w3schools.com/css/css3_flexbox.asphttps://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
FlexBox Layout
La propiedad flex-direction especifica la dirección de los elementos flexibles en el interior del recipiente flexible. El valor por defecto de flex-direction es la fila (de izquierda a derecha y de arriba a abajo).
Los otros valores son los siguientes:◦ row - Si el sistema de escritura es vertical, los elementos de
flexión será expuesto horizontalmente.◦ row-reverse- Si la escritura en modo (dirección) es de
izquierda a derecha, los elementos de flexión será expuesto derecha a izquierda.
◦ column - Si el sistema de escritura es horizontal, los elementos de flexión será expuesto verticalmente.
◦ column-reverse - Igual que la columna, pero a la inversa.
Flex-Dirección
La propiedad flex-wrap especifica si los elementos de flexión debe envolver o no, si no hay suficiente espacio para ellos en una línea de flexión.
Los valores posibles son los siguientes:◦ nowrap - El valor por defecto. Los elementos flexibles no
envolver – Se muestran en una sola línea.◦ wrap - Los elementos flexibles se envuelva en caso
necesario – Múltiples líneas◦ wrap-invertir - Los elementos flexibles se envuelva, si es
necesario, en orden inverso – Múltiples líneas invertidas
Flex-Contenido
¿Preguntas?
