I have different <div>s with box-shadow. In Chrome desktop, the shadows look fine. However, in mobile, things get strange. I've read different posts with this issue and it was recommended I added a -webkit-appearance: none; but it doesn't do anything. Here's my codepen.
This is what I get in desktop (correct)
And this is what it looks like in mobile Chrome in an iPhone:
Here's my code (I'm using Bootstrap 4):
.white-card-bg {
background-color: #fff;
-webkit-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-moz-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-ms-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-o-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
border-radius: 24px;
box-sizing: border-box;
border: 2px solid transparent;
box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
}
<div class="col-3 nl-servicio-destacado-card btn" type="button" role="button">
<div class="card-body white-card-bg text-center"> Content here </div>
</div>
I figured out what was wrong. Turns out it had nothing to do with the box-shadowit was the type="button" in my html that was causing the iPhone to add that strange shadow to the div. By removing that I solved this issue.
Related
How do you surround a div with a border?
this is what I am trying to accomplish
and was done with images.
I have the sides (or top and bottom) , I can not surround the div with the gray- silver border.
[JsFiddle code:
<div class="panel-body">
<ul>
<li>Locomotives</li>
<li>Radios</li>
<li>Televisions</li>
<li>Computers</li>
<li>Monitors</li>
<li>Satellites</li>
<li>Spaceships</li>
<li>Submarines</li>
<li>Scuba Divers</li>
</ul>
</div>
]Jsfiddle2
Use box-shadow instead:
http://jsfiddle.net/3knyndxz/1/
.panel-body {
float: left;
padding: 30px;
background: #fff;
border-radius: 10px;
box-shadow: inset 0 0 20px #ccc;
}
This can be done with multiple layers of box-shadows, its tricky if you need to build some kind metal texture.
.container {
border: 1px solid #999;
height: 200px;
width: 90%;
display: flex;
justify-content: center;
padding: 20px;
}
.children {
width: 30%;
border: 1px solid #555;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.metalone {
box-shadow: inset 0px -2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 0px 1px 1px rgba(56, 8, 8, 0.91), inset 0px 0px 0px 2px rgba(192, 121, 121, 0.8), inset 0px 0px 0px 3px rgba(152, 47, 47, 0.85), inset 0px 0px 0px 4px rgba(152, 47, 47, 0.85), inset 0px 0px 1px 5px rgba(56, 8, 8, 0.945);
}
.metaltwo {
box-shadow: inset 0px 3px 0px 0px rgba(29, 29, 29, 0.62), inset 0px 0px 1px 2px rgba(46, 46, 46, 0.91), inset 0px 0px 0px 3px rgba(255, 255, 255, 0.8), inset 0px 0px 0px 4px rgba(112, 112, 112, 0.85), inset 0px 0px 0px 5px rgba(219, 219, 219, 0.85), inset 0px 0px 1px 6px rgb(250, 250, 250);
background: black;
color: white;
}
<div class="container">
<div class="metalone children">Metal Texture one</div>
<div class="metaltwo children">Metal Texture two</div>
</div>
box-shadow.
I've got a weird situation. I'm using AngularJS to dynamically set the position of a range slider based on the current position in the video. If I style just the thumb (by enabling the bottom two calls below) the thumb moves along the slider in real time as expected. If I style the input[type="range"] as in the first section below, the thumb doesn't move dynamically unless you mouse over it.
I have tried other CSS styles of range inputs that I pulled from various websites, and I experience the same outcome each time. This seems to affect only Chrome. The weirdest thing is that IE works just fine (who would have thought?!) with the styled slider and the thumb moves along nicely.
input[type="range"] //::-moz-range-track //::-ms-track
{
outline:none;
background: rgb(127, 183, 219);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-wekkit-border-radius: 8px;
}
input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
outline:none;
-webkit-appearance:none !important;
width:20px;
height:20px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border:1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
outline:none;
-webkit-appearance:none !important;
width:22px;
height:22px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border: 1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
I have the following Box Shadow css style. Unfortunately it is covering a very small portion on the top of the mainContent DIV. The rest of the DIV length is without any shadow. What am I doing wrong?
.mainContent {width: 85%; margin: auto; max-width:1400px;
-webkit-box-shadow: 0px 9px 26px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 9px 26px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 9px 26px 5px rgba(50, 50, 50, 0.75);}
You should set the height property to auto.
jsfiddle
.mainContent {width: 85%; margin: auto; max-width:1400px;
-webkit-box-shadow: 0px 9px 26px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 9px 26px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 9px 26px 5px rgba(50, 50, 50, 0.75);
height:auto
}
<div class='mainContent'>
<div style='height:50px; width:50px; border:1px solid'></div>
</div>
Fiddle link I want two div with 100% height.
1 div with background image and one color.
both should equally in height in any resolution.
please help me.
.loginImage { width: 100%; }
.loginBox {
background-color: #ffffff;
background: rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
-moz-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
height: 100%;
position: absolute;
}
<div class="wrapper-login">
<div class="col-xs-6"><img src="images/loginImage.jpg" alt="Cargo CRM" class="loginImage"></div>
<div class="col-xs-3 loginBox"></div>
</div>
Fiddle
.col-xs-6 {
width: 47.66666667%;
display:table-cell;
text-align:left;
}
.col-xs-3 {
width: 25%;
display:table-cell;
text-align:left;
}
.loginImage {
width: 100%;
}
.loginBox {
background-color: #ffffff;
background: rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
-moz-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
}
.wrapper-login {
margin: 0 auto;
width: 100%;
display:table;
}
Is it what you are looking for?
I have the following HTML:
<div class="caller shadow-circle-lg"><img src="public/img/example-photo.png"></div>
And CSS:
.shadow-circle-lg {
border-radius: 50%;
-webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
-moz-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
border: 8px solid white;
}
div.caller {
z-index: 200;
}
.caller > img {
z-index: 100;
}
Why is the IMG element still rendering over the div border, even though it has a lower z-index (yes, I have checked the DOM in Chrome).
Also, is there any way I can force the div border radius to crop the image?
Please note, I don't want to apply any classes to the IMG itself.
Thanks
You can force the border radius to crop by setting overflow: hidden; on your parent element (in .shadow-circle-lg)
It is important to note that z-index property ONLY works on positioned elements (like position: absolute or position: relative. Try adding this property to the <div> and <img> element(s).
Final CSS markup:
.shadow-circle-lg {
border-radius: 50%;
-webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
-moz-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
border: 8px solid white;
overflow: hidden; /* "crop" by hiding overflow content */
}
div.caller {
z-index: 200;
position: relative; /* position so z-index is recognized */
}
.caller > img {
z-index: 100;
position: relative; /* position so z-index is recognized */
}