diff --git a/obsidian/.obsidian/workspace.json b/obsidian/.obsidian/workspace.json index cf999a9..b36bc8c 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": "preview", + "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", + "Areas/Tailwind.md", + "Resources/web/Tailwind glowing gradient effect.md", "Resources/web/Theming with Tailwind.md", - "Resources/web/Tailwind-Dark-Theme.md", "Resources/web/Configure Gitpod.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/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 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..15fef24 --- /dev/null +++ b/obsidian/Resources/web/Tailwind glowing gradient effect.md @@ -0,0 +1,24 @@ +--- +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. + +```html +