css - texto - transicion de imagenes en html

Gooey css efectos con contraste padre

Question

Estoy intentando crear un efecto pegajoso solo con CSS (sin svg) . Todo va bien, pero mi contenedor principal tiene un contrast filter y no puedo usar colores en mis elementos secundarios (el filtro de contraste cambia los colores).

¿Alguien sabe de una manera básica de hacer este efecto con solo CSS o invertir el filtro de contraste para obtener los colores correctos en los elementos secundarios?

Mi código:

body{
  background: #fff;
}

.blobs {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #fff;
  width:400px;
  height:200px;
  margin:auto;
  filter:contrast(20);
  -webkit-filter:contrast(20);
}

.blob {
  background:black;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
  border-radius:100%;
  transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s;
  -webkit-transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s;
  box-shadow: 0 0 30px 10px black;
}

.blobs:hover .blob:first-child {
  transform:translateX(-70px);
}

.blobs:hover .blob:last-child {
  transform:translateX(70px);
}

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>

Cuando estoy coloreando los elementos del niño:

body{
  background: #fff;
}

.blobs {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #fff;
  width:400px;
  height:200px;
  margin:auto;
  filter:contrast(20);
  -webkit-filter:contrast(20);
}

.blob {
  background: rgb(255, 113, 93);
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
  border-radius:100%;
  transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s;
  -webkit-transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s;
  box-shadow: 0 0 30px 10px rgb(255, 113, 93);
}

.blobs:hover .blob:first-child {
  transform:translateX(-70px);
}

.blobs:hover .blob:last-child {
  transform:translateX(70px);
}

.original-color {
  height: 100px;
  background: rgb(255, 113, 93);
}

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>
<div class="original-color"></div>

Mi violín

Answer 1

He tomado tu efecto. En el contenedor, he establecido un pseudo elemento que lo cubre, con el color que desee.

Y con un modo de mezcla-mezcla, puedo establecer este color donde el contenedor es negro, manteniendo el resto de blanco:

(Por cierto, un efecto muy bonito!)

body{
  background: #fff;
}

.blobs {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #fff;
  width:400px;
  height:200px;
  margin:auto;
  filter:contrast(20);
  -webkit-filter:contrast(20);
}

.blobs:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color: coral;  
  mix-blend-mode: lighten;
}

.blob {
  background:black;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
  border-radius:100%;
  transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;
  box-shadow: 0 0 30px 10px black;
}

.blobs:hover .blob:first-child {
  transform:translateX(-70px);
}

.blobs:hover .blob:last-child {
  transform:translateX(70px);
}

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>

Agregó otra forma de obtener su solicitud. Esto es más difícil de configurar, pero funcionará en Edge, donde el filtro está disponible pero los modos de mezcla no lo hacen.

Este fragmento implica el uso de 2 de su configuración anterior y un color primario diferente para cada uno. (Ya podrías lograr colores primarios con tu configuración original).

Para obtener un color en particular, establece diferentes alfas en la configuración 2, y de alguna manera puede lograr el color que desee (aunque el proceso no es fácil)

body{
  background: #fff;
}

.blobs {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #fff;
  width:400px;
  height:200px;
  margin:auto;
  filter:contrast(20);
  -webkit-filter:contrast(20);
  opacity: 0.99;
}


.blob {
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
  border-radius:100%;
  transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 2.5s;
}

.blobs:hover .blob:first-child,  
.blobs:hover ~ .blobs .blob:first-child {
  transform:translateX(-70px);
}
.blobs:hover .blob:last-child, 
.blobs:hover ~ .blobs .blob:last-child {
  transform:translateX(70px);
}
.blobs:nth-child(1)  {
  opacity: 0.57;
}
.blobs:nth-child(1) .blob {
  background: red;
  box-shadow: 0 0 30px 10px red;
}
.blobs:nth-child(2)  {
  pointer-events: none;
  opacity: 0.08;
}
.blobs:nth-child(2) .blob {
  background: yellow;
  box-shadow: 0 0 30px 10px yellow;
}
.test {
    width: 100px;
  height: 100px;
  position: absolute;
  left: 0px;
  background-color: rgb(255, 113, 93);
}

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>
<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>
<div class="test"></div>

