PBOM: Oceanic BG example

meyerweb · c14cb08edd55b51cb4f2b220df62d090eeed2595 · meyerweb committed Oct 27, 2015 · Oct 27, 2015 · c14cb08
1 parent aa2b1b0
commit c14cb08edd55b51cb4f2b220df62d090eeed2595
Unified Split

Showing with 1 addition and 0 deletions.

+1 −0 padding-border-and-margins-in-css/borders_image-examples-oceanic-bg.html

BIN padding-border-and-margins-in-css/borders_image-examples-oceanic-bg.png
diff --git a/padding-border-and-margins-in-css/borders_image-examples-oceanic-bg.html b/padding-border-and-margins-in-css/borders_image-examples-oceanic-bg.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"			"http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Padding, Borders, Outlines, and Margins</title><link rel="stylesheet" type="text/css" href="c/pbom-baseline.css"><style type="text/css">body {display: flex; justify-content: space-around; padding: 3em 1em 3em 0;}p {flex-grow: 1; margin: 0 3em;}	#oceanic {		background: red;		border: 2px solid blue; padding: 1em;		border-image:			url(i/waves.png) 50 fill / 20px / 10px round;	}#image {position: relative; padding: 0;}#image img {display: block;}p b {position: absolute; font: 1em Consolas, monospace; border: 1px dotted rgba(0,0,0,0.5); box-sizing: border-box;}b.t, b.b {left: -2em; right: -2em;}b.r, b.l {top: -2em; bottom: -2em;}b.t {border-width: 0 0 2px 0; top: 0;	background: url(i/arrow-down.png) no-repeat 92% 100%;	background-size: 10px auto;}b.r {border-width: 0 0 0 2px; right: 0;	background: url(i/arrow-left.png) no-repeat 0% 92%;	background-size: auto 10px;}b.b {border-width: 2px 0 0 0; bottom: 0;	background: url(i/arrow-up.png) no-repeat 8% 0%;	background-size: 10px auto;}b.l {border-width: 0 2px 0 0; left: 0;	background: url(i/arrow-right.png) no-repeat 100% 8%;	background-size: auto 10px;}p b i {position: absolute; font-style: normal;}b.t i {right: 0%; bottom: 0%; margin-bottom: 0;}b.r i {bottom: -0.25em; left: 0%; margin-left: 0.25em;}b.b i {left: 0%; top: 0%; margin-top: 0.125em;}b.l i {top: 0%; right: 0%; margin-right: 0.25em;}b.t, b.b {height: 50px;}b.r, b.l {width: 50px;}</style></head><body><p id="oceanic">Seacula broadview heights adipiscing clari dolore demonstraverunt, steve harvey quam eros enim decima strongsville. Typi vel etiam velit sed littera luptatum lake erie. James a. garfield ipsum clay mathews quod consequat lectorum tincidunt nulla tation vero.</p><p id="image"><img src="i/waves.png"><b class="t"><i>50</i></b><b class="r"><i>50</i></b><b class="b"><i>50</i></b><b class="l"><i>50</i></b></p></body></html>
diff --git a/padding-border-and-margins-in-css/borders_image-examples-oceanic-bg.png b/padding-border-and-margins-in-css/borders_image-examples-oceanic-bg.png