css [Lingao's Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== The Coolest Animated SVG Filter Effect ======

https://www.youtube.com/watch?v=Nd70iyFT1r8

====== CSS Transform: Rotating a 3D object with perspective based on mouse position ======

https://armandocanals.com/posts/CSS-transform-rotating-a-3D-object-perspective-based-on-mouse-position.html

====== 3D Button ======

https://www.joshwcomeau.com/animation/3d-button/

====== Grid ======

https://css-tricks.com/snippets/css/complete-guide-grid/

====== Animation ======

https://blog.hubspot.com/website/css-animation-examples

====== How to make border linear gradient ======

Use **multiple background**, then use **background-origin** and **background-clip**.

> The background-origin property is used to determine how the background-position of a background in a certain box is calculated.
> The background-clip property is used to determine whether the backgrounds extends into the border or not.

<codeprism lang=css>
background: linear-gradient(to right, white, black), linear-gradient(to top, blue, red);
border: 5px solid transparent;
border-radius: 30px;
background-origin: border-box;
background-clip: padding-box, border-box;
</codeprism>