Otro intento, esta vez con un filtro más complejo.

El color se consigue con un tono-rotar.

body {
  background: #fff;
}
.blobs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  width: 400px;
  height: 200px;
  margin: auto;
  -webkit-filter: contrast(20) hue-rotate(-25deg);
  filter: contrast(20) hue-rotate(-25deg);
}
.blob {
  background: red;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 100%;
  transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;
  box-shadow: 0 0 30px 10px red;
}
.blobs:hover .blob:first-child {
  transform: translateX(-70px);
}
.blobs:hover .blob:last-child {
  transform: translateX(70px);
}

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>

Otro intento, esta vez un solo div ....

.test {
  border: 1px solid black;
  width: 600px;
  height: 400px;
  background-color: white;
  background-image: radial-gradient(circle, red 100px, transparent 140px), radial-gradient(circle, red 100px, transparent 140px);
  background-position: -150px 0px, 150px 0px;
  background-repeat: no-repeat;
  -webkit-filter: contrast(20) hue-rotate(35deg);
  filter: contrast(20) hue-rotate(35deg);
  transition: background-position 2s;
  animation: crazy 13s infinite steps(12);
}
.test:hover {
  background-position: 0px 0px, 0px 0px;
}
@keyframes crazy {
  from {
    filter: contrast(20) hue-rotate(0deg);
  }
  to {
    filter: contrast(20) hue-rotate(360deg);
  }
}

<div class="test"></div>

Tratando de conseguir una solución que funcione en múltiples navegadores. Se agregó javascript para verificar el modo de mezcla disponible.

Simplemente haga clic en el botón para ejecutar la función.

function check () {
  if(''CSS'' in window && ''supports'' in window.CSS) {
    var support = window.CSS.supports(''mix-blend-mode'',''lighten'');
    if ( ! support) {
      var element = document.getElementById(''blobs'');
      element.classList.add(''compat'');
    }
}
}

body{
  background: #fff;
}

.blobs {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #fff;
  width:400px;
  height:200px;
  margin:auto;
  filter:contrast(20);
  -webkit-filter:contrast(20);
}

.blobs:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color: coral;  
  mix-blend-mode: lighten;
}

.blob {
  background:black;
  box-shadow: 0 0 30px 10px black;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
  border-radius:100%;
  transition: cubic-bezier(0.82, 0.1, 0.24, 0.99) 1.5s;
}

.blobs:hover .blob:first-child {
  transform:translateX(-70px);
}

.blobs:hover .blob:last-child {
  transform:translateX(70px);
}

/* compatibility */

.blobs.compat {
  -webkit-filter:contrast(20)  hue-rotate(-25deg);
  filter:contrast(20)   hue-rotate(-25deg);
}
.blobs.compat:after {
  content: none;
}

.compat .blob {
  background: red;
  box-shadow: 0 0 30px 10px red;
}

<div class="blobs" id="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>
<button onclick="check()">Check</button>

Answer 2

Para esta respuesta, solo tuve que hacer un cambio en la propiedad de filtro

contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45)

• Primero, establecemos el contraste en 15 (20 hicieron los bordes un poco demasiado duros, si me preguntas)
• Luego lo volvemos a poner en .5 (Sí, puedes apilar estas cosas)

Así que ahora tenemos un fondo lightgray y manchas darkgray

• Aplicar sepia (que le da un color).
• Agregue 1.85 brillo (ahora el fondo es blanco otra vez, y tenemos manchas de colores)
• hue-rotate para llegar al tono correcto
• Saturar para darle su saturación.

Las últimas tres propiedades en la lista son esenciales para obtener el color correcto. Su objetivo es rgb (255, 113, 93). Con esta línea aplicada, los colores son rgb (255, 115, 94)

Puedes verlo trabajar en este violín.

Como nota al margen. También puede apilar transformaciones, lo que significa que si desea centrar los blobs, no tendrá que usar márgenes negativos, sino el truco de translate(-50%, -50%) . Luego, cuando se desplaza sobre ellos, simplemente puede apilar las transformaciones como esta translate(-50%, -50%) translateX(-70px)