From c8b5b8728cd49c2c11a1c71a385c5a9e018dd338 Mon Sep 17 00:00:00 2001 From: Brian Ali Date: Thu, 9 Jan 2025 19:40:38 +0300 Subject: [PATCH 1/3] Create rgb-border.md --- snippets/css/effects/rgb-border.md | 38 ++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 snippets/css/effects/rgb-border.md diff --git a/snippets/css/effects/rgb-border.md b/snippets/css/effects/rgb-border.md new file mode 100644 index 00000000..a6e45cf1 --- /dev/null +++ b/snippets/css/effects/rgb-border.md @@ -0,0 +1,38 @@ +--- +title: rgb-border +description: changes border of an Element to rgb onhover (Can be changed)' +author: Brianali-codes +tags: css,effects +--- + +```css +.yourElement { + /* Your Elements styles go here*/ + border-style: solid; + border-radius: 10px; + color: rgb(0, 0, 0); + +} +.yourElement:hover { + + animation: change-color; + animation-duration: 0.5s; /* you can alter the duration of the animation here. */ + animation-iteration-count: infinite; /* Choose to play animation infinitely or once on hover. */ +} + +@keyframes change-color { + 0% { + border-color: red; + } + + 50% { + border-color: green; + } + + 100% { + border-color: blue; + } +} + + +``` From f5ca82aae53cd9600c800e3f2c526d66a9a50a82 Mon Sep 17 00:00:00 2001 From: Brian Ali Date: Fri, 10 Jan 2025 16:52:15 +0300 Subject: [PATCH 2/3] Update rgb-border.md --- snippets/css/effects/rgb-border.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/css/effects/rgb-border.md b/snippets/css/effects/rgb-border.md index a6e45cf1..d9fd626a 100644 --- a/snippets/css/effects/rgb-border.md +++ b/snippets/css/effects/rgb-border.md @@ -1,8 +1,8 @@ --- -title: rgb-border +title: RGB Border Color Animation description: changes border of an Element to rgb onhover (Can be changed)' author: Brianali-codes -tags: css,effects +tags: animation,effects,borders --- ```css From fa3dc1e02ba559b6258220005eaca4f2eb6310ac Mon Sep 17 00:00:00 2001 From: Brian Ali Date: Fri, 10 Jan 2025 19:57:39 +0300 Subject: [PATCH 3/3] Rename rgb-border.md to rgb-border-color-animation.md --- .../css/effects/{rgb-border.md => rgb-border-color-animation.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename snippets/css/effects/{rgb-border.md => rgb-border-color-animation.md} (100%) diff --git a/snippets/css/effects/rgb-border.md b/snippets/css/effects/rgb-border-color-animation.md similarity index 100% rename from snippets/css/effects/rgb-border.md rename to snippets/css/effects/rgb-border-color-animation.md