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>
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.
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?
Hi I have a div at the top of my page
http://www.uk-sf.com/MyTraining.php
the box-shadow is cut on the wrapper, I tried giving it a z-index but no joy any ideas?
.titlebox{
width:977px;
background-color:rgba(48, 48, 48, 1);
padding:10px 5px;
margin: 5px 5px;
font-size: 24px;
border:3px double rgb(138, 138, 138);
-webkit-box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
}
Help appreciated
Your #contentContainer has overflow:auto; : is it on purpose?
If not, add this to your CSS :
#contentContainer {
overflow: visible;
}
or just delete the overflow:auto declaration from your CSS.
(overflow: auto is asking your contentContainer to clip its content.)
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 */
}
the picture below has 2 divs, 1 is the part where the login form and the other is where the buttons on facebook and twitter, then I want is to put a border but with a specific length, which would where is the red box.
The width of first div is: 850px and the second is: 30% over the first!
I hope I have explained!
HTML
<div id="top">
<!--Productos de limpieza Master Clean <img src="media/user_icon.png"/><span>Inicia sesión ó <a href="registro.php" id="registro">registrate!</b></span>-->
<div id="loginform">
<form id="loginuser" name="loginuser" action="php/processFunctions.php" method="post">
<input id="userLog" class="required" name="userLog" type="text" placeholder="Usuario"/>
<input id="passLog" class="required" name="passLog" type="password" placeholder="Contraseña"/>
Iniciar ó
Registrarse
<span id="errorlogin"></span>
</form>
</div>
<span id="currentUser"></span>
<!--<h4>Búscanos en:</h4>-->
</div>
<div id="topsocial">
<ul id="socialmedia">
<li><img src="media/twitter.png" alt="Siguenos" title="Siguenos en Twitter"/></li>
<li><img src="media/facebook.png" alt="Like" title="Like en Facebook"/></li>
</ul>
</div>
CSS
#top {
height:50px;
background:white;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left: 4px;
-webkit-border-top-right: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
border: 5px solid black;
border-bottom:none;
}
#topsocial{
width:30%;
padding: 5px;
border-bottom-left-radius: 50% 75%;
border-bottom-right-radius: 50% 75%;
background:white;
overflow:hidden;
float:right;
position: relative;
-webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
border: 5px solid black;
border-top: none;
}
I've have another question, how quit or delete box-shadow from top to second div #topsocial?
You can set the first <div> to the size of the box with the border and the second <div> can be placed in absolute position and cover the border.
I've made a jsFiddle to show you how to do it. We don't have your HTML so I hoped it helps anyway.
Supplying the markup and CSS would help get a more useful answer, but the first suggestion would be to make a new <div> which will contain the login form and the rounded border inside the 850px wrapping <div>. Then set a width on the inside <div> that is to the left of the facebook and twitter block, but overlap the border slightly. Then extend the 30% <div> to the top.
UPDATE: http://jsfiddle.net/zFa9n/
I have put a little change only on your CSS code that works fine for any screen width, and give you the result you need, I hope you like it.
#top {
height:50px;
background:white;
border: 5px solid black;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left: 4px;
-webkit-border-top-right: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
}
#topsocial{
position: relative;
top:-5px;
width:30%;
float:right;
padding: 5px;
border: 5px solid black;
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
background:white;
overflow:hidden;
-webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
}