├── css └── styles.css ├── index.html └── js └── scripts.js /css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Verdana"; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | h2 { 8 | margin-bottom: 1.6rem; 9 | text-align: center; 10 | color: #333; 11 | } 12 | 13 | #box-shadow-generator { 14 | display: flex; 15 | max-width: 1000px; 16 | margin: 0 auto; 17 | } 18 | 19 | #controls-container, 20 | #preview { 21 | flex: 1; 22 | padding: 2rem; 23 | } 24 | 25 | /* Controls */ 26 | .form-control { 27 | display: flex; 28 | padding-bottom: 1.2rem; 29 | margin-bottom: 1.2rem; 30 | border-bottom: 1px dashed #ccc; 31 | } 32 | 33 | .form-control label { 34 | font-weight: bold; 35 | margin-bottom: 1rem; 36 | color: #555; 37 | } 38 | 39 | .range-input { 40 | display: flex; 41 | flex-direction: column; 42 | flex: 1; 43 | } 44 | 45 | .range-input input[type="range"] { 46 | -webkit-appearance: none; 47 | width: 100%; 48 | height: 24px; 49 | background: #d3d3d3; 50 | outline: none; 51 | } 52 | 53 | .range-input input[type="range"]::-webkit-slider-thumb { 54 | -webkit-appearance: none; 55 | appearance: none; 56 | width: 25px; 57 | height: 25px; 58 | background: #e9d60a; 59 | cursor: pointer; 60 | } 61 | 62 | .reference-input { 63 | display: flex; 64 | align-items: center; 65 | } 66 | 67 | .reference-input p { 68 | margin-left: 4px; 69 | } 70 | 71 | .form-control input[type="text"] { 72 | height: 30px; 73 | width: 40px; 74 | margin-left: 1rem; 75 | text-align: center; 76 | } 77 | 78 | /* Comu */ 79 | #color-value { 80 | min-width: 100px; 81 | } 82 | 83 | #inset { 84 | align-self: start; 85 | height: 20px; 86 | width: 20px; 87 | } 88 | 89 | /* Preview */ 90 | #box { 91 | width: 100%; 92 | height: 300px; 93 | background-color: #e9d60a; 94 | } 95 | 96 | /* Área de geração */ 97 | #generated-rule { 98 | text-align: center; 99 | margin-bottom: 2rem; 100 | padding: 0 2rem; 101 | } 102 | 103 | #generated-rule p { 104 | margin-bottom: 0.5rem; 105 | } 106 | 107 | #rules-area { 108 | background-color: #d3d3d3; 109 | max-width: 900px; 110 | margin: 0 auto; 111 | border: 2px solid #e9d60a; 112 | padding: 1rem; 113 | cursor: pointer; 114 | transition: 0.4s; 115 | } 116 | 117 | #rules-area:hover { 118 | background-color: #dfdfdf; 119 | } 120 | 121 | #copy-instructions { 122 | margin-top: 1rem; 123 | font-style: italic; 124 | } 125 | 126 | /* Responsivo */ 127 | @media (max-width: 425px) { 128 | #controls-container, 129 | #preview { 130 | padding: 1rem 2rem; 131 | } 132 | 133 | #box-shadow-generator { 134 | flex-direction: column; 135 | } 136 | 137 | #box { 138 | width: 60%; 139 | height: 200px; 140 | margin: 0 auto; 141 | } 142 | 143 | #generated-rule { 144 | margin-top: 1.5rem; 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Gerador de Box Shadow 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Configurações da Box Shadow:

15 |
16 |
17 | 18 | 26 |
27 |
28 | 29 |

px

30 |
31 |
32 |
33 |
34 | 35 | 43 |
44 |
45 | 46 |

px

47 |
48 |
49 |
50 |
51 | 52 | 60 |
61 |
62 | 63 |

px

64 |
65 |
66 |
67 |
68 | 69 | 77 |
78 |
79 | 80 |

px

81 |
82 |
83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 | 95 | 104 |
105 |
106 | 107 |
108 |
109 |
110 |
111 | 112 | 113 |
114 |
115 |
116 |
117 |

Preview do efeito gerado:

118 |
119 |
120 |
121 |
122 |

Copie e cole no seu arquivo de CSS:

123 |
124 |

box-shadow:

125 |

-webkit-box-shadow:

126 |

-moz-box-shadow:

127 |
128 |

Clique no quadro acima para copiar as regras

