Biblioteca de codis
Elementor: Botó, en fer hover puja una mica i posa ombra
Al següent codi tenim en compte el widget Button i també el botó del formulari d'Elementor (formulari v3)
.elementor-widget-button a,
.elementor-field-type-submit .elementor-button{
transition: transform 0.3s ease, box-shadow 0.5s ease;
}
.elementor-widget-button a:hover,
.elementor-field-type-submit .elementor-button:hover{
transform: translateY(-5px);
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);
}
}
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 paràgraf té l'estil aplicat i no deixarà una paraula sola al final del text. Provant un dos tres.
Aquest paràgraf no té l'estil aplicat i deixa una paraula sola al final del text. Provant un dos tres.