(window.webpackJsonp=window.webpackJsonp||[]).push([[931],{1339:function(t,s,a){"use strict";a.r(s);var n=a(31),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"box-shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#box-shadow"}},[t._v("#")]),t._v(" box-shadow")]),t._v(" "),a("h2",{attrs:{id:"bottom-only-drop-shadow-using-a-pseudo-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bottom-only-drop-shadow-using-a-pseudo-element"}},[t._v("#")]),t._v(" bottom-only drop shadow using a pseudo-element")]),t._v(" "),a("p",[t._v("JSFiddle: "),a("a",{attrs:{href:"https://jsfiddle.net/UnsungHero97/80qod7aL/2/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jsfiddle.net/UnsungHero97/80qod7aL/2/"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("HTML")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("<div class="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"box_shadow"')]),t._v("></div>\n\n")])])]),a("p",[a("strong",[t._v("CSS")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".box_shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #1c90f3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".box_shadow:after")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 190px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 98px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("z-index")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" -1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-webkit-box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0px 0px 8px 2px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-moz-box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0px 0px 8px 2px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0px 0px 8px 2px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("a",{attrs:{href:"https://i.stack.imgur.com/5n1ho.png",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"https://i.stack.imgur.com/5n1ho.png",alt:"enter image description here"}}),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"drop-shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drop-shadow"}},[t._v("#")]),t._v(" drop shadow")]),t._v(" "),a("p",[t._v("JSFiddle: "),a("a",{attrs:{href:"https://jsfiddle.net/UnsungHero97/80qod7aL/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jsfiddle.net/UnsungHero97/80qod7aL/"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("HTML")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("<div class="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"box_shadow"')]),t._v("></div>\n\n")])])]),a("p",[a("strong",[t._v("CSS")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".box_shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-webkit-box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0px 0px 10px -1px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-moz-box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0px 0px 10px -1px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0px 0px 10px -1px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"inner-drop-shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inner-drop-shadow"}},[t._v("#")]),t._v(" inner drop shadow")]),t._v(" "),a("p",[t._v("HTML")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("<div class="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"box_shadow"')]),t._v("></div>\n\n")])])]),a("p",[t._v("CSS")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".box_shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #1c90f3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-webkit-box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inset 0px 0px 10px 0px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("-moz-box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inset 0px 0px 10px 0px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inset 0px 0px 10px 0px #444444"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Result:")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://i.stack.imgur.com/AMmgA.png",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"https://i.stack.imgur.com/AMmgA.png",alt:"enter image description here"}}),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("JSFiddle: "),a("a",{attrs:{href:"https://jsfiddle.net/UnsungHero97/80qod7aL/1/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jsfiddle.net/UnsungHero97/80qod7aL/1/"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"multiple-shadows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-shadows"}},[t._v("#")]),t._v(" multiple shadows")]),t._v(" "),a("p",[t._v("JSFiddle: "),a("a",{attrs:{href:"https://jsfiddle.net/UnsungHero97/80qod7aL/5/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jsfiddle.net/UnsungHero97/80qod7aL/5/"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("HTML")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("<div class="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"box_shadow"')]),t._v("></div>\n\n")])])]),a("p",[a("strong",[t._v("CSS")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".box_shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" -52px -52px 0px 0px #f65314"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 52px -52px 0px 0px #7cbb00"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    -52px 52px 0px 0px #00a1f1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 52px 52px 0px 0px #ffbb00"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("a",{attrs:{href:"http://i.stack.imgur.com/mBU1Q.png",target:"_blank",rel:"noopener noreferrer"}},[a("img",{attrs:{src:"http://i.stack.imgur.com/mBU1Q.png",alt:"multiple shadows"}}),a("OutboundLink")],1)]),t._v(" "),a("h4",{attrs:{id:"syntax"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#syntax"}},[t._v("#")]),t._v(" Syntax")]),t._v(" "),a("li",[t._v("box-shadow: none|h-shadow v-shadow blur spread color\n|inset|initial|inherit;")]),t._v(" "),a("h4",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Parameters")]),t._v(" "),a("th",[t._v("Details")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("inset")]),t._v(" "),a("td",[t._v("by default, the shadow is treated as a drop shadow. the inset keyword draws the shadow inside the frame/border.")])]),t._v(" "),a("tr",[a("td",[t._v("offset-x")]),t._v(" "),a("td",[t._v("the horizontal distance")])]),t._v(" "),a("tr",[a("td",[t._v("offset-y")]),t._v(" "),a("td",[t._v("the vertical distance")])]),t._v(" "),a("tr",[a("td",[t._v("blur-radius")]),t._v(" "),a("td",[t._v("0 by default. value cannot be negative. the bigger the value, the bigger and lighter the shadow becomes.")])]),t._v(" "),a("tr",[a("td",[t._v("spread-radius")]),t._v(" "),a("td",[t._v("0 by default. positive values will cause the shadow to expand. negative values will cause the shadow to shrink.")])]),t._v(" "),a("tr",[a("td",[t._v("color")]),t._v(" "),a("td",[t._v("can be of various notations: a color keyword, hexadecimal, "),a("code",[t._v("rgb()")]),t._v(", "),a("code",[t._v("rgba()")]),t._v(", "),a("code",[t._v("hsl()")]),t._v(", "),a("code",[t._v("hsla()")])])])])]),t._v(" "),a("h4",{attrs:{id:"remarks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remarks"}},[t._v("#")]),t._v(" Remarks")]),t._v(" "),a("p",[t._v("Browser Support:")]),t._v(" "),a("ul",[a("li",[t._v("Chrome 10.0")]),t._v(" "),a("li",[t._v("IE 9.0")]),t._v(" "),a("li",[t._v("Firefox 4.0 3.5 -moz")]),t._v(" "),a("li",[t._v("Safari 5.1 3.1 -webkit-")]),t._v(" "),a("li",[t._v("Opera 10.5")])])])}),[],!1,null,null,null);s.default=e.exports}}]);