Bonjour à tous,
J'utilise wordpress et elementor.
J'ai réussi à appliquer un code pour créer un effet sur mes cartes.
Tout est ok sur ordinateur et mobile par contre sur tablette l'effet n'est pas fou, l'effet n'est pas homogène, on voit des rectangles en arrière-plan.
Savez-vous d'où cela peut venir ?
Voici le code :
edit : ajout de la balise[code]
Modifié par gcyrillus (05 Feb 2025 - 16:47)
J'utilise wordpress et elementor.
J'ai réussi à appliquer un code pour créer un effet sur mes cartes.
Tout est ok sur ordinateur et mobile par contre sur tablette l'effet n'est pas fou, l'effet n'est pas homogène, on voit des rectangles en arrière-plan.
Savez-vous d'où cela peut venir ?
Voici le code :
/* Variables pour les couleurs */
selector {
--first-color: #007dff;
--second-color: #a2252e;
--third-color: #ff6600;
}
/* Déclaration de la propriété CSS personnalisée */
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
/* Avant et après de selector */
selector::before,
selector::after {
opacity: 0;
content: "";
transition: all 0.5s ease-in-out;
}
selector::before,
selector::after {
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate),
var(--first-color),
var(--second-color) 43%,
var(--third-color)
);
animation: spin 2.5s linear infinite;
opacity: 1;
}
/* Avant */
selector::before {
width: 99%;
height: 89%;
border-radius: 100px;
top: 10%;
left: 0;
}
/* Après */
selector::after {
top: 0;
left: 0;
right: 0;
height: 90%;
width: 90%;
transform: scale(0.9);
filter: blur(100px);
}
/* Animation */
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
/* Tablettes en mode portrait et paysage */
@media (min-width: 768px) and (max-width: 1366px) {
selector::before {
width: 99%;
height: 80%; /* Réduction de la hauteur */
border-radius: 100px;
top: 5%; /* Ajustement position */
left: 0;
}
selector::after {
height: 80%; /* Réduction de la hauteur */
width: 90%;
top: 0;
left: 0;
right: 0;
transform: scale(0.9);
filter: blur(100px);
}
}
/* Mobile (conservé de l'original) */
@media (max-width: 768px) {
selector::before {
width: 90%;
height: 80%;
top: 15%;
left: 5%;
}
selector::after {
width: 80%;
height: 75%;
top: 10%;
left: 10%;
filter: blur(60px);
}
}edit : ajout de la balise[code]
Modifié par gcyrillus (05 Feb 2025 - 16:47)