[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[Meg]

Dat ziet er al een stuk beter uit!

Dit aanpassen naar andere maten werkt niet. Enig idee hoe dat komt?

[css] height: 45px;
width: 100px;[/css]

Gelukt, maar dat is niet mooi.

Ik ben bezig om het nog wat verder te Tweaken, maar zit nu met het volgende:

Cascading Stylesheet:

ttwk-site-menu .site-logo svg {
  display: none !important; /* Verberg het standaard Tweakers SVG-logo */
}

twk-site-menu .site-logo {
  height: 45px !important;
  width: 100px !important;
  background: url(https://tweakers.net/fotoalbum/image/5Ox42ho8JvxT9r20zHJb98Tv.png) no-repeat center/contain !important;
  background-color: transparent !important;
  border-left: 3px solid transparent !important; /* Zorgen dat de linkse rand bestaat voor hover */
  border-bottom: 1px solid transparent !important; /* Zorgen dat de onderste rand bestaat voor hover */
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Alleen transformatie met animatie */
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Mouse-over effect */
twk-site-menu .site-logo:hover {
  transform: rotateY(180deg) scale(1.1); /* Draai direct met geen vertraging */
  background-color: #730d26 !important; /* Achtergrondkleur direct na flip */
  border-left: 3px solid #730d26 !important; /* Lijn links direct na flip */
  border-bottom: 1px solid #730d26 !important; /* Lijn onderaan direct na flip */
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
              background-color 0.8s ease, 
              border-left 0.8s ease, 
              border-bottom 0.8s ease; /* Vertraging voor de kleur- en randveranderingen */
}

Het bovenstaande is wat ik heb, dit werkt perfect (dank AI) maar bij de mouse over is de stijl nog niet helemaal goed, weet iemand hoe ik dat oplos?


Dit is met de "Ode aan Henk" template.

[ Voor 100% gewijzigd door Meg op 27-04-2025 16:26 . Reden: Ik was vergeten Henk te vermelden. ]

[Meg]

Met dank aan de "/me" in regenboog tekst heb ik mijn eigennaam ook met een regenboog effect, maar kan ej dit ook op de rest van de site doen en niet alleen het forum?

* Meg houdt van regenboogkleuren.

Cascading Stylesheet:

div.message[data-owner-id="821329"] a.user {
  background: linear-gradient(45deg, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s infinite linear;
  background-size: 200% 200%;
}
  
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

[Bas170]

Meg schreef op maandag 5 mei 2025 @ 14:28:
Met dank aan de "/me" in regenboog tekst heb ik mijn eigennaam ook met een regenboog effect, maar kan ej dit ook op de rest van de site doen en niet alleen het forum?

* Meg houdt van regenboogkleuren.

Cascading Stylesheet:

div.message[data-owner-id="821329"] a.user {
  background: linear-gradient(45deg, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s infinite linear;
  background-size: 200% 200%;
}
  
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

Ik heb ooit eens iets heel lelijks gemaakt, geen garantie dat het goed werkt:

Taste The Rainbow Of Eternal Suffering

[Meg]

Bas170 schreef op donderdag 15 mei 2025 @ 12:59:
[...]

Ik heb ooit eens iets heel lelijks gemaakt, geen garantie dat het goed werkt:

Taste The Rainbow Of Eternal Suffering

Ga thuis kijken. Dank.

Dat is te erg.

[ Voor 3% gewijzigd door Meg op 15-05-2025 18:29 ]

[evilution]

.

[ Voor 99% gewijzigd door evilution op 24-08-2025 09:01 ]