129 |
130 | 131 | 132 | -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | class BoxShadowGenerator { 2 | constructor( 3 | horizontal, 4 | horizontalRef, 5 | vertical, 6 | verticalRef, 7 | blur, 8 | blurRef, 9 | spread, 10 | spreadRef, 11 | color, 12 | colorRef, 13 | opacity, 14 | opacityRef, 15 | inset, 16 | previewBox, 17 | rule, 18 | webkitRule, 19 | mozRule 20 | ) { 21 | this.horizontal = horizontal; 22 | this.horizontalRef = horizontalRef; 23 | this.vertical = vertical; 24 | this.verticalRef = verticalRef; 25 | this.blur = blur; 26 | this.blurRef = blurRef; 27 | this.spread = spread; 28 | this.spreadRef = spreadRef; 29 | this.color = color; 30 | this.colorRef = colorRef; 31 | this.opacity = opacity; 32 | this.opacityRef = opacityRef; 33 | this.inset = inset; 34 | this.insetRef = inset.checked; 35 | this.previewBox = previewBox; 36 | this.rule = rule; 37 | this.webkitRule = webkitRule; 38 | this.mozRule = mozRule; 39 | } 40 | 41 | initialize() { 42 | this.horizontalRef.value = this.horizontal.value; 43 | this.verticalRef.value = this.vertical.value; 44 | this.blurRef.value = this.blur.value; 45 | this.spreadRef.value = this.spread.value; 46 | this.colorRef.value = this.color.value; 47 | this.opacityRef.value = this.opacity.value; 48 | 49 | this.applyRule(); 50 | this.showRule(); 51 | } 52 | 53 | updateValue(type, value) { 54 | switch (type) { 55 | case "horizontal": 56 | this.horizontalRef.value = value; 57 | break; 58 | case "vertical": 59 | this.verticalRef.value = value; 60 | break; 61 | case "spread": 62 | this.spreadRef.value = value; 63 | break; 64 | case "blur": 65 | this.blurRef.value = value; 66 | break; 67 | case "color": 68 | this.colorRef.value = value; 69 | break; 70 | case "opacity": 71 | this.opacityRef.value = value; 72 | break; 73 | case "inset": 74 | this.insetRef = value; 75 | break; 76 | } 77 | 78 | this.applyRule(); 79 | this.showRule(); 80 | } 81 | 82 | applyRule() { 83 | const rgbValue = this.hexToRgb(this.colorRef.value); 84 | 85 | const shadowRule = `${this.insetRef ? "inset" : ""} ${ 86 | this.horizontalRef.value 87 | }px ${this.verticalRef.value}px ${this.blurRef.value}px ${ 88 | this.spreadRef.value 89 | }px rgba(${rgbValue}, ${this.opacityRef.value})`; 90 | 91 | this.previewBox.style.boxShadow = shadowRule; 92 | this.currentRule = shadowRule; 93 | } 94 | 95 | showRule() { 96 | const ruleWithSemiColon = `${this.currentRule};`; 97 | 98 | this.rule.innerText = ruleWithSemiColon; 99 | this.webkitRule.innerText = ruleWithSemiColon; 100 | this.mozRule.innerText = ruleWithSemiColon; 101 | } 102 | 103 | hexToRgb(hex) { 104 | return `${("0x" + hex[1] + hex[2]) | 0}, ${("0x" + hex[3] + hex[4]) | 0}, ${ 105 | ("0x" + hex[5] + hex[6]) | 0 106 | }`; 107 | } 108 | } 109 | 110 | // Selecionar elementos 111 | const horizontal = document.querySelector("#horizontal"); 112 | const horizontalRef = document.querySelector("#horizontal-value"); 113 | const vertical = document.querySelector("#vertical"); 114 | const verticalRef = document.querySelector("#vertical-value"); 115 | const blur = document.querySelector("#blur"); 116 | const blurRef = document.querySelector("#blur-value"); 117 | const spread = document.querySelector("#spread"); 118 | const spreadRef = document.querySelector("#spread-value"); 119 | const previewBox = document.querySelector("#box"); 120 | 121 | const color = document.querySelector("#color"); 122 | const colorRef = document.querySelector("#color-value"); 123 | 124 | const opacity = document.querySelector("#opacity"); 125 | const opacityRef = document.querySelector("#opacity-value"); 126 | 127 | const inset = document.querySelector("#inset"); 128 | 129 | const rule = document.querySelector("#rule span"); 130 | const webkitRule = document.querySelector("#webkit-rule span"); 131 | const mozRule = document.querySelector("#moz-rule span"); 132 | 133 | const boxShadow = new BoxShadowGenerator( 134 | horizontal, 135 | horizontalRef, 136 | vertical, 137 | verticalRef, 138 | blur, 139 | blurRef, 140 | spread, 141 | spreadRef, 142 | color, 143 | colorRef, 144 | opacity, 145 | opacityRef, 146 | inset, 147 | previewBox, 148 | rule, 149 | webkitRule, 150 | mozRule 151 | ); 152 | 153 | boxShadow.initialize(); 154 | 155 | // Eventos 156 | horizontal.addEventListener("input", (e) => { 157 | const value = e.target.value; 158 | 159 | boxShadow.updateValue("horizontal", value); 160 | }); 161 | 162 | vertical.addEventListener("input", (e) => { 163 | const value = e.target.value; 164 | 165 | boxShadow.updateValue("vertical", value); 166 | }); 167 | 168 | blur.addEventListener("input", (e) => { 169 | const value = e.target.value; 170 | 171 | boxShadow.updateValue("blur", value); 172 | }); 173 | 174 | spread.addEventListener("input", (e) => { 175 | const value = e.target.value; 176 | 177 | boxShadow.updateValue("spread", value); 178 | }); 179 | 180 | color.addEventListener("input", (e) => { 181 | const value = e.target.value; 182 | 183 | boxShadow.updateValue("color", value); 184 | }); 185 | 186 | opacity.addEventListener("input", (e) => { 187 | const value = e.target.value; 188 | 189 | boxShadow.updateValue("opacity", value); 190 | }); 191 | 192 | inset.addEventListener("input", (e) => { 193 | const value = e.target.checked; 194 | 195 | boxShadow.updateValue("inset", value); 196 | }); 197 | 198 | // Copiar regra 199 | const rulesArea = document.querySelector("#rules-area"); 200 | const copyInstructions = document.querySelector("#copy-instructions"); 201 | 202 | rulesArea.addEventListener("click", () => { 203 | const rules = rulesArea.innerText.replace(/^\s*\n/gm, ""); 204 | 205 | navigator.clipboard.writeText(rules).then(() => { 206 | copyInstructions.innerText = "Regra copiada com sucesso!"; 207 | 208 | setTimeout(() => { 209 | copyInstructions.innerText = 210 | "Clique no quadro acima para copiar as regras"; 211 | }, 1000); 212 | }); 213 | }); 214 | --------------------------------------------------------------------------------