greystate

/**
 * Pure CSS Reveal?
 */

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

greystate

/**
 * Overriding defaults with a layer
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

/* These are "Unlayered Styles" */

greystate

/**
 * Image Cloud
 */

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
--pos-x: 48;
--pos-y: 320;

greystate

/**
 * 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

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

/**
 * SVG test
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

svg circle {

greystate

/**
 * Using currentcolor to style referenced SVG
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

#logobox {

greystate

/**
 * Text over image w/ CSS Grid
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.heroic {

greystate

/**
 * Clip Path Exploration
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

img {

greystate

/**
 * The first commented line is your dabblet’s title
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
box-shadow: 0 0 0 20px green inset;
padding: 20px;
box-sizing: border-box;