{"id":2387,"date":"2021-06-11T12:49:48","date_gmt":"2021-06-11T16:49:48","guid":{"rendered":"https:\/\/thewpgeek.com\/?p=2387"},"modified":"2021-06-23T07:55:48","modified_gmt":"2021-06-23T11:55:48","slug":"box-shadow","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/box-shadow\/","title":{"rendered":"Box Shadow Wizard"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Box Shadow Wizard  <\/h2>\n\n\n\n<p>Choose from one of the gorgeous box-shadow examples and make live modifications to the style. Check back as we will be adding more curated styles regularly. <\/p>\n\n\n\n<style>\n.caption {\n    display: none;\n}\n<\/style>\n\n\n\n<style>\n.body{\n  background: #fafafa;\n}\n.container{\n  width: 100%;\n  margin:auto;\n}\n.flexpreview{\n    display: flex;\n    width: 100%;\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-content: center;\n    justify-content: center;\n    align-items: center;\n}\n.flex{\n\n  display:flex;\n  width: 100%;\n    display: inline-flex;\n  flex-wrap: wrap;\n  align: left;\n  \n}\n\n.base {\n  margin: 16px;\n  width: 100px;\n  height: 100px;\n  background-color: #FFF;\n  border-radius: 15px;\ndisplay: flex;\njustify-content: center;\n    align-items: center;\n}\n\n.style1{\n    box-shadow:\n       inset 0 -3em 3em rgba(0,0,0,0.1),\n             0 0  0 2px rgb(255,255,255),\n             0.3em 0.3em 1em rgba(0,0,0,0.3);\n}\n\n.style2 {\n  box-shadow: rgba(38, 57, 77, 0.92) 0px 10px 20px -10px;\n}\n.style3 {\n  box-shadow: rgba(50, 50, 93, 0.15) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 15px 32px -18px inset;\n}\n.style4 {\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 4px 0px;\n}\n.style5{\nbox-shadow: \n8px 0 5px -8px rgba(0,0,0,0.4),\n-8px 0 5px -8px rgba(0,0,0,0.4); \n}\n\n.style6{ \n  box-shadow:\n  2px 2px rgba(60, 64, 67, 0.4),\n 4px 4px rgba(60, 64, 67, 0.3),\n  6px 6px rgba(60, 64, 67, 0.2),\n 8px 8px rgba(60, 64, 67, 0.1),\n 10px 10px rgba(60, 64, 67, 0.05),\n  -1px -1px rgba(60, 64, 67, 0.1);\n}\n.style7{\n  box-shadow:\n  0  5px 10px rgba(154,160,185,0.05),\n  0 15px 40px rgba(166,173,201,0.2);\n}\n\n.style8{\n   box-shadow:\n inset 0 0 0.5em rgba(0,0,0,0.1),\n 0.2em 0.2em 0.5em rgba(0,0,0,0.2);\n}\n\n.stylefirst {\n  box-shadow: rgba(17, 17, 26, 0.1) 0px 2px 1px;\n}\n.preview{\njustify-content: center;\n}\n.fa-check-circle {\n    color: #0add08;\n    font-size: 1.5em;\n\n}\n\n#preview{\nwidth:200px;\nheight:200px;\n}\n\n.radius{\nwidth: 70px;\n    height: 50px;\n    padding: 20px;\n}\n\n\n.settings {\n  margin-top: 12px;\n  padding: 35px;\n  background: #424d5b;\n}\n\n.setting {\n  margin-bottom: 30px;\n}\n.setting .name {\n  text-transform: uppercase;\n  color: white;\n  font-size: 12px;\n}\n.setting .info {\n  color: #8a8b93;\n  font-size: 12px;\n}\n.setting .switch {\n  float: right;\n  margin-top: -10px;\n}\n\n.checkbox {\n  display: inline-block;\n  vertical-align: top;\n}\n\n.checkbox-label {\n  display: inline-block;\n  height: 30px;\n  line-height: 30px;\n  padding-left: 10px;\n}\n\n.footer {\n  text-align: right;\n}\n\n.button {\n  width: 85px;\n  padding: 16px 0;\n  color: white;\n  text-transform: uppercase;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n\n\n\/* Slider *\/\n.slider {\n  width: 100%;\n}\n.slider input {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 100%;\n  height: 6px;\n  border-radius: 2px;\n  outline: none;\n  border: 0;\n  background: linear-gradient(to right, #4e6179 0%, #ffaf7a 54%, #ffaf7a 100%);\n}\n.slider input::-webkit-slider-thumb {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: white;\n  border: 0;\n}\n\n.grid-corners {\n  margin: 20px auto;\n  width: 1fr;\n  height: 1fr;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-row: auto auto;\n  grid-column-gap: 20px;\n  grid-row-gap: 20px;\n}\n.grid-corners .box {\n  background-color: #333;\n  padding:5px;\n  border-radius: 10px;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 5px;\n \n}\n<\/style>\n<style id=\"livestyle\">\n\n<\/style>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Choose a Box Shadow Base Style<\/h3>\n\n\n\n<div class=\"wp-block-group has-theme-white-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<br>\n<div class=\"container\">\n<div class=\"flex listen\">\n<div class=\"base stylefirst\"><\/div>\n  <div class=\"base style1\"><\/div>\n  <div class=\"base style2\"><\/div>\n  <div class=\"base style3\"><\/div>\n  <div class=\"base style4\"><\/div>\n  <div class=\"base style5\"><\/div>\n  <div class=\"base style6\"><\/div>\n  <div class=\"base style7\"><\/div>\n  <div class=\"base style8\"><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Fine-Tune the Box-Shadow<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group has-theme-black-color has-theme-white-background-color has-text-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h4 class=\"has-text-align-center wp-block-heading\">The Box Shadow :<\/h4>\n\n\n\n<div class=\"container\">\n<div class=\"flexpreview\">\n<div id=\"preview\" class=\"base stylefirst myStyle\"><\/div> \n<\/div>\n<\/div>\n\n\n\nOpacity:<div class=\"opacityvalue\">No Value Selected<\/div>\n\n\n\nBox Color: <div class=\"insidebox\">No Value Selected<\/div>\n\n\n\nShadow Color: <div class=\"shadowcolor\">No Value Selected<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"has-text-align-center wp-block-heading\">Your Settings :<\/h4>\n\n\n\n<div class=\"settings\">\n         <div class=\"grid-corners\">\n  <div class=\"box\"> \n    <div class=\"setting\">\n      <div class=\"name\">\n        Shadow Color\n      <\/div>\n      <div class=\"info\">\nBase color of the drop shadow\n<div>\n<input onchange=\"colorSelected(this)\" type=\"color\" id=\"color\" value=\"#FFFFFF\">\n        <\/div> <\/div>\n      <\/div>\n    <\/div>\n <div class=\"box\">          \n    <div class=\"setting\">\n      <div class=\"name\">\n     Background Color\n      <\/div>\n      <div class=\"info\">\n Base background\n       <div>\n<input onchange=\"bgColorSelected(this)\" type=\"color\" id=\"bgColor\" value=\"#FFFFFF\">\n<\/div>\n      <\/div>\n   <\/div> <\/div><\/div>\n    <div class=\"setting\">\n      <div class=\"name\">\n        Opacity\n      <\/div>\n      <div class=\"info\">\n       <div>\nStart Shadow Opacity\n<br>\n<div class=\"slider\">\n  <input type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\" class=\"slider\" onchange=\"opacityValue(this)\" id=\"opacityslider\">\n<\/div>\n<\/div>\n        <\/div>\n\n<br>      \n       <div class=\"setting\">\n      <div class=\"name\">\n    Radius\n      <\/div>\n      <div class=\"info\">\n       <div>\nCorner Radius Value\n<br>\n<div class=\"slider\">\n  <input type=\"range\" min=\"1\" max=\"50\" value=\"25\" class=\"slider\" onchange=\"radiusValue(this)\">\n<\/div>\n<\/div>\n        <\/div>\n      <\/div>\n    <!-- 2x2 grid for corners -->\n\n             <div class=\"setting\">\n      <div class=\"name\">\n    Individual Corner Radius\n      <\/div>\n      <div class=\"info\">\n       <div>\n         Change one corner radius seperate from the others.\n<br>\n      \n      <div class=\"grid-corners\">\n  <div class=\"box\"><div class=\"slider\">\n  <input type=\"range\" min=\"1\" max=\"50\" step=\"1\" value=\"25\" id=\"rad1\" class=\"slider\" onchange=\"radiusChange()\">\n<\/div><\/div>\n  <div class=\"box\"><div class=\"slider\">\n  <input type=\"range\" min=\"1\" max=\"50\" step=\"1\" value=\"25\" id=\"rad2\" class=\"slider\" onchange=\"radiusChange()\">\n<\/div><\/div>\n  <div class=\"box\"><div class=\"slider\">\n  <input type=\"range\" min=\"1\" max=\"50\" step=\"1\" value=\"25\" id=\"rad3\" class=\"slider\" onchange=\"radiusChange()\">\n<\/div><\/div>\n  <div class=\"box\"><div class=\"slider\">\n  <input type=\"range\" min=\"1\" max=\"50\" step=\"1\" value=\"25\" id=\"rad4\" class=\"slider\" onchange=\"radiusChange()\">\n<\/div><\/div>\n<\/div>\n      \n    <\/div>\n\n  <\/div>\n<\/div>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<script>\n\/* Get preview names *\/\nlet preview = document.querySelector(\"#preview\");\n\n\/* Get the selected box, and put into preview class *\/\ndocument.querySelector(\".listen\").addEventListener(\"click\", (e) => {\n if (e.target.classList.contains('base')){\n\/* clear prev settings *\/\ndocument.getElementById('receiving_div_id').innerHTML = '<p> awaiting code <\/p>';\ndocument.getElementById('livestyle').innerHTML = '';\ndocument.querySelector('#bgColor').value='#FFFFFF';\n\nlet selectedStyle = e.target.className;\npreview.className = selectedStyle;\npreview.classList.add(\"myStyle\");\n\/* Update sliders. *\/\nlet elem,\n    style;\nelem = document.querySelector('#preview');\nstyle = getComputedStyle(elem);\nstyle = style.boxShadow.replace(\/^.*(rgba?\\([^)]+\\)).*$\/,'$1');\nlet opacity = style.split(',')[3];\nopacity = opacity.slice(0, -1); \n\ndocument.querySelector(\"#opacityslider\").value=opacity.trim();\n\nstyle = rgba2hex(style);\nstyle = style.substring(0, style.length - 2);\nconsole.log(style);\ndocument.querySelector(\"#color\").value=`#${style}`;\n\n\nupdate()\n\n\/* Add checkbox to the selected style *\/\nlet clear = document.querySelectorAll(\".base\");\n\nfor(let i=0; i < clear.length; i++){\nclear[i].innerHTML = \"\";\n}\ne.target.innerHTML = '<i class=\"fas fa-check-circle\"><\/i>';\n}\n\n});\n\n\n\/* helper functions *\/\n\nfunction rgba2hex(orig) {\n  var a, isPercent,\n    rgb = orig.replace(\/\\s\/g, '').match(\/^rgba?\\((\\d+),(\\d+),(\\d+),?([^,\\s)]+)?\/i),\n    alpha = (rgb && rgb[4] || \"\").trim(),\n    hex = rgb ?\n    (rgb[1] | 1 << 8).toString(16).slice(1) +\n    (rgb[2] | 1 << 8).toString(16).slice(1) +\n    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;\n\n  if (alpha !== \"\") {\n    a = alpha;\n  } else {\n    a = 01;\n  }\n  \/\/ multiply before convert to HEX\n  a = ((a * 255) | 1 << 8).toString(16).slice(1)\n  hex = hex + a;\n\n  return hex;\n}\n\nfunction hexToRgbA(hex){\n    var c;\n    if(\/^#([A-Fa-f0-9]{3}){1,2}$\/.test(hex)){\n        c= hex.substring(1).split('');\n        if(c.length== 3){\n            c= [c[0], c[0], c[1], c[1], c[2], c[2]];\n        }\n        c= '0x'+c.join('');\n        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';\n    }\n    throw new Error('Bad Hex');\n}\n\nfunction colorSelected (element) {\n\/* Update the box with color value first and declare variables *\/\n let colValue = element.value;\ncolValue = hexToRgbA(colValue);\nlet valueBox = document.querySelector(\".shadowcolor\");\nvalueBox.innerHTML = colValue;\nupdate();\n\n}\n\n\nfunction bgColorSelected (element) {\n\/* Update the box with color value first and declare variables *\/\n let bgColValue = element.value;\nbgColValue = hexToRgbA(bgColValue);\nlet valueBox = document.querySelector(\".insidebox\");\nvalueBox.innerHTML = bgColValue;\nupdate();\n\n}\n\n\/* Update Opacity*\/\n\nfunction opacityValue (element) {\n let opValue = element.value;\n\nlet opacityBox = document.querySelector(\".opacityvalue\");\n\nopacityBox.innerHTML = opValue;\n\nupdate()\n}\n\n\/* Update radius*\/\n\nfunction radiusValue(element) {\n let radValue = element.value;\n\ndocument.querySelector(\"#rad1\").value = radValue;\ndocument.querySelector(\"#rad2\").value = radValue;\ndocument.querySelector(\"#rad3\").value = radValue;\ndocument.querySelector(\"#rad4\").value = radValue;\nradiusChange()\n}\n\n\/* apply radius on change*\/\n\n\/\/ global radius rule\nlet radiusStyle ='';\nfunction radiusChange() {\n\nlet val1 = document.querySelector(\"#rad1\").value + \"%\";\nlet val2 = document.querySelector(\"#rad2\").value + \"%\"; \nlet val3 = document.querySelector(\"#rad3\").value + \"%\"; \nlet val4 = document.querySelector(\"#rad4\").value + \"%\";\n\nif(val1 == val2 && val1 == val3 && val1 == val4){\n\/* items are the same, use border-radius *\/\npreview.style.borderRadius = val1;\nradiusStyle = `border-radius: ${val1};`\n}else{\n\/* items are the different, use specific corner style rules *\/\npreview.style.borderTopLeftRadius = val1;\npreview.style.borderTopRightRadius = val2;\npreview.style.borderBottomLeftRadius = val3;\npreview.style.borderBottomRightRadius = val4;\nradiusStyle = `\nborder-top-left-radius: ${val1};\nborder-top-right-radius: ${val2};\nborder-bottom-left-radius: ${val3};\nborder-bottom-right-radius: ${val4};\n`\n\n}\nupdate();\n}\n\n\/* update the style *\/\nfunction updatestyle(){\nlet injectStyle = document.getElementById('livestyle');\nlet myStyle = document.getElementById('myStyle').innerHTML;\ninjectStyle.innerHTML = myStyle\n}\n<\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Generated CSS Box Shadow Code :<\/h4>\n\n\n\n<div class=\"wp-block-group has-custom-sun-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div id=\"receiving_div_id\">\n   <p>Make modifications or choose a box-shadow style and the CSS code will appear here.<\/p> \n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<script type=\"text\/javascript\">\nfunction update(){\n\nlet style = document.querySelector(\"#preview\").className;\nlet bgColor = document.querySelector(\"#bgColor\").value;\nbgColor = hexToRgbA(bgColor);\n\nlet shadowColor = document.querySelector(\"#color\").value;\nshadowColor = hexToRgbA(shadowColor);\n\nlet opacity = document.querySelector(\"#opacityslider\").value;\nwithOpacity = shadowColor.replace(\/[\\d\\.]+\\)$\/g, opacity + ' )');\n\n      var data = {\n         'action'   : 't4a_ajax_call', \/\/ the name of your PHP function!\n         'backgroundColor'  : bgColor,\n         'shadowColor'  : withOpacity,\n         'opacity'  : opacity,\n         'radius'  : radiusStyle,\n         'style': style\n       \n         };\n       \n      jQuery.post(ajaxurl, data, function(response) {\n         jQuery(\"#receiving_div_id\").html(response);\n         updatestyle()\n      });\n   }\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Box Shadow Wizard Choose from one of the gorgeous box-shadow examples and make live modifications to the style. Check back as we will be adding more curated styles regularly. Step 1: Choose a Box Shadow Base Style Step 2: Fine-Tune the Box-Shadow The Box Shadow : Opacity: No Value Selected Box Color: No Value Selected [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_uag_custom_page_level_css":"","footnotes":""},"categories":[3],"tags":[134,24,116],"uagb_featured_image_src":{"full":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy.jpg",1280,853,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy-150x150.jpg",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy-300x200.jpg",300,200,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy-768x512.jpg",768,512,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy-1024x682.jpg",1024,682,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy.jpg",1280,853,false],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy.jpg",1280,853,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy-720x480.jpg",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/boxshadow-copy.jpg",1280,853,false]},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/thewpgeek.com\/author\/admin\/"},"uagb_comment_info":3,"uagb_excerpt":"Box Shadow Wizard Choose from one of the gorgeous box-shadow examples and make live modifications to the style. Check back as we will be adding more curated styles regularly. Step 1: Choose a Box Shadow Base Style Step 2: Fine-Tune the Box-Shadow The Box Shadow : Opacity: No Value Selected Box Color: No Value Selected&hellip;","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2387"}],"collection":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/comments?post=2387"}],"version-history":[{"count":132,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2387\/revisions"}],"predecessor-version":[{"id":2828,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2387\/revisions\/2828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2609"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=2387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=2387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=2387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}