I've inserted a modal in my HTML page.
I'd like to make the header links not clickable while the modal is showing (screenshot here: http://prntscr.com/4gyn61)
Here's my css:
.modal {
display: none;
width: 600px;
height: 800px;
z-index: 999 !important; \\I use this to display it over the header.
background: #fff;
padding: 15px 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
box-shadow: inset 0 20px 40px -20px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
And the html of the modal:
<div id="ex1" style="display:none;">
<p class="curr"> <?php include 'mypagewithtext.html'; ?></p>
</div>
Anyone got an idea?
EDIT: Only the header.
I made a simple fiddle to show how to do it :
http://jsfiddle.net/o261o9gk/
My technique is to use a div overlay as shadow :
.overlay{
position:fixed;
top:0;
left:0;
background-color:black;
width:100%;
height:100%;
opacity:0.4;
}
Basicaly, the fixed div get the click instead of the content of your page.
Related
I want to add a box shadow to a button with a border radius but the shadow itself should lie below the button and within its width range.
I was able to get the rounded border shadow but when trying to position it within the elements width range the border radius effect was lost and instead I got only the shadow without the border radius.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
}
<button class="but1">
Click me!
</button>
The example of what I got till now is linked below.
Sample output in jsfiddle
Your box-shadow is being cropped because of the negative spread (the last parameter in your box-shadow declaration)
If what you want is a rounded shadow the exact same width of the element, then setting spread to zero and taking 10px out of the vertical offset to compensate will do.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
If what you want instead is a shadow that keeps the rounded borders but is shorter than the element width, you can draw a shorter pseudo-element positioned behind it, and apply the box-shadow to the pseudo-element
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
position:relative;
}
.but1:before{
content:"";
position:absolute; top:10px; bottom:10px; left:10px; right:10px;
border-radius:10px;
z-index:-1;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
Add 0px to the box-shadow
.but1 {
width: 100px;
height: 50px;
border: none;
background-color: yellow;
border-radius: 100px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 9px;
}
<button class="but1">
Click me!
</button>
I used :after to achieve this, just an idea, you can play around with the css as wish.
Code:
.but1{
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
/* -webkit-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
-moz-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
box-shadow: rgba(0,0,0,0.8) 0px 3px 9px;*/
}
.but1:after {
content: "";
position: absolute;
left: 16px;
width: 84%;
bottom: 37px;
z-index: -1;
border-radius:10px;
transform: scale(.9);
box-shadow: -1px 20px 14px 20px rgba(0,0,0,0.8);
}
<button class="but1">
Click me!
</button>
Update Your Css Like this.
.but1 {
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
-moz-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
float:left;
}
I'm trying to figure out how to get this button I've created to be in the exact center of the page (vertically and horizontally). I've gotten it to center on the horizontal plane, but not on the vertical plain. Any help would be appreciated!
input#gobutton{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
cursor:pointer;
padding:5px 25px;
background:#87CEFA;
border:1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:1.1em;
}
Input
Text-align: center;
Padding: 50px 0;
http://www.w3schools.com/css/css_align.asp
I'm not sure if it's what you need, but take a look at this JSFiddle example.
The CSS I used is:
input#gobutton{
position: relative;
display: block;
margin: auto;
top: 40%;
cursor:pointer;
padding:5px 25px;
background:#87CEFA;
border:1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:1.1em;
}
Change position to absolute or fixed.
Right now I can either auto-size the container div to the inner div or I can center the whole thing... but I can't figure out how to do both at the same time.
Below is the CSS/Layout as I have it. Right now both the page and main elements are centered but if the content is beyond a certain size it goes over the borders without either element re-sizing.
LAYOUT
</head>
<body>
#using Monet.Common
<div id="contentContainer">
<div class="page">
#Html.Partial("NavBarPartial")
<section id="main">
<div id="content">
#RenderBody()
</div>
<div id="footer">
<span style="color: Gray;"> </span>
</div>
</section>
</div>
</div>
</body>
</html>
CSS
#contentContainer {
width: 100%;
}
.page
{
width: 50%; /*1030px;/*75em;/*83.7em;*/
margin-left: auto;
margin-right: auto;
}
#content {
padding: 20px;
}
#main
{
width:auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
footer,
#footer
{
/*background-image: url('Images/TEST2body_bot.png');*/
background-color: #fff;
background-repeat: no-repeat;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
EDIT
The problem I'm having is best illustrated w/two examples. In one instance I have a table that is 1030px wide. This table is left-justified perfectly but the right edge of the table flows well beyond the right border of the main element.
Another problem is with a set of radio buttons. When the page loads there is supposed to be nothing but white space to the right of the buttons. A specific menu appears to the right of the radio buttons based on the user's selection. When the page loads it looks like there's just enough space for the menus, however they are loading UNDERNEATH the radio buttons instead of to their right.
SECOND EDIT
This is the CSS that allows me to auto-size the div, however everything is left justified (commented out certain sections and added display: inline-block and overflow: auto to .page).
/*#contentContainer { Had to comment this whole section out
width: 100%;
}*/
.page
{
/*width: 50%; /*1030px;/*75em;/*83.7em; Needed to comment this attribute as well*/
display: inline-block;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
#main
{
height: auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
You need to set the parent element to
display: table-cell;
vertical-align: middle;
text-align: center;
#and some kind of height:
height: 350px;
The #page-div to:
display: inline-block;
Like this:
http://jsfiddle.net/YA2Ns/1/
Don't ask me why, but changing adding display:table and margin: 0 auto to the .page element worked. I actually no longer need the contentContainer div anymore. Here's the final product.
CSS
.page
{
display: inline-block;
overflow: auto;
display: table;
margin: 0 auto;
}
#main
{
height: auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
#content {
padding: 20px;
}
footer,
#footer
{
/*background-image: url('Images/TEST2body_bot.png');*/
/*background-color: #fff; */
background-repeat: no-repeat;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
LAYOUT
<body>
#using Monet.Common
<div class="page">
#Html.Partial("NavBarPartial")
<section id="main">
<div id="content">
#RenderBody()
</div>
</section>
</div>
<div id="footer">
<span style="color: Gray;"></span>
</div>
</body>
I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.
What code would I need to achieve the cool border, and how can I target only images in the body text?
If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:
.main img {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 30px 0;
padding: 10px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
display: block;
}
img{
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:10px;
background:#fff;
border:1px solid #ccc;
width:auto;
height:auto;
}
Well i think it would be something like this for just a generic shadow effct.
The HTML:
<div id="example" class="outerglow">Full Shadow</div>
The CSS:
#example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}
.outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}
and here is the jsfiddle to look see..
http://jsfiddle.net/KMtc6/
Forgive me if my code is sloppy or jumbled.
When I try to apply a box shadow to my element that has a 3px border radius I get ugly corners with pixels of the elements background.
HTML
<div id="wrapper">
</div>
CSS
body {
background: #fff;
}
#wrapper {
background: black;
width: 300px;
height: 300px;
margin: 40px auto;
border-radius: 3px;
-moz-box-shadow: inset 0 0 5px 4px yellow;
-webkit-box-shadow: inset 0 0 5px 4px yellow;
box-shadow: inset 0 0 5px 4px yellow;
}
JSFIDDLE
http://jsfiddle.net/PCzFC/1/
If you look at the fiddle you see that the black background is in the corners. Is it supposed to be like this or is it a bug? I use Firefox.
This is a known bug in Google Chrome, perhaps it's present in Firefox as well.
http://code.google.com/p/chromium/issues/detail?id=29427
You can create the same effect without the inset. Make a yellow wrapper around it.
body {
background: #fff;
}
#wrapper {
background: black;
width: 290px;
height: 290px;
border-radius: 3px;
-moz-box-shadow: 0 0 5px 1px black;
-webkit-box-shadow: 0 0 5px 1px black;
box-shadow: 0 0 5px 1px black;
margin: 5px;
}
.yellow {
background: yellow;
border-radius: 6px;
overflow: hidden;
width: 300px;
height: 300px;
margin: 40px auto;
}
<div class="yellow">
<div id="wrapper">
</div>
</div>
http://jsfiddle.net/PCzFC/65/
What shadow: inset does is to add shadows inside the box. If you remove inset on all the box shadows, the shadows will move to the outside of the box.
it is not a bug this will happen because you use inset shadow effect and if you can understand css then inset meaning is inside so it's normal if u remove inset from your code then it should be look fine or if you need shadow effect inside the box then you have to choose color and matched it to box color
or you can remove border radius from your code then it should be look fine
#wrapper {
background: black;
width: 300px;
height: 300px;
margin: 40px auto;
-moz-box-shadow: inset 0 0 5px 4px yellow;
-webkit-box-shadow: inset 0 0 5px 4px yellow;
box-shadow: inset 0 0 5px 4px yellow;
}