From be66a375aeeb3fe7cafa72dd7a37f719868bea87 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Sat, 24 Dec 2022 14:54:12 +0100 Subject: [PATCH 1/4] feat: new notes --- obsidian/.obsidian/workspace.json | 29 ++++++++++++++----- .../web/Tailwind glowing gradient effect.md | 11 +++++++ 2 files changed, 32 insertions(+), 8 deletions(-) create mode 100644 obsidian/Resources/web/Tailwind glowing gradient effect.md diff --git a/obsidian/.obsidian/workspace.json b/obsidian/.obsidian/workspace.json index cf999a9..fc64209 100644 --- a/obsidian/.obsidian/workspace.json +++ b/obsidian/.obsidian/workspace.json @@ -18,8 +18,21 @@ "source": true } } + }, + { + "id": "c3b9f8dd450f94d2", + "type": "leaf", + "state": { + "type": "markdown", + "state": { + "file": "Resources/web/Tailwind glowing gradient effect.md", + "mode": "source", + "source": true + } + } } - ] + ], + "currentTab": 1 } ], "direction": "vertical" @@ -77,7 +90,7 @@ "state": { "type": "backlink", "state": { - "file": "Resources/web/Vercel-Build-Capacity.md", + "file": "Resources/web/Tailwind glowing gradient effect.md", "collapseAll": false, "extraContext": false, "sortOrder": "alphabetical", @@ -106,17 +119,17 @@ "zk-prefixer:Create new unique note": false } }, - "active": "c162e30caf31860d", + "active": "c3b9f8dd450f94d2", "lastOpenFiles": [ - "Resources/web/Vercel-getting-started.md", - "Resources/web/Vercel-Build-Capacity.md", "Resources/web/Theming with Tailwind.md", - "Resources/web/Tailwind-Dark-Theme.md", "Resources/web/Configure Gitpod.md", + "Resources/web/Tailwind glowing gradient effect.md", + "Resources/web/Tailwind-Dark-Theme.md", + "Resources/web/Vercel-Build-Capacity.md", + "Resources/web/Vercel-getting-started.md", "Resources/web/Cloudinary-Svelte-Society-Stream.md", "Areas/Vercel.md", "Areas/Tailwind.md", - "Areas/SvelteKit.md", - "Areas/Preview Environment.md" + "Areas/SvelteKit.md" ] } \ No newline at end of file diff --git a/obsidian/Resources/web/Tailwind glowing gradient effect.md b/obsidian/Resources/web/Tailwind glowing gradient effect.md new file mode 100644 index 0000000..1e6c32d --- /dev/null +++ b/obsidian/Resources/web/Tailwind glowing gradient effect.md @@ -0,0 +1,11 @@ +--- +title: Tailwind glowing gradient effect +tags: [tailwind, css] +created: 24-12-2022 +--- +For effects like a glowing background, sometimes a drop-shadow is not the right thing. Shadows should be used to display elevation. + +Another option here is `blur` that gets applied to an element with the desired background (e.g. a color or a gradient). The important part is, that the element that is responsible for the glow is positioned as `absolute` behind the root element. + +## References +- https://www.youtube.com/watch?v=5W6kEP65AH4 \ No newline at end of file From e5ec96ec90d6096c8b238fdaa1336011ba877c0d Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Sat, 24 Dec 2022 14:57:30 +0100 Subject: [PATCH 2/4] feat: add link --- obsidian/.obsidian/workspace.json | 6 +++--- obsidian/Areas/Tailwind.md | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/obsidian/.obsidian/workspace.json b/obsidian/.obsidian/workspace.json index fc64209..ee4c798 100644 --- a/obsidian/.obsidian/workspace.json +++ b/obsidian/.obsidian/workspace.json @@ -25,7 +25,7 @@ "state": { "type": "markdown", "state": { - "file": "Resources/web/Tailwind glowing gradient effect.md", + "file": "Areas/Tailwind.md", "mode": "source", "source": true } @@ -90,7 +90,7 @@ "state": { "type": "backlink", "state": { - "file": "Resources/web/Tailwind glowing gradient effect.md", + "file": "Areas/Tailwind.md", "collapseAll": false, "extraContext": false, "sortOrder": "alphabetical", @@ -121,9 +121,9 @@ }, "active": "c3b9f8dd450f94d2", "lastOpenFiles": [ + "Resources/web/Tailwind glowing gradient effect.md", "Resources/web/Theming with Tailwind.md", "Resources/web/Configure Gitpod.md", - "Resources/web/Tailwind glowing gradient effect.md", "Resources/web/Tailwind-Dark-Theme.md", "Resources/web/Vercel-Build-Capacity.md", "Resources/web/Vercel-getting-started.md", diff --git a/obsidian/Areas/Tailwind.md b/obsidian/Areas/Tailwind.md index bf1784e..3b9f35c 100644 --- a/obsidian/Areas/Tailwind.md +++ b/obsidian/Areas/Tailwind.md @@ -6,4 +6,5 @@ created: 27-05-2022 Tailwind is an open-source CSS framework, that focuses on utility. Instead of providing classes for elements like buttons, it provides utility classes for adding padding, margin, etc... [[Tailwind-Dark-Theme]] - Adding a dark theme to Tailwind-Pages -[[Theming with Tailwind]] - Add themes to tailwind projects +[[Theming with Tailwind]] - Add themes to tailwind projects +[[Tailwind glowing gradient effect]] - Create an glow effect on elements From 5c765445caa4792f6d65035dd9a6eae5abc63e2e Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Sat, 24 Dec 2022 19:51:04 +0100 Subject: [PATCH 3/4] feat: add example --- obsidian/.obsidian/workspace.json | 8 ++++---- .../web/Tailwind glowing gradient effect.md | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/obsidian/.obsidian/workspace.json b/obsidian/.obsidian/workspace.json index ee4c798..b36bc8c 100644 --- a/obsidian/.obsidian/workspace.json +++ b/obsidian/.obsidian/workspace.json @@ -25,8 +25,8 @@ "state": { "type": "markdown", "state": { - "file": "Areas/Tailwind.md", - "mode": "source", + "file": "Resources/web/Tailwind glowing gradient effect.md", + "mode": "preview", "source": true } } @@ -90,7 +90,7 @@ "state": { "type": "backlink", "state": { - "file": "Areas/Tailwind.md", + "file": "Resources/web/Tailwind glowing gradient effect.md", "collapseAll": false, "extraContext": false, "sortOrder": "alphabetical", @@ -121,6 +121,7 @@ }, "active": "c3b9f8dd450f94d2", "lastOpenFiles": [ + "Areas/Tailwind.md", "Resources/web/Tailwind glowing gradient effect.md", "Resources/web/Theming with Tailwind.md", "Resources/web/Configure Gitpod.md", @@ -129,7 +130,6 @@ "Resources/web/Vercel-getting-started.md", "Resources/web/Cloudinary-Svelte-Society-Stream.md", "Areas/Vercel.md", - "Areas/Tailwind.md", "Areas/SvelteKit.md" ] } \ No newline at end of file diff --git a/obsidian/Resources/web/Tailwind glowing gradient effect.md b/obsidian/Resources/web/Tailwind glowing gradient effect.md index 1e6c32d..53cf784 100644 --- a/obsidian/Resources/web/Tailwind glowing gradient effect.md +++ b/obsidian/Resources/web/Tailwind glowing gradient effect.md @@ -7,5 +7,20 @@ For effects like a glowing background, sometimes a drop-shadow is not the right Another option here is `blur` that gets applied to an element with the desired background (e.g. a color or a gradient). The important part is, that the element that is responsible for the glow is positioned as `absolute` behind the root element. +```html +
+ +
+ + + +
+``` + + ## References - https://www.youtube.com/watch?v=5W6kEP65AH4 \ No newline at end of file From 4c897885a84f26429dde553ee1de472edea21389 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Sat, 24 Dec 2022 18:53:51 +0000 Subject: [PATCH 4/4] style: format codeblock --- .../web/Tailwind glowing gradient effect.md | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/obsidian/Resources/web/Tailwind glowing gradient effect.md b/obsidian/Resources/web/Tailwind glowing gradient effect.md index 53cf784..15fef24 100644 --- a/obsidian/Resources/web/Tailwind glowing gradient effect.md +++ b/obsidian/Resources/web/Tailwind glowing gradient effect.md @@ -8,19 +8,17 @@ For effects like a glowing background, sometimes a drop-shadow is not the right Another option here is `blur` that gets applied to an element with the desired background (e.g. a color or a gradient). The important part is, that the element that is responsible for the glow is positioned as `absolute` behind the root element. ```html -
- -
- - - +
+
+ +
``` ## References -- https://www.youtube.com/watch?v=5W6kEP65AH4 \ No newline at end of file +- https://www.youtube.com/watch?v=5W6kEP65AH4