{"id":415,"date":"2012-09-11T17:03:53","date_gmt":"2012-09-11T17:03:53","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=415"},"modified":"2023-05-09T23:28:37","modified_gmt":"2023-05-09T23:28:37","slug":"09-backgrounds-and-borders","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/09-backgrounds-and-borders\/","title":{"rendered":"09 Backgrounds and Borders"},"content":{"rendered":"<p>The <a href=\"http:\/\/www.w3.org\/TR\/css3-background\/\"> backgrounds and borders<\/a> module covers the background and border of the box element: <\/p>\n<h2>The Box Element<\/h2>\n<figure style=\"width: 300px; float: right; margin: -20px 0 0 10px;\">\n<img decoding=\"async\" style=\"width: 100%; margin: 0; background-size: cover;\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/04-boxdim.png\" alt=\"Diagram of a typical box, showing the content, padding, border and margin areas\" \/><br \/>\n<\/figure>\n<\/p>\n<p>In the official language of the W3.org; when elements are rendered according to the <a href=\"http:\/\/www.w3.org\/TR\/CSS21\/box.html\">CSS box model<\/a>, each element is either not displayed at all, or formatted as one or more rectangular boxes. Each box has a rectangular content area, a band of padding around the content, a border around the padding, and a margin outside the border. (The margin may actually be negative but margins have no influence on the background and border.)<\/p>\n<h1>Background Properties<\/h1>\n<\/p>\n<p>The background properties deal with the decoration of the border area and with the background of the content, padding and border areas. There are many properties: background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color, and background-blend-mode.\n<\/p>\n<p>The background can have multiple layers. A number of elements can be layered on top of one another. Each layer can be determined by a number of properties, each separated by a comma. Be careful in creating complicated backgrounds. One mistake can render the entire background property null and void.  <\/p>\n<h2>Layering Multiple Background Images<\/h2>\n<\/p>\n<p>multiple background images are <code>,<\/code> separated by a comma.<\/p>\n<pre>background: url(#), url(#), url(#);<\/pre>\n<\/p>\n<p>You can set all of the values associated with each background image in the same way, by a repeat use of \u201c,\u201d to separate each value. For Example <\/p>\n<pre>\r\n\tbackground-repeat: repeat-x, repeat-x, repeat-x,;\r\n\tbackground-position: bottom, top, right;\r\n\tbackground-offset: 20px, 20px, 10px;\r\n\t<\/pre>\n<\/p>\n<p>If you have selected a <strong>color<\/strong> in addition to the background images, it is rendered as the bottom layer, without a final \u201c,\u201d.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#multiple_backgrounds {\r\nwidth: 400px;\r\nheight: 300px;\r\nmargin: 40px auto;\r\npadding: 0 50px;\r\nbackground: \r\nurl(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_safari-grass.png) bottom center no-repeat,\r\nurl(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_safari-birds.png)  10% 5% no-repeat scroll,\r\nurl(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_safari-animals.gif) 0% 90% no-repeat,\r\nurl(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_safari-background.png) center  no-repeat \r\nnavajowhite;\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"multiple_backgrounds\">This div has multiple backgrounds<\/div>\n<h2>Background Repeat<\/h2>\n<\/p>\n<p>The <code>background-repeat<\/code> property is used to repeat the background image. You can use the actual property, <code>repeat-style:<\/code> but it is usually tagged on to the end of <code>background:<\/code> with the values: <code> repeat-x<\/code>, <code>repeat-y<\/code>, <code> repeat<\/code>, <code>no-repeat<\/code>, and values that will be supported in the future, <code>space<\/code> and <code>round<\/code>.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#repeat {\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_CSS-border-image1.gif) repeat-x;\r\n\/*repeat, repeat-y, repeat-x, no-repeat*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"repeat\" style=\"height: 300px; width: 300px; border: 1px solid #aaa; margin: 30px auto;\">\n<\/div>\n<h2>Background Position<\/h2>\n<\/p>\n<p>The position of the background element places it in relation to the box, with the default being center. If there are two values, the first represents the X (horizontal) Axis and the second represents the Y (vertical) axis. You can also use percentages or pixel values: <code>background-position: <\/code><code>px<\/code>, <code>%<\/code>,  <code>top<\/code>, <code>center<\/code>, <code>bottom<\/code>, <code>left<\/code>, <code>center<\/code>, <code>right<\/code>  <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#position {\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/circle_of_life.gif) no-repeat center center;\r\n background-position: -350px -150px;\r\n\/*length in px or %, top, center, right, bottom*\/\r\n<\/style><\/pre>\n<\/div>\n<div id=\"position\" style=\"width: 100%; height: 400px; margin: 30px auto;\">\n<\/div>\n<h2>Background Clip and Background Origin<\/h2>\n<\/p>\n<p>It is possible that the background peeks out from the border. To keep this from happening, use the <code>background-clip<\/code> property, which clips the background to one of the following values: <code>background-clip: border-box<\/code>, <code>padding-box<\/code>, <code>content-box<\/code>\n<\/p>\n<p>When you supply a value of padding-box, the background is clipped relative to the upper left corner of the padding edge. With border-box it\u2019s clipped relative to the upper left corner of the border, and content-box means the background starts from the upper left corner of the box&#8217;s content.\n<\/p>\n<p>Background origin is like background clip only it resizes the image. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#origin {\r\nwidth: 70%; height: 300px;\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/circle_of_life.gif) no-repeat center center;\r\nbackground-size: cover; \r\npadding: 30px;\r\nborder: 30px solid hsl(0 20% 70% \/.5);\r\nbackground-clip: border-box;\r\nbackground-origin: ;\r\n\/*border-box, padding-box, content-box, text*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"origin\" style=\" margin: 30px auto;\">\n<h2>Bla Bla Bla BLa<\/h2>\n<\/div>\n<h2>Background Size<\/h2>\n<\/p>\n<p>Resizing background images requires only one value if the image is scaled proportionately, and two values if the image is to be distorted: <code>Background-size: px<\/code>,<code>%<\/code>, <code>auto<\/code>, <code>contain<\/code>, <code>cover<\/code>. The value <strong>cover<\/strong> automatically scales the image so the longest side fits inside of the element, <strong>contain<\/strong> scales the image so that the shortest side fits inside of the element, completely filling the background.\n<\/p>\n<p>Apply <code>background-size: cover<\/code> to the HTML tag and you create a full-screen background. <\/p>\n<pre>\r\nhtml{\r\n\tbackground:url('picture.jpg') no-repeat center center;\r\n\tmin-height:100%;\r\n\tbackground-size: cover;\r\n}\r\nbody{\r\n\tmin-height:100%;\r\n}\r\n<\/pre>\n<\/p>\n<p>The background size property works in conjunction with the background attachment property.<\/p>\n<h2>Background Attachment<\/h2>\n<\/p>\n<p>The background-attachment property binds the position of the background to the element, to the element\u2019s content, or to the viewport. The initial value is <code>scroll<\/code>, where the background is attached to the element and moves with the element. Change this value to <code>local<\/code> if the background is to scroll with the content of the element or <code>fixed<\/code> if the background is to stay fixed relative to the viewport, or window.\n<\/p>\n<p>If the background picture is fixed to the viewport, the element acts like a window to the background.  Change the background attachment to local, and the background moves with the text. The background will clip to the content when local is selected. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#background_cover {\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/11_canvas_example.jpg) no-repeat center center;\r\nfont-size: 2em;\r\noverflow: auto;\r\nbackground-size: cover;\r\n\/* length in px or %, auto, contain, cover *\/\r\nbackground-attachment: fixed;\r\n\/* scroll, fixed, local *\/}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"background_cover\" style=\"width: 100%; height: 400px; margin: 30px auto; border: 5px inset hsla(0,50%,20%,.5); \">These<br \/>words<br \/>are<br \/>here<br \/>to<br \/>extend<br \/>the<br \/>background<br \/>to <br \/>check<br \/>out<br \/>the<br \/>background-attachment<br \/>value<br \/>of<br \/>local.<\/div>\n<h2>Background Shorthand<\/h2>\n<\/p>\n<p>It is possible to write all of these at one time (\u2018background-position\u2019, \u2018background-size\u2019, \u2018background-repeat\u2019, \u2018background-origin\u2019, \u2018background-clip\u2019 and \u2018background-attachment\u2019) but if you do try to write a more complicated background, be careful, as one mistake can keep the background from showing. Each background image layer can have the following: <\/p>\n<p><code>background: bg-image<\/code>, <code>bg-position<\/code>, <code>repeat-style<\/code>, <code>attachment<\/code>, <code>background-origin<\/code>, <code>background-clip<\/code> and the final (bottom) layer can add <code>background-color.<\/code> <\/p>\n<h2>Gradients<\/h2>\n<\/p>\n<p> <a href=\"http:\/\/dev.w3.org\/csswg\/css3-images\/#gradients\">Gradients<\/a> were introduced by Apple in 2008. They\u2019ve gone through some syntax changes and can be used without prefix. There are linear gradients, radial gradients, and conic gradients, and the syntax is similar. A gradient is a transition between a start color and one or more stop colors that has a direction, and optionally, can repeat. If there is no repeat, the last color on either side continues out to the edge of the box, otherwise, the gradient repeats.<\/p>\n<h2>Linear Gradients<\/h2>\n<\/p>\n<p>The gradient uses the <code>background<\/code> property but instead of fetching an image, the computer uses the controls given in the value to calculate the image used to fill the background. <\/p>\n<div style=\"width: 200px; height: 200px; float: right; margin-left: 20px; background: linear-gradient(to top, #EFF6FB, #d3e4f3 68%); background-color: #d3e4f3; border: 1px solid #aaa;\"><\/div>\n<\/p>\n<p>The value of a simple linear gradient like the one on the right is written as <code>linear-gradient(to top, #eff6fb, #d3e4f3 68%)<\/code>. It is specified as a linear gradient, that has direction that goes <code>to top<\/code> that starts at (0%) with the color <span style=\"background:#eff6fb; padding: 0 5px;\"> #eff6fb<\/span>, and proceeds to the last stop, with the color <span style=\"background:#d3e4f3; padding: 0 5px;\">#d3e4f3<\/span> occurring at 68% from the top, which it maintains to the top (100%) of the element. Its also possible to use length values like pixels or em units to specify the distance.\n<\/p>\n<p>Simple gradient with the color being spread out evenly over the colors:<\/p>\n<pre>\r\nbackground: linear-gradient(red, purple, blue);\r\n<\/pre>\n<div style=\"height: 280px; width: 100%; background-color:#0000ff; background: linear-gradient(red, purple, blue); margin-bottom: 30px;\"><\/div>\n<\/p>\n<p>The angle can be specified in degrees: \u20180deg\u2019 or by keywords:  \u2018to top\u2019, \u2018to right\u2019, \u2018to bottom\u2019, or \u2018to left\u2019 where the angle of the gradient line is \u20180deg\u2019, \u201890deg\u2019, \u2018180deg\u2019, or \u2018270deg\u2019. These can also be combined as in to top right.<\/p>\n<pre>\r\nbackground: linear-gradient(to left, red, violet, blue);\r\n<\/pre>\n<div style=\"height: 280px; width: 100%; background-color:#0000ff; background: linear-gradient(to left, red, violet, blue); margin-bottom: 30px;\"><\/div>\n<\/p>\n<p>Adding a percentage to the stop specifies where the color is located. If two colors share the same location, the result is a sharp color change. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#exGradient { height: 280px; width: 100%;\r\nbackground:  linear-gradient(to top left, red, yellow, orange 60%, purple 60%, blue); \r\n}<\/style><\/pre>\n<\/div>\n<div style=\"margin: 30px auto;\" id=\"exGradient\"><\/div>\n<h2>Radial and Conical Gradients<\/h2>\n<\/p>\n<p>If linear gradients follow a single direction, think of radial gradients as all directions emanating out of a single point. The issue is then the location of the center point. The distance from the center then determines the stops. If the distance of the stops are all the same, the shape of the radial gradient is a circle. It is also possible to have an ellipse where the dimensions of the box determined the  shape of the ellipse.\n<\/p>\n<p>You can specify the position of the radial gradient in the same way as you can position anything, using the x and y coordinates, and keywords work just as well: <code>right 100%<\/code> means that the horizontal placement is all the way on the right and the vertical placement is all the way on the bottom. It is possible to go beyond the box, and make it <code>120% 120%<\/code>, for example. It defaults to the center of x or y if either one is missing, and if both are missing, the radial gradient is centered in the box.\n<\/p>\n<p>By default, the radial gradient covers the whole box but its possible to specify its size by using keywords that determine the size from its center to the edge or corner that is nearest or furthest from it.  That gives us four possible keywords: <code>closest-side<\/code>, <code>closest-corner<\/code>, <code>farthest-side<\/code>, <code>farthest-corner<\/code>.\n<\/p>\n<p>After the location, shape and size come the color stops. You have to specify a starting color and one or more stop colors, and if you what the blend to be other than evenly distributed, the percentage from the center, similar to how the linear blend is specified. The last stop will determine the color that fills the box if the blend is smaller than the box. Its also possible to use length values like pixels or em units to specify the distance.\n<\/p>\n<p>Radial blends requires the keyword <code>radial<\/code> . Conical blends requires the keyword <code>conic<\/code> <\/p>\n<pre>\r\nbackground: radial-gradient(circle, white, black);\r\n<\/pre>\n<div style=\"height: 280px; width: 100%; background-color:#0000ff; background: radial-gradient(circle, white, black); margin-bottom: 30px;\"><\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#raGradient { height: 280px; width: 100%;\r\nbackground:  radial-gradient(red, yellow, orange 60%, purple 62%, blue); \r\n}\r\n#caGradient { height: 280px; width: 100%;\r\nbackground:  conic-gradient(red 10%, yellow 10%, orange, orange 60%, purple 60%, blue 90%, red 90%, red); \r\n}\r\n<\/style><\/pre>\n<\/div>\n<div style=\"margin: 30px auto;\" id=\"raGradient\"><\/div>\n<div style=\"margin: 30px auto;\" id=\"caGradient\"><\/div>\n<h2>Adding Transparency<\/h2>\n<\/p>\n<p>Blends are background images and are layered in the same way as multiple background images, by using a comma to separate the layers. By adding transparency to the color stop it&#8217;s possible to show one gradient through another gradient. The following demo shows two superimposed linear gradients, separated by a comma <code>,<\/code> with transparency from the Hue, Saturation and Luminance added after the slash, with 0 being transparent, and 1 being opaque. (<code>hsl<\/code>)color, so that the one shows through the other: <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#lgradient {\r\nbackground:   linear-gradient(-60deg, hsl(295 42% 53% \/ 0) 20%, hsl(295 42% 53% \/ 1) 25%, hsl(304 23% 71% \/ 0) 70%, hsl(353 33% 41% \/ 1) 88%),  linear-gradient(150deg, hsl(295 42% 53% \/ 0) 0%, hsl(295 42% 53% \/ 1) 25%, hsl(304 23% 71% \/ 0) 30%, hsl(353 33% 41% \/ 1) 65%);\r\n}<\/style><\/pre>\n<\/div>\n<div style=\"margin: 30px auto; width: 100%; height: 500px;\" id=\"lgradient\"><\/div>\n<h2>Repeating Gradients<\/h2>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#repeating_linear {height: 280px; width: 100%; \r\nbackground: repeating-linear-gradient(#EFF6FB, #d3e4f3 10%); \r\nbackground-color: #d3e4f3; \r\nborder: 1px solid #aaa;\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"repeating_linear\"><\/div>\n<\/p>\n<p>It is possible to repeat the blend instead of extend the color of the last stop to the edge of the box. This is done through the keyword <code>repeating<\/code> at the beginning of the value, for example: <code>background: repeating-linear-gradient(#EFF6FB, #d3e4f3 10%).<\/code> use the same value at both the beginning and the end if you want a smooth transition as the blend repeats. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#rgradient {\r\nbackground:  repeating-radial-gradient( circle closest-side at 100px 100px,  orange, yellow, green, yellow, pink, green, pink, orange);\r\n\/* closest-side, closest-corner, farthest-side, farthest-corner*\/\r\n}<\/style><\/pre>\n<\/div>\n<div style=\"margin: 30px auto; width: 100%; height: 500px;\" id=\"rgradient\"><\/div>\n<\/p>\n<p>Repeating gradients are achieved by putting in stops while the frequency is determined by the distance of the edge from the center point. In the following example, change any of the stops to see the effect on the gradient. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#repeating_gradient {height: 280px; width: 100%; \r\nbackground: -moz-repeating-radial-gradient(50% 50%, circle closest-side, purple 10%,pink 50%); \r\nbackground:  repeating-radial-gradient(50% 50%, circle closest-side, purple 10%,pink 50%); \r\nbackground: repeating-radial-gradient(50% 50%, circle closest-side, purple 10%,pink 50%); \r\nmargin-bottom: 30px;\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"repeating_gradient\"><\/div>\n<h2>CSS Illustration<\/h2>\n<\/p>\n<p>It is possible to create amazing work with CSS. I did not say it was a fluid process, but a thorough tutorial provides insite in how the Polaroid camera was made using nothing but CSS. Check out the code Pen to see what HTML and CSS are used, and read the <a href=\"https:\/\/fossheim.io\/writing\/posts\/css-polaroid-camera\/\" target=\"_blank\"  rel=\"noopener noreferrer\">article <\/a>.\n<\/p>\n<p class=\"codepen\" data-height=\"665\" data-theme-id=\"default\" data-default-tab=\"result\" data-user=\"fossheim\" data-slug-hash=\"xxboBzO\" style=\"height: 665px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"&#x1f4f8; Polaroid Camera In CSS\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fossheim\/pen\/xxboBzO\"><br \/>\n  &#x1f4f8; Polaroid Camera In CSS<\/a> by Sarah Fossheim (<a href=\"https:\/\/codepen.io\/fossheim\">@fossheim<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Gradients the Easy Way<\/h2>\n<p> You can construct your own gradients but given the visual immediacy of a gradient generator, it\u2019s more convenient to use the <a href=\"https:\/\/cssgradient.io\" target=\"blank\" rel=\"noopener noreferrer\">CC Gradient Generator<\/a> to help you make the gradient.<\/p>\n<h2>Background Patterns<\/h2>\n<\/p>\n<p>The possibility of repeating multiple gradients in one <code>background<\/code>declaration opens up an incredible vista for patterns and other uses. Take a look at the next two demonstrations, take from the fantastic <a href=\"http:\/\/leaverou.me\/css3patterns\/\">patterns<\/a> created by Lea Veroa. See also her book <a href=\"https:\/\/www.amazon.com\/CSS-Secrets-Solutions-Everyday-Problems\/dp\/1449372635>CSS Secrets: Better Solutions to Everyday Web Design Problems<\/a> Many of these patterns depend on the use of multiple background layers and use <code>transparency<\/code> to great effect, and a very careful use of positioning so that one layer sticks out behind the other. You can see how these are constructed by commenting-out or changing one line at a time, or read the <a href=\"http:\/\/24ways.org\/2011\/css3-patterns-explained\/\">article<\/a> she wrote to explain her methods.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#rp1gradient {\r\nbackground: \r\n  -webkit-radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgb(54 78 39 \/ 0) 12%, rgb(54 78 39 \/ 0)) 50px 0,\r\n  -webkit-radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgb(210 202 171 \/ 0) 12%, rgb(210 202 171 \/ 0)) 50px 0,\r\n   -webkit-radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgb(54 78 39 \/ 0) 12%, rgb(54 78 39 \/ 0)) 0 50px,\r\n  -webkit-radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgb(210 202 171\/ 0) 12% , rgb(210 202 171 \/ 0)) 0 50px,\r\n  -webkit-radial-gradient(100% 50%, circle, #D2CAAB 16%, rgb(210 202 171 \/ 0) 17%),\r\n  -webkit-radial-gradient(0% 50%, circle, #364E27 16%, rgb(54 78 39 \/ 0) 17%),\r\n  -webkit-radial-gradient(100% 50%, circle, #D2CAAB 16%, rgb(210 202 171 \/ 0) 17%) 50px 50px,\r\n  -webkit-radial-gradient(0% 50%, circle, #364E27 16%, rgb(54 78 39 \/ 0) 17%) 50px 50px;\r\nbackground-color:#63773F;\r\nbackground-size:100px 100px;\r\n}<\/style><\/pre>\n<\/div>\n<div style=\"margin: 30px auto; width: 100%; height: 500px;\" id=\"rp1gradient\"><\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#rp2gradient {\r\nbackground-color:#556;\r\nbackground: \r\n  linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\r\n   linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\r\n   linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\r\n   linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),\r\n   linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), \r\n   linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);\r\nbackground-size: 80px 140px;\r\nbackground-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;\r\n}<\/style><\/pre>\n<\/div>\n<div style=\"margin: 30px auto; width: 100%; height: 500px;\" id=\"rp2gradient\"><\/div>\n<h2>Animated Background Patterns<\/h2>\n<\/p>\n<p>We\u2019ll cover animation next week but here is a glimpse of what CSS can do to animate these background <a href=\"https:\/\/codepen.io\/simurai\/pen\/kgsce\" target=\"_blank\" rel=\"noopener noreferrer\">patterns<\/a>.<\/p>\n<style>\n@import url(https:\/\/fonts.googleapis.com\/css?family=Terminal+Dosis);\n#ani-pattern {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 250px;\n   backface-visibility: hidden;\n  background-color: hsl(0,0%,18%);\n   background-size: 3px 3px;\n  background-image:  linear-gradient(  0deg, hsla(0,0%,0%,0) 0, hsla(0,0%,10%,1) 3px),\n     linear-gradient( 90deg, hsla(0,0%,0%,0) 0, hsla(0,0%,10%,1) 5px);\n  background-image: -moz-linear-gradient( hsl(0,0%,11%), hsl(0,0%,11%) );\n  background-image:  -ms-linear-gradient( hsl(0,0%,11%), hsl(0,0%,11%) );\n  background-image:   -o-linear-gradient( hsl(0,0%,11%), hsl(0,0%,11%) );\n  margin: 0;\n  padding: 50px;\n  text-align: center;\n  font: 13px\/18px \"Droid Sans\", \"Lucida Grande\", Lucida, Verdana, sans-serif;\n}\n\/* Space CaCSS ------------------------------------------------- *\/\n#ani-pattern div {\n  display: inline-block;\n  position: relative;\n  width: 200px;\n  height: 200px;\n  margin: 0px auto;\n  border-radius: 50%;\n  border: 10px solid hsla(0,0%,0%,.7);\n  box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),\n    inset 0 -5px 10px 3px hsla(0,0%,0%,.6), \n    0 8px 10px 2px hsla(0,0%,0%,.3);\n  background-position: center;\n  transform: scale(.66);\n  transition: transform .5s cubic-bezier(.32,0,.15,1);\n}\n#ani-pattern div:hover {\n  cursor: none;\n  transform: scale(1);\n  transition: transform .2s cubic-bezier(.32,0,.15,1);\n}\n\/* Particle Ping Pong -------------------------------------------- *\/\n.particle {\n  background-size: 12px 12px;\n  background-color: #000;<\/p>\n<p>  \/* the default highlight was too strong *\/\n  box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.25), inset 0 -5px 10px 3px hsla(0,0%,0%,.6), 0 8px 10px 2px hsla(0,0%,0%,.3);\n  background-image: radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),\n    repeating-radial-gradient( white 0px, black 2px, black 48px);\n}\n.particle:hover {\n  animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;\n}\n@keyframes particle-size { from { background-size: 6px 6px, 12px 12px; } to { background-size: 12px 12px, 24px 24px; } }\n@keyframes particle-positon { from { background-position: 60px, 60px; } to { background-position: 140px, 140px; } }\n\/* Growing cells -------------------------------------------- *\/\n.cells {\n  background-size: 24px 24px;\n  background-color: #fff;\n  background-image: repeating-radial-gradient( black 8px, white 12px);\n}\n.cells:hover {\n  animation: cells 0.4s linear infinite;\n}\n@keyframes cells { from { background-size: 12px 12px; } to { background-size: 24px 24px; } }\n\/* Jelly -------------------------------------------- *\/\n.jelly {\n  background-size: 60px 60px;\n  background-color: hsla(320,80%,60%,1);\n  background-image: repeating-radial-gradient( hsla(320,100%,60%,.6) 0px, hsla(220,100%,60%,0) 60%),\n    repeating-radial-gradient( hsla(330,100%,40%,1) 12%, hsla(320,80%,60%,1) 24px);\n}\n.jelly:hover {\n  animation: jelly 1.4s cubic-bezier(.1,.4,.9,.6) infinite;\n}\n@keyframes jelly {\n  from { background-size:  60px  60px,  24px  24px; }\n  50%  { background-size: 120px 120px, 100px 100px; }\n  to   { background-size:  24px  24px, 140px 140px; }\n}\n\/* Blobbs -------------------------------------------- *\/\n.blobbs {\n  background-size: 66px 66px;\n  background-color: hsl(200,100%,50%);\n  background-image: repeating-radial-gradient( hsla(200,100%,80%,.8) 0px, hsla(200,100%,80%,.5) 4px, hsla(200,100%,80%,0) 50px),\n    repeating-radial-gradient( hsla(260,100%, 0%, 0) 0px, hsla(260,100%,50%,.1) 2px, hsla(260,100%, 0%,0) 10px);\n}\n.blobbs:hover {\n  animation: blobbs-position 6s cubic-bezier(.4,0,.2,1) infinite,\n    blobbs-size .75s cubic-bezier(.4,0,.2,1) infinite alternate;\n}\n@keyframes blobbs-position {\n  0% { background-position: left top, left top; }\n  25% { background-position: right top, left bottom; }\n  50% { background-position: right bottom, right bottom; }\n  75% { background-position: left bottom, right top; }\n  100% { background-position: left top, left top; }\n}\n@keyframes blobbs-size { from { background-size: 200px 200px, 200px 200px; } to { background-size:  66px  66px, 66px 66px; } }\n<\/style>\n<article id=\"ani-pattern\">\n<div class=\"particle\"><\/div>\n<div class=\"cells\"><\/div>\n<div class=\"jelly\"><\/div>\n<div class=\"blobbs\"><\/div>\n<\/article>\n<h2>Background Blending<\/h2>\n<\/p>\n<p>Background blending <a href=\"http:\/\/b.parsons.edu\/~dejongo\/10-compositing-and-blending\/\">blends<\/a> the layers within a background. This is useful for blending a picture with a background color.\n<\/p>\n<p>The following blending modes are implemented in webkit and follow the blend modes found in Photoshop:<\/p>\n<style>\n.group li {display: inline-block;}\n.group li:after {content:\",\"}\n<\/style>\n<div class=group>\n<ul>\n<li> normal\n<\/li>\n<li> multiply\n<\/li>\n<li> screen\n<\/li>\n<li> overlay\n<\/li>\n<li> darken\n<\/li>\n<li> lighten\n<\/li>\n<li> color-dodge\n<\/li>\n<li>color-burn\n<\/li>\n<li> hard-light\n<\/li>\n<li> soft-light\n<\/li>\n<li> difference\n<\/li>\n<li> exclusion\n<\/li>\n<\/ul>\n<p>The following blending modes are not yet implemented by webkit<\/p>\n<ul>\n<li> hue <\/li>\n<li> saturation <\/li>\n<li> color <\/li>\n<li> luminosity <\/li>\n<\/ul>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#bb-example {\r\nwidth: 500px;\r\nheight: 333px;\r\nmargin: 20px auto;\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-2.jpg) , red;\r\n\/* change the background color value*\/\r\nbackground-blend-mode: exclusion;\r\n}\r\n\/* blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion  *\/<\/style><\/pre>\n<\/div>\n<div id=\"bb-example\" > <\/div>\n<\/p>\n<p>A more complicated example blends multiple layers. Change the blending mode of each background with varying results. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#b-1 {\r\nmargin-top: 40px;\r\nborder: 1px solid red;\r\nheight: 300px; width: 30%; \r\ndisplay: inline-block; margin-right: 1%;\r\nbackground:  radial-gradient( at bottom right, dodgerblue 0, dodgerblue 1em, lightskyblue 1em, lightskyblue 2em, deepskyblue 2em, deepskyblue 3em, gainsboro 3em, gainsboro 4em, lightsteelblue 4em, lightsteelblue 5em, deepskyblue 5em, deepskyblue 6em, lightskyblue 6em, lightskyblue 7em, transparent 7em, transparent 8em), radial-gradient( at top left, transparent 0, transparent 1em, lightskyblue 1em, lightskyblue 2em, deepskyblue 2em, deepskyblue 3em, lightsteelblue 3em, lightsteelblue 4em, gainsboro 4em, gainsboro 5em, deepskyblue 5em, deepskyblue 6em, skyblue 6em, skyblue 7em, dodgerblue 7em, dodgerblue 8em, transparent 8em, transparent 20em ), radial-gradient( circle at center bottom, coral, darkslateblue); background-blend-mode: overlay; background-size: 8em 8em, 8em 8em, cover;}\r\n#b-2 {\r\nmargin-top: 40px;\r\nborder: 1px solid red;\r\nheight: 300px; width: 30%; \r\ndisplay: inline-block; margin-right: 1%;\r\nbackground: repeating-radial-gradient( circle, transparent, transparent 3em, hotpink 1em, transparent 6em, tomato 6.5em), repeating-radial-gradient( ellipse farthest-corner, transparent 1em, cornflowerblue 1em, transparent 5em, cornflowerblue 2em), repeating-radial-gradient( circle, transparent, transparent 3em, gold 1em, transparent 2em, gold 4em), repeating-radial-gradient( circle, transparent 3em, gold 1em, transparent 2em, gold 4em), white; background-blend-mode: multiply;\r\nbackground-size: 10em 10em;\r\nbackground-position: 0 0, 5em 5em, 15em 50em;}\r\n#b-3 {\r\nmargin-top: 40px;\r\nheight: 300px; width: 30%; \r\ndisplay: inline-block; \r\nbackground: repeating-linear-gradient( #F3F5C4 0, #F3F5C4 3em, #F19181 3em, #F19181 6em), repeating-linear-gradient( 90deg, #F9CB8F 0, #F9CB8F 3em, #3CBAC8 3em, #3CBAC8 6em), repeating-linear-gradient( 45deg, transparent 0, transparent 6em, #F19181 12em), repeating-linear-gradient( -45deg, transparent 0, transparent 6em, #F19181 12em); background-blend-mode: multiply;}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#b-1 { background-blend-mode: overlay; \r\n}\r\n#b-2 { background-blend-mode: exclusion; \r\n}\r\n#b-3 { background-blend-mode: difference; \r\nbackground-color: purple;\r\n}\r\n\/* blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion  *\/<\/style><\/pre>\n<\/div>\n<div id=b><\/div>\n<div id=b-1><\/div>\n<div id=b-2><\/div>\n<div id=b-3><\/div>\n<h1>Border Properties<\/h1>\n<\/p>\n<p>All four sides of a border can be treated with one definition or you can specify the definition for any one side: top, right, bottom, left. <\/p>\n<h2>Standard Border<\/h2>\n<p>The border usually uses a shorthand where the width, color and style are given in this order: <code>border: 10px solid red;<\/code>. Leaving any one of these out breaks the border. Here is a list of the styles:<\/p>\n<div style=\"width: 100%;\">\n<div style=\"margin: 10px 0; padding: 10px; border: 10px none silver;\">\n\t \t<strong>none<\/strong>: No border. Color and width are ignored (i.e., the border has width 0 unless the border is an image.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px hidden silver;\">\n\t \t<strong>hidden<\/strong>: Same as none but has different behavior in the border conflict resolution rules for border-collapsed tables.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px dotted silver;\">\n\t \t<strong>dotted<\/strong> A series of round (square?) dots.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px dashed silver;\">\n\t \t<strong>dashed<\/strong>: A series of square-ended dashes.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px solid red;\">\n\t \t<strong>solid<\/strong>: A single line segment.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px double silver;\">\n\t \t<strong>double<\/strong>: Two parallel solid lines with some space between them.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px groove silver;\">\n\t \t<strong>groove<\/strong>: Looks as if it were carved in the canvas.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px ridge silver;\">\n\t \t<strong>ridge<\/strong>: Looks as if it were coming out of the canvas.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px inset silver;\">\n\t \t<strong>inset<\/strong>: Looks as if the content on the inside of the border is sunken into the canvas.\n\t<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px outset silver;\">\n\t \t<strong>outset<\/strong>: Looks as if the content on the inside of the border is coming out of the canvas.\n\t<\/div>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#border_style {\r\n\tmargin: 10px 0; \r\n\tpadding: 10px; \r\n\tborder: 10px solid red;\r\n\/*hidden, dotted, dashed, solid, double, groove, ridge, inset, outset*\/\r\n}<\/style><\/pre>\n<\/div>\n<div style=\"margin: 50px 0;\" id=\"border_style\">You can change the border attributes including the style yourself.<\/div>\n<h2>Specifying Each Side Individually<\/h2>\n<\/p>\n<p>You can also specify different width, color and style for each side of the box, as well as target each side individually. This is most often done to create a horizontal rule somewhere in the design: <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#border_style2 {\r\nmargin: 10px 0; \r\npadding: 10px; \r\nborder-color: black red black red;\r\nborder-style: dashed double dashed double;\r\nborder-width: 30px 20px 10px 20px;\r\n\/*hidden, dotted, dashed, solid, double, groove, ridge, inset, outset*\/\r\n}\r\n#border_style3 {\r\nborder-bottom: 10px solid red;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div style=\"margin-top: 50px;\" id=\"border_style2\">Change Me<\/div>\n<div style=\"margin: 50px 0;\" id=\"border_style3\"><\/div>\n<h2>Image Border<\/h2>\n<\/p>\n<p>So you want to use an image for the border? This is not only possible but powerfully implemented.  The following properties implement border image: <code> border-image-source<\/code>, <code>border-image-slice<\/code>, <code>border-image-width<\/code>, <code>border-image-outset<\/code>, and <code>border-image-repeat<\/code>. A border-image shorthand property <code>border-image:<\/code> strings all of the properties together:  <code>border-image-source, border-image-slice, border-image-width, border-image-width, border-image-outset, border-image-repeat<\/code>.  For example: <code>border-image: url('image.gif') 20 30 40 20 repeat;<\/code>. The url fetches the image, the next four numbers signify pixel values. Percentages get the percent sign but the pixel values do not get px added in behind the number. I&#8217;m not sure why. The last key words signifies how the middle section is treated.\n<\/p>\n<p>For some reason border-image in Chrome, Firefox, and Edge only work when there is a border style or border shorthand property given first (it will be written over by the border-images property) as in <code>border: 1px solid orange<\/code>. You can use this property to select any one of the four sides: <code>border-top: 1px solid orange<\/code>. This does not work in Safari. Any of the four borders can be specified a size including &#8220;0&#8221; to make it disappear, so that <code>border-top<\/code> can be achieved by <code>border-width: 20px 0 0;<\/code>.<\/p>\n<div style=\"border: 1px solid orange; overflow: auto; width: 80%; border-width: 20px; padding: 10px; margin: 20px auto; border-image: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_CSS-border-image1.gif') 20 repeat;\"><img decoding=\"async\" style=\"float: left; margin-right: 15px; margin-bottom: 10px;\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_CSS-border-image2.gif\" alt=\"border image\"\/><\/p>\n<p>As a box has four corners and four sides, a referenced picture is divided into 8 parts (the ninth part, which is discarded by default, represents the fill).  This is the picture used for the border, and it is 60px by 60px. The image was divided into thirds with 20 pixels for each corner and 20 pixels for the center section. Blue dividing lines are for demonstration and are not in the border image. If this seems complicated, there is an <a href=\"http:\/\/border-image.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">border image generator<\/a> to help you prepare your border images.\n<\/p>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#picture_border {\r\nwidth: 60%; \r\npadding: 30px; \r\nmargin: 20px auto; \r\nborder-width: 20px;\r\nborder-image: \r\nurl('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_CSS-border-image1.gif') 25 stretch;\r\n\/* 20 or 29, repeat, round, space *\/\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"picture_border\"><img style=\"float: left; margin-right: 15px; margin-bottom: 10px ;\"src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/07_CSS-border-image1.gif\" alt=\"border image\"\/><\/p>\n<p>It is possible to <strong>repeat<\/strong> the middle image, as above, or to <strong>stretch<\/strong> it, as here. There is also a value called <strong>round<\/strong>, where the image is repeated to fill the area, and if it does not fill the area with a whole number of tiles, the image is rescaled so that it does. The value <strong>space<\/strong> is similar, only it distributes the extra space around the tiled middle. The corners remain the same. There is also the <strong>fill<\/strong>value and though it works. and fill in the content I don&#8217;t know if it is official as it is not in the speck.\n<\/p>\n<\/div>\n<div style=\"border: 1px solid orange; overflow: auto; width: 430px; border-width: 34px; padding: 6px; margin: 20px auto; border-image: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/09-border.png') 34 repeat; \"><img decoding=\"async\" style=\"float: left; margin-right: 15px; margin-bottom: 10px;\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/09-border.png\" alt=\"border image\"\/><img decoding=\"async\" style=\"float: right; margin-right: 15px; margin-bottom: 10px;\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/09-border.jpg\" alt=\"border image\"\/><\/p>\n<p style=\"background: hsla(0,0%,100%,0);\">Replacing a <a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/09-table.png\"> picture<\/a>. First determined the width of the repeating section (34px). Create a square, combine 9 squares into a finished image, and positioned the parts accordingly. Copy the bottom from the top by rotating it 180\u00b0. That keeps the value at 34px. <code> border-image: url(09-border.png) 28 34 repeat; <\/code> It is possible to set each side, top, right, bottom and left with different settings.<br \/>\n<br \/> The image border is 6K, 1\/25 the size of the original and much more flexible.\n<\/p>\n<\/div>\n<h2>Gradient Borders<\/h2>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#gradient_border {\r\nwidth: 60%; \r\npadding: 30px; \r\nmargin: 20px auto; \r\nborder-width: 60px;\r\nborder-image: linear-gradient(red, purple, blue) 1 stretch;\r\n\/*1 through 200 to change the gradient, repeat, round, space, fill *\/\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"gradient_border\">\n<p>It used to be that Firefox had a dedicated border-gradient property. That is no longer the case. It is, however, unnecessary as a gradient can replace the picture in the border-image property. Setting the border-image-outset to 1 gives a smooth gradient when the border-image-repeat is set to smooth. Setting it to 200 changes the gradient. When set to repeat 1 gives solid colors, 20 generates a gradient and more than that starts to repeat the gradient  all the way up to 200. The repeat is relative to the height of the box so a larger box requires numbers higher than 200. This number represents the border image outset, or how the image is to be divided and it can have up to 4 numbers following the traditional clockwise order. One number makes the outset the same for all four dimensions, two does top and bottom and so on. <\/p>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#gradient_border2 {\r\nwidth: 60%; \r\npadding: 30px; \r\nmargin: 20px auto; \r\nborder: 1px solid orange;\r\nborder-width: 60px;\r\nborder-image: linear-gradient(to right bottom, red, blue)  10 190 30 50  repeat;\r\n\/*1 through 200, stretch, round, space, fill *\/\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"gradient_border2\">\n<p>This border-gradient is almost identical to the previous one. The angle has shifted <code> to left top<\/code> the border-image-repeat has been set to repeat and the border-image-outset has been set to 90. The repeating gradients do something interesting as the way the colors distribute along the axis is reflected in the border-gradient. Increase to colors of the gradient to <code> red, orange, yellow, purple, violet, blue <\/code> and you&#8217;l get a colorful repeating gradient. Adding repeating-linear-gradient does not appear to do much of anything. You can also us a radial gradient. Play around.\n<\/p>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#gradient_dborder p {\r\nmargin: 50px; text-align: center;\r\n}\r\n#gradient_dborder {\r\ndisplay:  flex;border-radius: 50%;\r\nheight: 350px; width: 350px; \r\nmargin: 20px auto; \r\npadding: 30px;\r\nborder: 30px solid transparent;\r\nbackground:\r\nlinear-gradient(silver 20%, white, silver 80%) content-box,\r\nlinear-gradient(red, blue) padding-box,\r\nlinear-gradient(blue, red) border-box;}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"gradient_dborder\">\n<p>A double border using the clip feature to limit three overlapping gradients that show up in the content background, margin, and a transparent border.\n<\/p>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#gradient_pborder p {\r\nmargin-top: auto; \r\n}\r\n#gradient_pborder {\r\ndisplay:  flex;\r\nheight: 250px; width: 60%; \r\npadding: 10px; \r\nmargin: 20px auto; \r\nborder: 1px solid orange;\r\nborder-width: 0 0 60px 10px;\r\nborder-image: linear-gradient(to bottom left, hsla(0,0%,100%,0) 50%, hsla(0,0%,0%,.8) ) 1 stretch;\r\n\/*1 through 200 to affect gradient, repeat, round, fill *\/\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"gradient_pborder\">\n<p>A partial border that uses a transparent white gradient that goes to transparent black. It create the effect of a gradient that feathers in the bottom left corner. This border gradient will composite into any background.\n<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The backgrounds and borders module covers the background and border of the box element: The Box Element In the official language of the W3.org; when elements are rendered according to the CSS box model, each element is either not displayed &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/09-backgrounds-and-borders\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/415"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=415"}],"version-history":[{"count":176,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/415\/revisions"}],"predecessor-version":[{"id":5917,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/415\/revisions\/5917"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}