Si utilizamos Photoshop para tratar las imágenes antes de subirlas a nuestro WordPress, estaremos machacando las propiedades originales de la imagen y perderemos la oportunidad de realizar cambios posteriores o animaciones. Encajar y posicionar imágenes, filtros, recortes, colores, canales… Conociendo las propiedades CSS para tratar nuestras imágenes, podremos hacer rápidamente los cambios que nos pide nuestro cliente o nosotros mismos y no tendremos que buscar en vete-tú-a-saber-qué-disco-duro, dónde está la foto original. Veremos en qué ocasiones se pueden utilizar programas de retoque fotográfico, cuándo es mejor hacerlo con código y cómo aplicar las propiedades CSS. Qué van a aprender los asistentes: Aprenderán las propiedades CSS que se utilizan para el tratamiento de imágenes y cómo aplicarlas en WordPress, teniendo en cuenta sus peculiaridades en la gestión de medios. Además, comprenderán la importancia de no utilizar programas de retoque fotográfico —como Photoshop—, para manipular las imágenes, ya que utilizando CSS conservamos las propiedades originales y además podemos realizar animaciones.

1. @acirujano | #WCMad
Deja de abusar
de Photoshop:
trata las imágenes con CSS
Ana Cirujano | WorCamp Madrid | 5 de abril de 2019

2. Ana Cirujano
Diseñadora visual y de interacción
especializada en WordPress
@acirujano
anacirujano.com
easyworkation.com
Coordinadora del equipo de Diseño de WordPress España.
Co-organizadora de la Meetup de WordPress Villalba.
Co-organizadora de la Meetup de WordPress Torrelodones.
Contribuidora del equipo de WordPress.tv
y del equipo de Traducciones de WordPress España.
Ponente en WordCamps: Santander 2017, Zaragoza 2018
y 2019, Las Palmas de Gran Canaria 2018 y 2019,
Madrid 2018, Bilbao 2018, Irun 2018, Sevilla 2018,
Valencia 2018, Pontevedra 2018, Granada 2018.
Voluntaria en WordCamp Brighton 2018
y WordCamp Barcelona 2018.

4. ¿Qué es WordPress
y cómo funciona?

5. @acirujano | #WCMad

6. Separar contenido
de apariencia

7. @acirujano | #WCMad

8. Introducción básica
a HTML y CSS

9. @acirujano | #WCMad
selector {
propiedad: valor;
}

10. Programas de retoque
fotográfico, ¿cuándo usarlos?
Para todo lo demás: CSS

11. @acirujano | #WCMad

12. @acirujano | #WCMad

13. @acirujano | #WCMad

14. Tratamiento de imágenes
con CSS

15. Tratamiento de imágenes
con CSS
—Filtros

16. @acirujano | #WCMad

17. @acirujano | #WCMad

18. @acirujano | #WCMad
.imagen {
filter:grayscale(100%);
}

19. @acirujano | #WCMad
blur brightness contrast drop-shadow hue-rotate
invert opacity saturate sepia contrast +
brightness
Fuente de la imagen

20. Tratamiento de imágenes
con CSS
—Transiciones

21. @acirujano | #WCMad
transition: <propiedad> <duración> <función-tiempo> <retraso>;

22. @acirujano | #WCMad
img {
transition: all 0.8s linear;
}

23. Tratamiento de imágenes
con CSS
—Degradados

24. @acirujano | #WCMad
.imagen-de-fondo {
background-image: linear-gradient(rgba(25,209,231,.5), rgba(243,17,224,.5)),
url(https://www.easyworkation.com/wp-content/uploads/2018/11/cropped-Ana-10-1.jpg);
}

25. Tratamiento de imágenes
con CSS
—Recortes

26. @acirujano | #WCMad

27. @acirujano | #WCMad Fuente de la imagen
img {
border-radius: 50%;
}

28. @acirujano | #WCMad

29. @acirujano | #WCMad

30. @acirujano | #WCMad

31. @acirujano | #WCMad
.madrid {
object-fit: contain;
}

32. @acirujano | #WCMad
.madrid {
object-fit: cover;
}

33. @acirujano | #WCMad
.madrid {
object-fit: cover;
object-position: 15% 0;
}

34. @acirujano | #WCMad

35. Tratamiento de imágenes
con CSS
—Animaciones

36. @acirujano | #WCMad
animation: <name> <duration> <timing-function> <delay> <iteration-count>
<direction> <fill-mode> <play-state>;

37. @acirujano | #WCMad
body {
display: flex;
justify-content: center;
}
@keyframes CambiaFormas {
0% {
clip-path: polygon(50% 0%, 67% 27%, 98% 35%, 76% 60%, 79% 91%, 49% 78%,
21% 91%, 23% 62%, 2% 35%, 33% 26%);
}
50% {
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%,
20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
100% {
clip-path: polygon(50% 0%, 60% 20%, 90% 30%, 70% 40%, 70% 90%, 40% 70%,
10% 90%, 20% 50%, 10% 30%, 30% 20%);
}
}
img {
object-fit: cover;
width: 25rem;
height: 25rem;
animation: CambiaFormas 3s alternate infinite;
}

38. ¡Gracias!