I need to manipulate the boxShadow dynamically however I get different values depending on the browser.
How do I fix it?
Example:
var shadow = document.getElementById("demo").style.boxShadow;
In google chrome: box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 150px 0px inset;
In mozilla: box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 150px 0px inset;
But at the edge I get rgb and inset on different position: box-shadow: inset 0px 0px 150px 0px rgba(0,0,0,0.5)
I have not tried it on safari
Is there any way to solve this? I need the code boxShadow in all browsers to be the same.
Related
I have developed a dark mode for my forum, but the moment I set the dark mode, and change the tab or refresh the page first the normal mode (or light mode) appears and in a few milliseconds it finally loads the g1 into the body class attribute, is there any way to eliminate the delay?
document.addEventListener('DOMContentLoaded', (event) => {
((localStorage.getItem('mode') || 'g1') === 'g1') ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1')
})
:root {/* Base principal */
--base1: #FFF;
--base2: #FAFAFA;
--base3: #F9F9F9;
--base4: #F7F7F7;
--base5: #F5F5F5;
--base6: #F0F0F0;
--base7: #EDEDED;
--borde1: #D3D3D3;
--borde2: rgba(0, 0, 0, 0.3);
--opacity1: rgba(249, 249, 249, 0.8);
--opacity2: rgba(0, 0, 0, 0.2);
--opacity3: rgba(255, 189, 149, 0.5);
--bg: url(https://i.imgur.com/E6Gmd5W.png);
--buscar: url(https://i.imgur.com/e1LpRR1.png);
--font1: #8C8C8C;
--font2: #FFF;
--sombra1: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
--sombra2: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px -1px 0 rgba(0, 0, 0, 0.2), -1px 1px 0 rgba(0, 0, 0, 0.2), -1px -1px 0 rgba(0, 0, 0, 0.2);
--colorp: #EC7209;
--colorp1: 255, 118, 0;}
.g1 {--base1: #111; --base2: #1C1C1C; --base3: #141414; --base4: #141414; --base5: #1C1C1C; --base6: #161616; --base7: #202020; --borde1: #000; --bg: url(https://i.imgur.com/1ehFdwl.png); --buscar: url(https://i.imgur.com/xqY0yy2.png); --sombra1: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; --colorp: #9E500C; --colorp1: 255, 118, 0; --opacity1: rgba(30, 30, 30, 0.6); --font2: #ECECEC}
.container {margin: 140px auto 0; width: 1000px; border: 20px solid var(--base4); outline: 1px solid var(--borde1); padding: 0; background: var(--base4)}
<div class="container"></div>
<a style="cursor: pointer" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'g1') === 'g1' ? 'bright' : 'g1'); localStorage.getItem('mode') === 'g1' ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1')">light/dark theme</a>
I had the same issue.
Just store the theme in a cookie and on the serverside you can check the cookie with $_COOKIE['...']
I'm using Select2 to style my <select> boxes, but I can't seem to style the forced outline which Chrome applies to the style:
Problem:
I've tried several lines of (very unprofessionally, !important) CSS code, but so far I haven't come up with the solution, this is what i'm at right now:
CSS:
.select2 > *:focus, .select2:focus .select2 > *, .select2 {
outline-width: 0px !important;
}
For the sake of excluding potential problems, i'm definitely including this CSS file, after my regular select2.css
Also, a fiddle would be problematic, but I could provide one if really necessary
This seems to do the trick:
<style>
.select2-container *:focus {
outline: none;
}
</style>
Here is a plunk.
This works for me:
&.select2-container--focus {
outline: none;
}
That's because neither select2 or chrome use the outline property. Here is the actual definition of select:focus pseudo element in select2 (+bootstrap):
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Try changing border and box-shadow instead :
.form-control:focus {
border-color: unset;
-webkit-box-shadow: none;
box-shadow: none;
}
Hope this helps, cheers.
It using box shadow, not outline, look at the inspector:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
so you need to reset it
I am making a zoomable div, when a user hovers over one of the divs then that specific div zooms, this currently works...
My issue is mainly with Safari when using CSS zoom, all of the contents within the div jump, at first it scales nicely and then the contents jump down to their original size, this issue does not occur in either Firefox and Chrome.
Here is my css of the main zoomable div :
MAIN DIV
width:740px;
height:150px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
margin: 0 auto;
left:0;
right:0;
position: relative;
margin-bottom:10px;
transition:100ms;
font-family: Rubik;
MAIN DIV HOVER
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
zoom:102%;
-ms-zoom: 1.02;
-webkit-zoom: 1.02;
-moz-transform: scale(1.02,1.02);
transition: 250ms;
I have made a JS fiddle to show the issue, the contents are messed up and this would normally be PHP generated, you can see the issue though when you hover over the wrapper using safari, with firefox the hover zoom effect is perfect and with chrome the content zooms however there is no transition. Thanks for any help
https://jsfiddle.net/04t5psbu/
Please understand, this is not an issue with making the div zoom... that works, my problem is with the content within the div, as you hover over the div all content within the div zooms together, this works perfectly in firefox, please check the fiddle using safari
Use transform instead of zoom. Remove extraneous curly braces { / } from HTML.
#coupon:hover {
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
-webkit-transform: scale(1.02,1.02);
-moz-transform: scale(1.02,1.02);
transition: 250ms;
}
You have simply forgot to add -webkit-transform: scale(1.02,1.02);, which is the web browser engine to use for Safari.
Here is the working fiddle.
I'm writing up some documentation for the keyboard shortcuts for some software. The documentation is in html/css/js. I'd like to have images (skeuomorphic?) of a control and c key instead of just having [ctrl] + [c]. I have seen this done on the web, but I am not finding any solutions with my web searches.
How can I render the Control and C keys as images using HTML/CSS/JS? I am happy to use a third party party library to achieve the effect.
The following CSS will style text wrapped in <kbd></kbd> tags exactly the same as the buttons you see here at StackOverflow.
CSS
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap
}
HTML
<kbd>⌘</kbd>+<kbd>X</kbd><br><br>
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>
Output
⌘+X
Ctrl+Alt+Delete
There are pure CSS options for creating realistic, professional-quality key cap graphics. Google "keyboard key css", for a larger list, but my favorite is KEYS.css: it's super simple to use:
<link rel="stylesheet" href="keys.css" type="text/css" />
...
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>
renders as:
The code below changes the width of the "inner" class from 0% to 100%, so the bar is filled progressively with the green color. But this is incomplete because once the width is 100% I need it to go back to 0% and then to 100% and so on .. it will only stop going from 0% to 100% and from 100% to 0% when clicked.
I'll figure out how to add the clicking even but please help me achieve the non stop changing width.
Thanks a ton!
<style>
.bar {
background-color: #191919;
border-radius: 16px;
padding: 4px;
position: relative;
overflow: hidden;
width: 300px;
height: 24px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
-moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}
.bar .inner {
background: #999;
display: block;
position: absolute;
overflow: hidden;
max-width: 97.5% !important;
height: 24px;
text-indent: -9999px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
-webkit-transition: width 0.3s linear;
-moz-transition: width 0.3s linear;
transition: width 0.3s linear;
}
.green .inner {
background: #7EBD01;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));
background: -moz-linear-gradient(top, #7EBD01, #568201);
}
</style>
<script type="text/javascript">
for (i=0;i<=100;i++){
setTimeout(function(){
document.querySelector('.green.bar .inner').style.width = i+'%';
},0);
}
</script>
<div class="green bar">
<div class="inner" style="width:0%"></div>
</div>
Fiddle: http://jsfiddle.net/ZeYJy/
I have included two ways to implement my suggestion: The first bar immediately goes back to 0 after reaching 100, the second bar has a small delay.
Use the modulo operator % to reset the counter to zero at 100. See below:
<script>
window.onload = function(){
var counter = 0;
window.setInterval(function(){
document.querySelector('.green.bar .inner').style.width =
(++counter % 101) + '%';
}, 50);
}
</script>
This script adds an interval on load, which increase the width of the element. After the counter has reached 100, the width will be reset to zero.
Explanation of the code:
var counter = 0 (inside a function, window.onload) - A local variable is defined and initialised at zero.
window.setInterval(function(){ ... }, 50) - An interval is defined, activating the function (first argument) every 50 milliseconds (20x a second, adjust to your own wishes)
(++counter % 101) - Increments the counter by one, modulo 101:
The modulo operator calculates the remainder after division, ie: 0 % 101 = 0, 100 % 101 = 100 and 200 % 101 = 99, 201 % 101 = 100, 202 % 101 = 100
Instead of setTimeout, use setInterval.
Each time the interval is fired, use a function to work out how much to fill the bar. Once it hits 100, reset it.
You can then clear the interval using clearInterval once the user has clicked.
This article shows how to repeat a CSS animation infinitely. This will be easier on your CPU than using Javascript:
http://developer.apple.com/library/safari/#codinghowtos/Mobile/GraphicsMediaAndVisualEffects/_index.html