Skip to content

Instantly share code, notes, and snippets.

@bbenetskyy

bbenetskyy/CSS-LinearGradient.snippet

Created June 16, 2020 07:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bbenetskyy/af0f037ca50e336961a57b5a9aef9fd9 to your computer and use it in GitHub Desktop.
Save bbenetskyy/af0f037ca50e336961a57b5a9aef9fd9 to your computer and use it in GitHub Desktop.
Download ZIP
Magic Gradients Xamarin Forms Snippets for Visual Studio 2019
Raw
CSS-LinearGradient.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>CSS Linear Gradient from RGB</Title>
<Description>CSS Linear Gradient from RGB</Description>
<Author>Bohdan Benetskyi</Author>
<Shortcut>lg</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>style</ID>
<Type>System.String</Type>
<Default>gradientStyledWithCss</Default>
</Literal>
<Literal Editable="true">
<ID>deg</ID>
<Type>System.String</Type>
<ToolTip>Gradient Angle</ToolTip>
<Default>90</Default>
</Literal>
<Literal Editable="true">
<ID>red</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>252</Default>
</Literal>
<Literal Editable="true">
<ID>green</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>108</Default>
</Literal>
<Literal Editable="true">
<ID>blue</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>53</Default>
</Literal>
<Literal Editable="true">
<ID>red2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>170</Default>
</Literal>
<Literal Editable="true">
<ID>green2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>18</Default>
</Literal>
<Literal Editable="true">
<ID>blue2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>159</Default>
</Literal>
</Declarations>
<Code Language="CSS">
<![CDATA[
linear-gradient($deg$deg, rgb($red$, $green$, $blue$) 0%, rgb($red2$, $green2$, $blue2$) 100%);
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Raw
CSS-RadialGradient.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>CSS Radial Gradient from RGB</Title>
<Description>CSS Radial Gradient from RGB</Description>
<Author>Bohdan Benetskyi</Author>
<Shortcut>rg</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>type</ID>
<Type>System.String</Type>
<Default>circle farthest-side</Default>
</Literal>
<Literal Editable="true">
<ID>at</ID>
<Type>System.String</Type>
<ToolTip>Gradient Angle</ToolTip>
<Default>50% 50%</Default>
</Literal>
<Literal Editable="true">
<ID>red</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>252</Default>
</Literal>
<Literal Editable="true">
<ID>green</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>108</Default>
</Literal>
<Literal Editable="true">
<ID>blue</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>53</Default>
</Literal>
<Literal Editable="true">
<ID>red2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>170</Default>
</Literal>
<Literal Editable="true">
<ID>green2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>18</Default>
</Literal>
<Literal Editable="true">
<ID>blue2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>159</Default>
</Literal>
</Declarations>
<Code Language="CSS">
<![CDATA[
radial-gradient($type$ at $at$, rgb($red$, $green$, $blue$) 0%, rgb($red2$, $green2$, $blue2$) 100%);
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Raw
MagicGradient-CSSinXAML.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>CSS Magic Gradient at XAML</Title>
<Description>CSS Magic Gradient at XAML</Description>
<Author>Bohdan Benetskyi</Author>
<Shortcut>mgcssxaml</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>deg</ID>
<Type>System.String</Type>
<ToolTip>Gradient Angle</ToolTip>
<Default>90</Default>
</Literal>
<Literal Editable="true">
<ID>red</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>252</Default>
</Literal>
<Literal Editable="true">
<ID>green</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>108</Default>
</Literal>
<Literal Editable="true">
<ID>blue</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>53</Default>
</Literal>
<Literal Editable="true">
<ID>red2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>170</Default>
</Literal>
<Literal Editable="true">
<ID>green2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>18</Default>
</Literal>
<Literal Editable="true">
<ID>blue2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>159</Default>
</Literal>
<Literal Editable="false">
<ID>close</ID>
<Type>System.String</Type>
<Default></Default>
</Literal>
</Declarations>
<Code Language="XAML">
<![CDATA[
<magic:GradientView VerticalOptions="FillAndExpand">
<magic:CssGradientSource>
<x:String>
<![CDATA[
linear-gradient($deg$deg, rgb($red$, $green$, $blue$) 0%, rgb($red2$, $green2$, $blue2$) 100%)
]]$close$>
</x:String>
</magic:CssGradientSource>
</magic:GradientView>
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Raw
MagicGradient-fromCSS.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>Magic Gradient from CSS</Title>
<Description>Magic Gradient from CSS</Description>
<Author>Bohdan Benetskyi</Author>
<Shortcut>mgcss</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>style</ID>
<Type>System.String</Type>
<Default>gradientStyledWithCss</Default>
</Literal>
</Declarations>
<Code Language="XAML">
<![CDATA[
<magic:GradientView StyleClass="$style$" VerticalOptions="FillAndExpand" />
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Raw
MagicGradient-GradientAtCSS.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>Magic Gradient at CSS</Title>
<Description>Magic Gradient at CSS</Description>
<Author>Bohdan Benetskyi</Author>
<Shortcut>mgcss</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>style</ID>
<Type>System.String</Type>
<Default>gradientStyledWithCss</Default>
</Literal>
<Literal Editable="true">
<ID>deg</ID>
<Type>System.String</Type>
<ToolTip>Gradient Angle</ToolTip>
<Default>90</Default>
</Literal>
<Literal Editable="true">
<ID>red</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>252</Default>
</Literal>
<Literal Editable="true">
<ID>green</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>108</Default>
</Literal>
<Literal Editable="true">
<ID>blue</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>53</Default>
</Literal>
<Literal Editable="true">
<ID>red2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Red Position</ToolTip>
<Default>170</Default>
</Literal>
<Literal Editable="true">
<ID>green2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Green Position</ToolTip>
<Default>18</Default>
</Literal>
<Literal Editable="true">
<ID>blue2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Color Blue Position</ToolTip>
<Default>159</Default>
</Literal>
</Declarations>
<Code Language="CSS">
<![CDATA[
.$style$ {
background: linear-gradient($deg$deg, rgb($red$, $green$, $blue$) 0%, rgb($red2$, $green2$, $blue2$) 100%)
}
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Raw
MagicGradient-Linear.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>Linear Magic Gradient at XAML</Title>
<Description>Linear Magic Gradient at XAML</Description>
<Author>Bohdan Benetskyi</Author>
<Shortcut>mglinear</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>angle</ID>
<Type>System.String</Type>
<ToolTip>Gradient Angle</ToolTip>
<Default>90</Default>
</Literal>
<Literal Editable="true">
<ID>color</ID>
<Type>System.String</Type>
<ToolTip>Gradient Stop Color</ToolTip>
<Default>Red</Default>
</Literal>
<Literal Editable="true">
<ID>color2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Stop Color</ToolTip>
<Default>Blue</Default>
</Literal>
</Declarations>
<Code Language="XAML">
<![CDATA[
<magic:GradientView VerticalOptions="FillAndExpand">
<magic:LinearGradient Angle="$angle$">
<magic:GradientStop Color="$color$" Offset="0" />
<magic:GradientStop Color="$color2$" Offset="1" />
</magic:LinearGradient>
</magic:GradientView>
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Raw
MagicGradient-Radial.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>Radial Magic Gradient at XAML</Title>
<Description>Radial Magic Gradient at XAML</Description>
<Author>Bohdan Benetskyi</Author>
<Shortcut>mgradial</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>center</ID>
<Type>System.String</Type>
<ToolTip>Gradient Center</ToolTip>
<Default>0.5,0.5</Default>
</Literal>
<Literal Editable="true">
<ID>radiusx</ID>
<Type>System.String</Type>
<ToolTip>Gradient Radius X Position</ToolTip>
<Default>200</Default>
</Literal>
<Literal Editable="true">
<ID>radiusy</ID>
<Type>System.String</Type>
<ToolTip>Gradient Radius Y Position</ToolTip>
<Default>200</Default>
</Literal>
<Literal Editable="true">
<ID>color</ID>
<Type>System.String</Type>
<ToolTip>Gradient Stop Color</ToolTip>
<Default>Red</Default>
</Literal>
<Literal Editable="true">
<ID>color2</ID>
<Type>System.String</Type>
<ToolTip>Gradient Stop Color</ToolTip>
<Default>Blue</Default>
</Literal>
</Declarations>
<Code Language="XAML">
<![CDATA[
<magic:GradientView VerticalOptions="FillAndExpand">
<magic:RadialGradient Center="$center$" RadiusX="$radiusx$" RadiusY="$radiusy$">
<magic:GradientStop Color="$color$" Offset="0" />
<magic:GradientStop Color="$color2$" Offset="1" />
</magic:RadialGradient>
</magic:GradientView>
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment