Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
| Linha 91: | Linha 91: | ||
border-radius: 8px; | border-radius: 8px; | ||
background: #fff; | background: #fff; | ||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease; | |||
transition: box-shadow 0.3s ease, border-color 0.3s ease; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
will-change: transform; | |||
} | } | ||
.home-button-item:hover { | .home-button-item:hover { | ||
/* Combina leve elevação e scale para um efeito dinâmico */ | |||
transform: translateY(-3px) scale(1.02); | |||
border-color: #007bff; | border-color: #007bff; | ||
box-shadow: 0 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); | ||
} | } | ||
| Linha 118: | Linha 120: | ||
object-fit: cover; | object-fit: cover; | ||
display: block; | display: block; | ||
transition: | transition: filter 0.3s ease; | ||
will-change: transform; | will-change: transform; | ||
backface-visibility: hidden; | backface-visibility: hidden; | ||
transform: translateZ(0); | transform: translateZ(0); | ||
} | } | ||
.home-button-item:hover .home-button-image img { | .home-button-item:hover .home-button-image img { | ||
filter: brightness(1.1); | filter: brightness(1.1); | ||
| Linha 147: | Linha 150: | ||
} | } | ||
/* Responsividade: 2 colunas | /* Responsividade: em telas com largura ≤1280px, 2 colunas */ | ||
@media (max-width: 1280px) { | @media (max-width: 1280px) { | ||
.home-button-container { | .home-button-container { | ||
| Linha 153: | Linha 156: | ||
} | } | ||
} | } | ||
</style> | </style> | ||
Edição das 20h57min de 28 de março de 2025
<style> .home-button-container {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; box-sizing: border-box;
}
.home-button-item {
position: relative; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; background: #fff; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease; box-sizing: border-box; will-change: transform;
}
.home-button-item:hover {
/* Combina leve elevação e scale para um efeito dinâmico */ transform: translateY(-3px) scale(1.02); border-color: #007bff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.home-button-item a {
display: block; text-decoration: none; color: inherit;
}
.home-button-image {
width: 100%; aspect-ratio: 16/9; overflow: hidden;
}
.home-button-image img {
width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s ease; will-change: transform; backface-visibility: hidden; transform: translateZ(0);
}
.home-button-item:hover .home-button-image img {
filter: brightness(1.1);
}
.home-button-title {
font-weight: bold; font-size: 1.1em; background: #fff; color: #000; margin: 0; padding: 10px 5px; position: relative; text-transform: uppercase; border-top: 1px solid #ddd; text-align: center; transition: background-color 0.3s ease, transform 0.3s ease; transform: translateY(0);
}
.home-button-item:hover .home-button-title {
background-color: #f9f9f9; transform: translateY(-2px);
}
/* Responsividade: em telas com largura ≤1280px, 2 colunas */ @media (max-width: 1280px) {
.home-button-container {
grid-template-columns: repeat(2, 1fr);
}
}
</style>