Botó, en fer hover puja una mica i posa ombra
.elementor-widget-button a{
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.elementor-widget-button a:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
L'element fa efecte float pujant i baixant indefinidament
.animate-float {
animation: animateFloat 5s ease-in-out infinite;
}
@keyframes animateFloat {
0% {
transform: translateY(0px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
50% {
transform: translateY(-8px);
box-shadow: 0 20px 30px rgba(0,0,0,0.12);
}
100% {
transform: translateY(0px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
}
L'element fa efecte float pujant i baixant indefinidament
.animate-float {
animation: animateFloat 5s ease-in-out infinite;
}
@keyframes animateFloat {
0% {
transform: translateY(0px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
50% {
transform: translateY(-8px);
box-shadow: 0 20px 30px rgba(0,0,0,0.12);
}
100% {
transform: translateY(0px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
}
text-wrap: balance
Equilibra la llargada de les línies. Ideal per a títols.
h1, h2, h3 {
text-wrap: balance;
}
Aquest és un títol llarg amb text-wrap balance. Aquest és un text-wrap balance. Aquest és un títol llarg amb text-wrap balance
text-wrap: pretty
Millora la llegibilitat dels paràgrafs evitant salts de línia poc naturals i paraules orfes.
No deixarà una paraula sola a la última linia
p {
text-wrap: pretty;
}
Aquest és un paràgraf de prova per veure com text-wrap pretty millora automàticament la composició del text i evita salts estranys.Aquest és un paràgraf de prova per veure com text-wrap pretty millora automàticament la composició del text i evita salts estranys.Aquest és un paràgraf de prova per veure com text-wrap pretty millora automàticament la composició del text i evita salts estranys.Aquest és un paràgraf de prova per veure com text-wrap pretty millora automàticament la composició del text i evita salts estranys. Aquest text deixa una paraula