CSS - Sombras, Transformaciones, Transiciones, Animaciones Keyframe, Filtros de Imagenes, Responsive Design, Propiedades Avanzadas

2. CSS
Sombras

3.  La estructura de las sombras aplicadas a cajas (box-
shadow) o a texto (text-shadow) tiene 4 valores :
DesplazamientoHorizontal DesplazamientoVertical
Difuminado Color.
 Ejemplo
Box-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

4.  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.
 Ejemplo
Box-shadow: inset 10px 10px 5px gray;
 Recomendación:
◦ Valores horizontales y verticales pequeños
◦ Valores difuminado mayor

5.  Para usar múltiples sombras aplicadas al
mismo elemento solo hay que separar cada
sombra con una coma (,) y respetar la
estructura básica.
 Ejemplo
text-shadow: 1px 1px 0px #585858,
2px 2px 0px #585858,
3px 3px 0px #585858,
4px 4px 0px #585858,
5px 5px 0px black;

6. CSS
Transformaciones

7. Estructura
◦ Transform: tipo(cantidad)
◦ Transform: tipoX(cantidad)
◦ Transform: tipoY(cantidad)
◦ Transform: tipo(cantidadX, cantidadY)

8. Rotar caja.
 Sintaxis
Transform: 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);

9. Deformar la caja .
 Sintaxis
Transform: 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);

10. Incrementar el tamaño de la caja.
 Sintaxis
Transform: scale();
 Ejemplo
◦ Transform: scale(0.5);
◦ Transform: scaleX(0.5);
◦ Transform: scaleY(0.5);
◦ Transform: scale(0.5, 0.8);

11.  Trasladar un elemento de la pagina.
 Sintaxis
Transform: translate();
Por defecto se aplica en sentido horizontal.
 Ejemplo
◦ Transform: translate(10px);
◦ Transform: translateX(10px);
◦ Transform: translateX(-10px);
◦ Transform: translateY(10px);

12.  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);

13. CSS
Transiciones

14.  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;
}

15. CSS
Animaciones Keyframe

16.  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
 Ejemplo
Div:hover{
Animation: nombre 1.5s 1
}

17. @keyframe nombre{
0%{
Transform: sacle(0.5);
}
50%,80%{
Background: yellow;
}
60%{
Background: green;
}
}

18. @keyframe nombre{
from{
Transform: rotate(30deg);
}
to{
Transform: translate(20px);
}
}

19. CSS
Filtros de Imágenes

20.  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.

22.  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

24.  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.

26.  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.

28.  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.

30.  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.

31. Si le aplicáramos una rotación de 180 grados, la imagen tendría los
opuestos en la rueda de color.

33.  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).

35.  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.

37.  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.

39.  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.

40.  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); }

41.  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.

42.  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.

43.  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.

44. 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.

45.  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.

46. CSS
Responsive Design

47.  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.

48.  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;
}
}

49. CSS
Propiedades Avanzadas

50.  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; }

52.  Definición
--color_principal: #FF0800;
--distancia: 50px;
 Invocación
Var(--color_principal);
Var(--distancia);

53.  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.

54.  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().

55.  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); }

56.  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.

57.  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.

58.  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/

59.  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.asp
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Lay
out/Usando_las_cajas_flexibles_CSS

60.  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.

61.  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

63. Emmanuel Ortiz
Consultor Sr.
emmanueltiz@gmail.com
email / gtalk
emmanueltiz
Skype