Sombras
Propiedad filterSombras idénticas CSSModos de fusión CSSFormas básicasinsetcircleellipsepolygonpath

<< Imágenes y objetos shape-outside >>

Además de las sombras de texto (text-shadow) y las de caja(box-shadow), tenemos otras sombras bastante útiles que podemos aplicar en nuestras imágenes en este caso.

Propiedad filter

Los filtros de CSS nos permiten dar ciertos efectos a la imágenes como variación de brillo, contraste, cambiar a sepia de manera rápida en el propio navegador sin tener que retocar la imagen. Para ello, haremos uso de la propiedad filter acompañada de la función que queremos darle.

img:nth-child(2){
  /* filter: sepia(100%); */
  /* filter: saturate(200%); */
  /* filter: opacity(50%); */
  /* filter: invert(100%); */
  /* filter: hue-rotate(90deg); */
  /* filter: grayscale(100%); */
  /* filter: drop-shadow(16px 16px 10px black); */
  /* filter: contrast(200%); */
  /* filter: brightness(2); */
  filter: blur(5px);
  /* filter: contrast(175%) brightness(103%); */
}

Sombras idénticas CSS

La propiedad drop-shadow, más conocida como sombras idénticas es similar a la sombra que conseguimos con box-shadow. La sintaxis que se emplea es: drop-shadow(posX posY [size] [color]); .

Modos de fusión CSS

Cuando queremos combinar dos elementos mediante css tenemos las propiedades mix-blend-mode y background-blend-mode que nos permite mezclar colores y superponer elementos. La sintaxis de estas dos propiedades es: mix-blend-mode(normal | <blend-mode>) que aplica un modo de fusión a un elemento y mix-blend-mode(normal | <blend-mode>) que aplica un modo de fusión a un fondo. Además, tenemos la propiedad isolation(auto | isolation) que establece si un elemento debe aislarse del resto.

img:nth-child(2){
    /* mix-blend-mode: normal; */
    /* mix-blend-mode: multiply; */
    /* mix-blend-mode: screen; */
    /* mix-blend-mode: overlay; */
    /* mix-blend-mode: darken; */
    /* mix-blend-mode: lighten; */
    /* mix-blend-mode: color-dodge; */
    /* mix-blend-mode: color-burn; */
    /* mix-blend-mode: hard-light; */
    /* mix-blend-mode: soft-light; */
    /* mix-blend-mode: difference; */
    /* mix-blend-mode: exclusion; */
    /* mix-blend-mode: hue; */
    /* mix-blend-mode: saturation; */
    /* mix-blend-mode: color; */
    /* mix-blend-mode: luminosity; */
    /* mix-blend-mode: plus-darker; */
    /* mix-blend-mode: plus-lighter; */
}

Formas básicas

Podemos utilizar ciertas funciones que crean formas básicas como círculos, rectángulos, polígonos, etc., las cuales nos pueden resultar útiles como recortes (clip-path) o colocaciones con la propiedad shape-outside. Las formas básicas que tenemos son:

inset

La función inset crea un cuadrado o rectángulo donde cada parámetro de entrada que tiene esta función será la distancia desde su punto concreto. Si al final se le añade la palabra clave round estamos diciendo que se establezca un border-radius en cada esquina de los pixeles que le indiquemos.

<body>
    <div class="cuadrado"></div>
    <div class="cuadrado2"></div>
    <div class="rectangulo"></div>
    <div class="rectangulo2"></div>
    <div class="circulo"></div>
    <div class="circulo2"></div>
    <div class="ellipse"></div>
    <div class="polygon"></div>
    <div class="path"></div>
</body>

circle

Para el caso de la función circle, nos permite crear círculos, o semicirculos. Su sintaxis es circle(size at X Y), donde crearía un circulo con un tamaño (size) con el centro en x, y.

.circulo{
  background: red;
  width: 200px;
  height: 200px;
  /* tamaño punto central en x y punto central en y */
  clip-path: circle(50% at 50% 50%);
}
.circulo2{
  background: red;
  width: 200px;
  height: 200px;
  clip-path: circle(50% at 50% 0);
}

ellipse

En este caso, la función ellipse funciona exactamente igual que el círculo pero teniendo en cuenta el ancho (sX) y el alto (sY). Su sintaxis es ellipse(sX sY at x y)

.ellipse{
  background: red;
  width: 200px;
  height: 200px;
  /* tamañox tamañoy en x y */
  clip-path: ellipse(50% 25% at 50% 0);
}

polygon

La función polygon es una de las formas básicas más potentes ya que nos permite crearla a partir de las coordenadas que le demo. Su sintaxis es polygon(x y, x y, ...), crean un polígono siguiendo las coordenadas indicadas.

.polygon{
  background: red;
  width: 200px;
  height: 200px;
  /* tres puntos/coordenadas separadas por comas */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

path

Si queremos algo más flexible y potente tenemos la función path donde podemos crear un trayecto SVG haciendo formas más complejas. La sintaxis es path(coordenadas), Crea una forma basada en un trayecto SGV

.path{
  width: 256px;
  height: 256px;
  background: url("imgs/semipresencial.png") center / cover;
  clip-path: path("m4,87l93,0l29,-84l29,84l93,0l-76,52l29,84l-76,-52l-76,52l29,-84l-76,-52z");
}
Apartados de esta sección
shape-outside

<< Imágenes y objetos shape-outside >>