Notification style

dabblet.css

/**
 * Notification style
 */
body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.notification {
	margin: .5em 0;
	background: #ddd;
	background-image: linear-gradient(top, #ddd, #efefef);
	width: 20em;
	padding: 1em;
	border: 1px solid #ccc;
	box-shadow: -.2em .2em 0em rgba(0,0,0,.1);
	text-shadow: 0 1px 0 rgba(255,255,255,.7);
	border-radius: .5em;
}
.info:before,
.noworries:before,
.warning:before {
	content: "!";
	display: block;
	float: left;
	line-height: 1.5em;
	width: 1.5em;
	background: #ff8d00;
        background-image: radial-gradient(50% 30%, rgb(255, 254, 216), rgb(255, 141, 0));
	text-align: center;
	border-style: solid;
	border-width: 1px;
	border-color: #bbb;
	border-radius: 50%;
	color: rgba(0,0,0,.8);
	font-weight: bold;
	font-size: 1.5em;
	font-family: Geneva, "Times New Roman", serif;
	text-shadow: 0 .05em 0 rgba(255,255,255,.7);
	box-shadow: inset 0 .05em .3em rgba(255,255,255,.7), 0 .05em 0 #fff;
	margin-right: .5em;
}
.noworries:before {
	background: #b9ff72;
        background-image: radial-gradient(50% 30%, rgb(185, 255, 114), rgb(113, 171, 54));
}

.warning:before {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.4);
	background: #ff0000;
        background-image: radial-gradient(50% 30%, rgb(255, 111, 112), rgb(255, 0, 0));
}

dabblet.html

<div class="notification noworries">
	Duis autem vel eum iriure dolor in hendrerit.
</div>

<div class="notification info">
	Duis autem vel eum iriure dolor in hendrerit.
</div>

<div class="notification warning">
	Duis autem vel eum iriure dolor in hendrerit.
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}