Skip to content

Instantly share code, notes, and snippets.

View greystate's full-sized avatar
:octocat:
Octocatering

Chriztian Steinmeier greystate

:octocat:
Octocatering
66 followers · 69 following
View GitHub Profile
@greystate
greystate / dabblet.css
Created September 9, 2024 08:16
Testing @Property for animating an angle value
/**
* Testing @property for animating an angle value
*/
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 45deg;
}
:root {
@greystate
greystate / dabblet.css
Created August 30, 2024 13:05
Image with blurred background
/**
* Image with blurred background
*/
:root {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100dvh;
}
figure {
@greystate
greystate / dabblet.css
Last active August 30, 2024 13:05
Image with blurred background
/**
* Image with blurred background
*/
:root {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100dvh;
}
figure {
@greystate
greystate / dabblet.css
Last active July 29, 2024 11:23
Sections and modules test
/**
* Sections and modules test
*/
html {
background: #e9e9e9;
min-height: 100%;
}
body { margin:0; }
@greystate
greystate / dabblet.css
Created June 15, 2023 22:12
Pure CSS Reveal?
/**
* Pure CSS Reveal?
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
@greystate
greystate / dabblet.css
Last active March 6, 2023 09:47
Overriding defaults with a layer
/**
* Overriding defaults with a layer
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
/* These are "Unlayered Styles" */
@greystate
greystate / dabblet.css
Created March 6, 2023 09:35
Image Cloud
/**
* Image Cloud
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
--pos-x: 48;
--pos-y: 320;
@greystate
greystate / dabblet.css
Created February 2, 2023 09:31
CSS hyphenation test (none, manual & auto)
/**
* CSS hyphenation test (none, manual & auto)
*/
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border: 2px solid; padding: 1em; }
.card { padding: 10px; border: 3px outset orange; hyphens: auto; }
.no-hyphens { hyphens: none; background: rgba(200, 0, 0, 0.5); }
.manual-hyphens { hyphens: manual; background: rgba(240, 120, 0, 0.5); }
@greystate
greystate / PropertyDataDataSource.cs
Last active September 8, 2022 09:20 — forked from leekelleher/PropertyDataDataSource.cs
using System.Collections.Generic;
using System.Linq;
using Umbraco.Community.Contentment.DataEditors;
using Umbraco.Core.PropertyEditors;
using Umbraco.Web;
namespace MyWebsite.DataSources
{
public class PropertyDataDataSource : IDataListSource
{
@greystate
greystate / dabblet.css
Created September 18, 2020 13:10
SVG test
/**
* SVG test
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
svg circle {