Fabrizio Calderan
@fabrizio.dev
🇮🇹
INTJ and introvert.
MSc. at Ca' Foscari university (Venice, ITA).
Inclusive Frontend Developer (A11y) & CSS lover.
Also: Dad, 5-string bass player
https://fabrizio.dev/
—
INTJ and introvert.
MSc. at Ca' Foscari university (Venice, ITA).
Inclusive Frontend Developer (A11y) & CSS lover.
Also: Dad, 5-string bass player
https://fabrizio.dev/
—
A #CSS hover effect by animating the grid-template-columns and gap properties of a 2-column grid element:
.link {
grid-template-columns: auto var(--len, 0fr);
gap: var(--gap, 0);
transition: .33s;
&:is(:hover, :focus) {
--len: 1fr;
--gap: .5rem;
}
Code in the reply 👇🏻
.link {
grid-template-columns: auto var(--len, 0fr);
gap: var(--gap, 0);
transition: .33s;
&:is(:hover, :focus) {
--len: 1fr;
--gap: .5rem;
}
Code in the reply 👇🏻
November 20, 2024 at 3:52 PM
A #CSS hover effect by animating the grid-template-columns and gap properties of a 2-column grid element:
.link {
grid-template-columns: auto var(--len, 0fr);
gap: var(--gap, 0);
transition: .33s;
&:is(:hover, :focus) {
--len: 1fr;
--gap: .5rem;
}
Code in the reply 👇🏻
.link {
grid-template-columns: auto var(--len, 0fr);
gap: var(--gap, 0);
transition: .33s;
&:is(:hover, :focus) {
--len: 1fr;
--gap: .5rem;
}
Code in the reply 👇🏻