{"id":3145,"date":"2020-01-22T14:23:43","date_gmt":"2020-01-22T14:23:43","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3145"},"modified":"2023-02-12T03:07:48","modified_gmt":"2023-02-12T03:07:48","slug":"css-tutorial-animating-a-css-gradient-border","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-animating-a-css-gradient-border\/","title":{"rendered":"CSS Tutorial &#8211; Animating a CSS Gradient Border"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; This little trick for gradient borders is super useful:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.border-gradient {\r\n  border: 5px solid;\r\n  border-image-slice: 1;\r\n  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);\r\n}<\/pre>\n<p><a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/ZVYXRx\" rel=\"noopener\">Here\u2019s some basic demos<\/a>\u00a0from our\u00a0article on the subject. Sephanie Eckles was\u00a0<a href=\"https:\/\/twitter.com\/5t3ph\/status\/1337376983269974026\" rel=\"noopener\">sharing around<\/a>\u00a0the idea with\u00a0<a href=\"https:\/\/moderncss.dev\/the-3-css-methods-for-adding-element-borders\/\" rel=\"noopener\">more detail<\/a>. Bramus Van Damme saw that and\u00a0<a href=\"https:\/\/www.bram.us\/2021\/01\/29\/animating-a-css-gradient-border\/\" rel=\"noopener\">stretched it a bit<\/a>\u00a0by adding,\u00a0<em>then animating<\/em>\u00a0an angle to the gradient. Like:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  --angle: 0deg;\r\n  \/* \u2026 *\/\r\n  border-image: linear-gradient(var(--angle), green, yellow) 1;\r\n  animation: 10s rotate linear infinite;\r\n}\r\n\r\n@keyframes rotate {\r\n  to {\r\n    --angle: 360deg;\r\n  }\r\n}<\/pre>\n<p>But wait! That\u2019s not actually going to animate as-is. The browser doesn\u2019t know that\u00a0<code>360deg<\/code>\u00a0is an actual angle value, and not just some random string. If it\u00a0<em>did<\/em>\u00a0know it was an angle value, it\u00a0<em>could<\/em>\u00a0animate it. So, tell it:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@property --angle {\r\n  syntax: '&lt;angle&gt;';\r\n  initial-value: 0deg;\r\n  inherits: false;\r\n}<\/pre>\n<p><a href=\"https:\/\/www.bram.us\/2021\/01\/29\/animating-a-css-gradient-border\/\" rel=\"noopener\">See Bramus\u2019 article<\/a>\u00a0for the demos there. Bonafide CSS trick. I can\u2019t wait for more support for\u00a0<code>@property<\/code>\u00a0(Chrome only, as I write), because it really unlocks some cool CSS trickery.\u00a0Animating numbers visually, for example.<\/p>\n<h2><a class=\"button\" href=\"https:\/\/www.bram.us\/2021\/01\/29\/animating-a-css-gradient-border\/\">DIRECT LINK \u2192<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; This little trick for gradient borders is super useful: <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-animating-a-css-gradient-border\/\" title=\"CSS Tutorial &#8211; Animating a CSS Gradient Border\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[307,268,197,103,227],"newstopic":[],"class_list":{"0":"post-3145","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-animating-a-css-gradient-border","10":"tag-css-grid","11":"tag-css-tutorial","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3145"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3145\/revisions"}],"predecessor-version":[{"id":3147,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3145\/revisions\/3147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3178"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3145"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}