We can do a transition from background-size: 0 to background-size: 100%. With background-size, we can omit the height because gradients are full height by default. Both color stops are 0, so the browser automatically makes the last one 100% and fills our gradient with the same color. The syntax might look a bit strange, but we are telling the browser that one color is applied to two color stops, and that’s enough to define a gradient in CSS. That can be customised by setting link-hover. It will fade the element to an opacity of 50 in 150ms. We first transform our gradient to use the color only once: background-image: linear-gradient(#1095c1 0 0) The background color also changes when the mouse moves over the links because that is the default behavior. You can dim any element, including text links on hover and focus with the dim class. That means the width is going from 0 to 100% while the background itself remains at full height. We are animating the size of a linear gradient from 0 100% to 100% 100%.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |