[css] prosty zapis - ciekawy efekt

Question

Kilka dni temu, zastanawiałem się, a co gdy ...

• w div-ie "utwórz" gradient: background: linear-gradient
• nadaj rozmiar gradient-owi za pomocą: background-size, np. na 400%
• za pomocą: background-position i animation, "przesuwaj" ten gradient

... ciekawy efekt "powstał"  

 

[ on-line ]

<div>
	<div>
		<div></div>
	</div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  :root {
    --animation-duration: 6s;
    --rotate-total-time: calc(var(--animation-duration) / 2);
  }
  body {
    display: grid;
    place-content: center;
    height: 100vh;

    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient var(--animation-duration) ease infinite;
  }
  div {
    display: grid;
    place-content: center;
    width: 60vw;
    height: 60vh;

    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient var(--animation-duration) ease infinite;
  }
  div div {
    width: 40vw;
    height: 40vh;

    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient var(--animation-duration) ease infinite;
  }
  div div div {
    width: 20vw;
    height: 20vh;

    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: 
      gradient var(--animation-duration) ease infinite,
      rotate var(--rotate-total-time) ease-in-out alternate infinite;
  }

  @keyframes gradient {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  @keyframes rotate {
    from {
      rotate: 0;
      border-radius: 0;
    }
    50% {
      border-radius: 50%;
    }
    to {
      rotate: 180deg; /* 360deg */
      border-radius: 0;
    }
  }
</style>

 

 

---

@Wiciorny;

zmodelowanie tego grafiką 3d byłoby fajne, 

 

takie pseudo 3d za pomocą: box-shadow

<style>
  * {
    margin: 0;
    padding: 0;
  }
  :root {
    --animation-duration: 6s;
    --rotate-total-time: calc(var(--animation-duration) / 2);
  }
  body {
    display: grid;
    place-content: center;
    height: 100vh;

    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient var(--animation-duration) ease infinite;
  }
  div {
    display: grid;
    place-content: center;
    width: 60vw;
    height: 60vh;

    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient var(--animation-duration) ease infinite;
    box-shadow: 
      5px 5px 5px #181818, 10px 10px 10px #282828,
      15px 15px 15px #383838, 20px 20px 20px #484848,
      25px 25px 25px #585858, 30px 30px 30px #686868;
  }
  div div {
    width: 40vw;
    height: 40vh;

    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient var(--animation-duration) ease infinite;
  }
  div div div {
    width: 20vw;
    height: 20vh;

    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: 
      gradient var(--animation-duration) ease infinite,
      rotate var(--rotate-total-time) ease-in-out alternate infinite;
  }

  @keyframes gradient {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  @keyframes rotate {
    from {
      rotate: 0;
      border-radius: 0;
    }
    50% {
      border-radius: 50%;
    }
    to {
      rotate: 180deg; /* 360deg */
      border-radius: 0;
    }
  }
</style>

<div>
  <div>
    <div></div>
  </div>
</div>

lub

div {
  /* ... */

  box-shadow: 
    5px 5px 5px #181818, 10px 10px 10px #282828,
    15px 15px 15px #383838, 20px 20px 20px #484848,
    25px 25px 25px #585858, 30px 30px 30px #686868;
  
  border-top: 1px solid #181818;
  border-left: 1px solid #181818;
}

lub

div { 
  /* ... */

  box-shadow: 
    5px 5px 5px rgba(24,24,24,1), 10px 10px 10px rgba(40,40,40,1),
    15px 15px 15px rgba(56,56,56,0.95), 20px 20px 20px rgba(72,72,72,0.95),
    25px 25px 25px rgba(88,88,88,0.5), 30px 30px 30px rgba(104,104,104,0.5);

 border-top: 1px solid rgba(24,24,24,0.25);
 border-left: 1px solid rgba(24,24,24,0.25);
}

lub

div {
  /* ... */

  box-shadow: 
      -1px -1px 1px #ee7752,
      5px 5px 5px rgba(24,24,24,1), 10px 10px 10px rgba(40,40,40,1),
      15px 15px 15px rgba(56,56,56,0.95), 20px 20px 20px rgba(72,72,72,0.95),
      25px 25px 25px rgba(88,88,88,0.5), 30px 30px 30px rgba(104,104,104,0.5);
}

a tu cień, który "nie łamie" praw fizyki 

[ on-line ]

@keyframes rotate {
	from {
		rotate: 0;
		border-radius: 0;
		border-top-color: #ee7752;
		border-left-color: #ee7752;
	}
	50% {
		border-radius: 50%;
		box-shadow: none;
	}
	to {
		rotate: 180deg; /* 360deg */
		border-radius: 0;
		border-top-color: #23d5ab;
		border-left-color: #23d5ab;

		box-shadow: 
			-5px -5px 5px rgba(24, 24, 24, 1), -10px -10px 10px rgba(40, 40, 40, 1),
			-15px -15px 15px rgba(56, 56, 56, 0.95), -20px -20px 20px rgba(72, 72, 72, 0.95),
			-25px -25px 25px rgba(88, 88, 88, 0.5), -30px -30px 30px rgba(104, 104, 104, 0.5);
	}
}

 

Comments

https://russo.xyz/gradient/
opisane to jest tutaj trochę, swoją drogą

Mnie się to w sumie podoba, nie widzę nigdzie sensu zastosowania tego, ale fajnie wygląda- na wygaszacz bym mógł ustawić, chociaż po pewnym czasie może to irytować

---

https://russo.xyz/gradient/
opisane to jest tutaj trochę, swoją drogą

Tak inspiracją był podobny artykuł, który kilkanaście miesięcy temu gdzieś przeczytałem. Niestety nie pamiętam linka, swoją drogą bardzo podobny do tego, co przedstawiłeś.

---

zmodelowanie tego grafiką 3d byłoby fajne, co prawda w innych kolorach u mnie, bo te do mnie nie trafiają, ale ja na razie bawie się optymalizacją bebechów maszyn wirtualnych w Javie więc daleko mi :D do widokowych rzeczy haha