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?
Related
I have an element on which i add two box-shadows and I want the corners of the element AND the box shadows to have the same border-radius. Somehow it's not happening.
The element appears with a different border-radius than the first box-shadow, and the first box-shadow appears with a different border radius than the second box-shadow.
Here's the code:
.stack_item{
overflow: hidden;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
transform: translate(-50%, 9%);
-webkit-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
-moz-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
}
Since you are making your shadow shrink, the border-radius is also shrinking.
Set it on a larger pseudo-element and it will be ok
.stack_item{
width: 200px;
height: 100px;
position: relative;
border: solid 1px black;
border-radius: 10px 10px 10px 10px;
margin-top: 50px;
background-color: white;
}
.stack_item:before,
.stack_item:after {
content: "";
position: absolute;
top: 0px;
bottom: 50px;
border-radius: inherit;
}
.stack_item:before {
left: 7px;
right: 7px;
box-shadow: 0px -8px 0px 0px rgb(206, 204, 204);
z-index: -1;
}
.stack_item:after {
left: 13px;
right: 13px;
box-shadow: 0px -16px 0px 0px rgb(168, 168, 168);
z-index: -2;
}
<div class="stack_item"></div>
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 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>
How can I add an inner shadow to a bootstrap "image-circle"?
jsfiddle
This doesn't work..
.box-shad {
box-shadow: 0 10px 20px #777 inset, 0 0 200px #000 inset, 0 0 150px #000 inset, 0 0 100px #000 inset;
}
<img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"><img class="img-circle box-shad" alt="" src="http://placehold.it/140x140">
Thanks for any ideas.
SOLUTION:
Put the box shadow on a circular div with background image set to the image, rather than using an image.
You can try something like this:
.box-shad {
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
Demo: http://jsfiddle.net/52VtD/1926/
UPDATE
I don't think it's possibile to set an inner shadow because it's an image; you can draw the circle too instead of use an image, so you'll can set the inner shadow.
Code:
.box-shad {
-webkit-box-shadow: inset 0 0 4px #000;
-moz-box-shadow: inset 0 0 4px #000;
box-shadow: inset 0 0 4px #000;
}
.circle {
width: 140px;
height: 140px;
display: inline-block;
border-radius: 50%;
background-color: #aaa;
}
Demo: http://jsfiddle.net/52VtD/1943/
This works to me. Please try it.
.inner-shadow {
box-shadow: inset 3px 3px 4px black;
border-radius: 50%;
}
img {
width: 100%;
border-radius: 50%;
position: relative;
z-index: -10;
}
<div class="inner-shadow">
<img src="http://placehold.it/300x300" alt="">
</div>
Closest I get is this:
http://jsfiddle.net/52VtD/1941/
<div class="border">
<a class="shadow img-circle"><img class="img-circle" src="http://placehold.it/140x140" /></a>
CSS:
.border
{
padding:10px;
width:160px;
}
.shadow
{
display:block;
position:relative;
}
.shadow img
{
display:block;
}
.shadow::before
{
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
}
this article may help http://designbystevie.com/2011/03/applying-css3-inset-box-shadows-to-images/
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 */
}