I am working on Popup box, I have got a page wherein I click on a button it popups a box. Ths problem is the popup is not in the center of the screen. I have to make the page cross browser compatible.
Here is my code.
CSS:
.popup{
/* css3 drop shadow */
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
/* css3 border radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background:#eee;
/* styling of the dialog box, i have a fixed dimension for this demo */
width:50%;
/* make sure it has the highest z-index */
clear:both;
height:240px;
position:relative;
z-index:5000;
/* hide it by default */
display:none;
}
Centered horizontally and vertically:
.popup{
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #eee;
width: 50%;
height: 240px;
z-index: 5000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25%;
margin-top: -120px;
clear: both;
// display: none;
}
Fiddle: http://jsfiddle.net/AwCWs/
Related
Am building a CSS menu and for some reason the margin of the sub menu shows different in IOS and IE 11.
Bellow is some pictures & css code
Thats how it should look like and how it show in chrome.
This is how IE & IOS safari shows, the margin should be higher from up and should be less to the left.
Here is the code
header .left li .mega-menu {
background-color: #31342a;
position: absolute;
border-radius: 0px 0px 3px 3px;
margin:-50px 0px 0px 0px;
visibility: hidden;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
-o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
opacity: 0;
transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
z-index: -1;
}
header .left li:hover > .mega-menu {
visibility: visible;
opacity: 1;
margin: 15px 0px 0px 0px;
transition-delay:0s;
}
Can you try this.
I think you have missed display:block;
header .left li .mega-menu {
background-color: #31342a;
position: absolute;
border-radius: 0px 0px 3px 3px;
margin:-50px 0px 0px 0px;
visibility: hidden;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
-o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
opacity: 0;
transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
z-index: -1;
display:block;
}
header .left li:hover > .mega-menu {
visibility: visible;
opacity: 1;
margin: 15px 0px 0px 0px;
transition-delay:0s;
}
I am making a bootstrap mega menu in which the navigation was originally meant to be floating left. I have changed it to float right using the pull-right class provided by Bootstrap but now all my dropdowns are still appearing as if the nav was still floating left. How can I adjust the dropdown content to reflect the floating change?
Attached is an image of my problem:
As you can see the dropdown caret arrow pointing at Merchandising is off a little bit, which I can adjust. But the content of the dropdown should be to the right of the nav item, not the left. All bootstrap styles are default, except for the following CSS:
.dropdown-menu {
position: absolute;
top: 100%;
left: -1px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 10px 10px;
margin: 0px 0 0;
list-style: none;
background-color: #fff;
border-top: transparent;
border-left: 1px solid rgba(0, 0, 0, .1);
border-right: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0px 0px rgba(0,0,0,0.2);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
I'm attempting to use a dark shadow color on three sides of a div, and a light "glow" on one side -- essentially using two different colors for the CSS box shadow. So far the best solution I've come up with is to place a shadow on all sides but one, and use a second div with a glow, and a third div to hide the glow on all but one side with margins and overflow-hidden. I was just wondering if there might be a better (CSS-only) method than the one I'm implementing? Any ideas?
Demo here - http://swanflighthaven.com/css-shadow-glow.html
It doesn't look nearly as nice on a light background:
http://swanflighthaven.com/css-shadow-glow2.html
#main {
max-width:870px;
min-width:610px;
margin:0px auto;
position:relative;
top:40px;
min-height:400px;
}
#maininside {
position:relative;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow:hidden;
padding:0px 25px 25px 25px;
}
#maininner {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow:hidden;
box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
-moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
-webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
min-height:385px;
padding:0px 15px 15px 15px;
background:url(center.png) repeat;
}
#glow {
position:absolute;
height:50px;
top:0px;
box-shadow: 0 -10px 20px -5px #7b272c;
-moz-box-shadow: 0 -10px 20px -5px #7b272c;
-webkit-box-shadow: 0 -10px 20px -5px #7b272c;
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-right:25px;
margin-left:25px;
margin-bottom:25px;
}
<div id="main">
<div id="glow">
</div>
<div id="maininside">
<div id="maininner" ></div>
</div>
</div>
You can just write multiple shadows, comma separated:
{
box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80), 0 -10px 20px -5px #7b272c;
}
See https://developer.mozilla.org/En/CSS/Box-shadow
try negative spread values in the box-shadow css
Instead of creating the second div with the fancy margins and the hiding, try to play around with a negative spread value. It reduces the bleeding on the sides that you don't want your shadow to show up on. Play around with the example on my jsfiddle, set the spread to 0, -10, -5... you'll get the hang of it quick.
#glow {
/* x y blur spread color */
box-shadow: /* ie */
0px -10px 15px -6px rgba(255,000,000,0.7), /* top - THE RED SHADOW */
0px 5px 15px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 15px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 15px 0px rgba(000,000,000,0.3); /* left */
-webkit-box-shadow:
0px -10px 15px -7px rgba(000,255,000,0.7), /* top - THE RED SHADOW */
0px 5px 15px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 15px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 15px 0px rgba(000,000,000,0.3); /* left */
-moz-box-shadow:
0px -9px 10px -8px rgba(000,000,255,0.9), /* top - THE RED SHADOW */
0px 5px 10px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 10px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 10px 0px rgba(000,000,000,0.3); /* left */
}
body {
padding: 10%;
background-color: #fefefe;
}
div {
height: 300px;
width: 300px;
margin: 0px auto;
border-radius: 2pt;
border: 1px solid rgba(0,0,0,0.8);
background-color: #fefefe;
}
<div id="glow"></div>
I had to play around with the properties a bit to get them to look similar in the different browsers. Mozilla/FF was the biggest pain. Look at how much the values differ... it's kind of a tedious game of cat and mouse off-setting the blur with spread...
box-shadow is used in IE.
webkit is used in Chrome.
moz is used in Firefox.
http://jsfiddle.net/CoryDanielson/hSCFw/
This page renders great in FF, Chrome, etc.. However in IE 7 and 8, the close "X" which is a background image does not line up. Any ideas? I tried to set the background-position etc..
The code I have:
.startup-container
{
width: 455px;
}
.close-startup-home
{
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
}
.menu-outer
{
background: #545454;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
}
.menu-inner
{
background: #3f3f3f;
-moz-box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
-moz-border-radius:5px;
border-radius:5px;
}
.startup-box
{
width:439px;
line-height:20px;
text-align: center;
color:#fff;
padding-top:5px;
padding-bottom:5px;
}
.startup-box-inner
{
width:389px;
height:99px;
padding:20px;
margin-left:5px;
margin-right:5px;
}
<div class="startup-container">
<div class="close-startup-home"></div>
<div class="menu-outer startup-box">
<div class="menu-inner startup-box-inner"></div>
</div>
</div>
Give a position: absolute to your div containing the close button and position it according to that.
.startup-container {
width: 455px;
position: relative
}
.close-startup-home {
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
position: absolute;
right: 0;
}
Is it possible to set transparency on the box shadow?
This is my code:
box-shadow:10px 10px 10px #000;
-webkit-box-shadow:10px 10px 10px #000;
-moz-box-shadow: 10px 10px 10px #000;
I suppose rgba() would work here. After all, browser support for both box-shadow and rgba() is roughly the same.
/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
div {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: red;
margin: 10px;
}
div.a {
box-shadow: 10px 10px 10px #000;
}
div.b {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>