I am having a problem with absolute positioning in IE 11. All other browsers don't have this issue (tested in Firefox, Chrome, Opera, Safari). I am having relatively positioned element #obrazek (marked as green) which contains relatively positioned element #hrob (marked as red). In all other browsers #hrob is properely positioned to its parent, but in IE 11 it behaves like it's absolutely positioned to the entire body. I can't find the right solution. Any ideas? Thank you.
HTML (simplified / unnecessary content removed):
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My title...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container1">
<div id="container2">
<div id="obrazek">
<img src="obrazky/hrob.svg" alt="Obrázek hrobu" class="obrazek" />
<div id="hrob">
<p class="napis pismo42">Username</p>
<p class="napis pismo24">Text under the name</p>
</div>
<p>text...</p>
</div>
</div>
</div>
</body>
</html>
CSS style.css:
/* CSS Document */
body {
background-image: url('obrazky/pozadi.svg');
background-size: 100% auto;
background-color: #000;
background-repeat: no-repeat;
}
#container1 {
margin: 0px auto;
width: 1020px;
}
#container2 {
background-color: rgba(255, 255, 255, 0.9);
width: 890px;
height: 340px;
border: 15px solid #000;
border-radius: 30px;
padding: 30px;
margin: 20px;
-webkit-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
-moz-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
display: table;
}
#obrazek {
float: left;
position: relative;
width: 340px;
display: table-row;
border: 3px solid green;
}
.obrazek {
width: 340px;
height: 427px;
}
#hrob {
position: absolute;
width: 220px;
height: 300px;
left: 75px;
top: 70px;
text-align: center;
border: 3px solid red;
}
.napis {
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
color: #4a4a4a;
}
.pismo42 {
font-size: 42px;
}
.pismo24 {
font-size: 24px;
}
Just changed table-row to table-cell. Now it looks the same in IE and Chrome:
/* CSS Document */
body {
background-image: url('obrazky/pozadi.svg');
background-size: 100% auto;
background-color: #000;
background-repeat: no-repeat;
}
#container1 {
margin: 0px auto;
width: 1020px;
}
#container2 {
background-color: rgba(255, 255, 255, 0.9);
width: 890px;
height: 340px;
border: 15px solid #000;
border-radius: 30px;
padding: 30px;
margin: 20px;
-webkit-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
-moz-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
display: table;
}
#obrazek {
float: left;
position: relative;
width: 340px;
display: table-cell;
border: 3px solid green;
}
.obrazek {
width: 340px;
height: 427px;
}
#hrob {
position: absolute;
width: 220px;
height: 300px;
left: 75px;
top: 70px;
text-align: center;
border: 3px solid red;
}
.napis {
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
color: #4a4a4a;
}
.pismo42 {
font-size: 42px;
}
.pismo24 {
font-size: 24px;
}
<div id="container1">
<div id="container2">
<div id="obrazek">
<img src="obrazky/hrob.svg" alt="Obrázek hrobu" class="obrazek" />
<div id="hrob">
<p class="napis pismo42">Username</p>
<p class="napis pismo24">Text under the name</p>
</div>
<p>text...</p>
</div>
</div>
</div>
Related
I am trying to change the inner toggle color, green then checked else dark grey. I do not want to change the color of the indicator itself. How can I do that?
So far I tried to add the toggle:checked color but it seems its the wrong position as nothing changed.
.toggle-view {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="toggle-view" id="toggle-darkmode">
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="indicator"></div>
</div>
</label>
Add a div inside the label (toggle-container element in my case) and position the div to fit the width and height of the label by using position: absolute;. Add CSS for the adjecent element of the input. For checked input give the background: green, and for normal input background: gray
.toggle-view {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-container {
position: absolute;
width: 100%;
height: 100%;
}
.toggle-state + .toggle-container {
background: grey;
}
.toggle-state:checked + .toggle-container {
background: green;
}
<label class="toggle-view" id="toggle-darkmode">
<div class="toggle">
<input class="toggle-state" type="checkbox" checked />
<!-- Custom container -->
<div class="toggle-container"></div>
<div class="indicator"></div>
</div>
</label>
I am attempting to create a stack of cards in a list, so that the cards can be swapped position-wise and organized.
However, while the ordering is not working either, right now I'm facing the problem of text from the card below showing up above the top-most card:
This is the code I have so far, for both the HTML and the CSS:
.catCards {
justify-content: space-between;
margin: 5px;
text-align: center;
z-index: 1;
margin-top: 256px;
}
.cwColumnCard {
margin-top: -190px;
}
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
}
.cwCTitle {
padding: 3px;
border-bottom: 1px solid #FFF;
text-align: center;
font-size: 18px;
z-index: 1;
}
.cwImage {
margin: 0 auto;
width: 130px;
height: 130px;
border: 1px solid #ccc;
margin-top: 5px;
z-index: 1;
}
.cwValue {
width: 100%;
text-align: center;
padding: 4px;
padding-bottom: 5px;
padding-top: 5px;
z-index: 1;
}
.cwSystemLabel {
width: 100%;
text-align: center;
padding-bottom: 4px;
padding-top: 4px;
z-index: 1;
}
<div class="catCards">
<ul>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card One</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card Two</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
</ul>
</div>
Z-Index was a brief attempt to fix the text positioning, but had no effect on it. What is causing the text to show up in this manner? The card below should be hidden once it's covered.
For the z-index property to work correctly you need to set the position property to something other than static.
In this case adding position: relative; to .cwCard will solve your issue.
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
position: relative;
}
It's been a couple hours already that I am struggling with my CSS.
I'm trying to add a box-shadow on an element of my website that is composed of 3 divs : #top #content and #bot.
Here is a picture to help you visualize what I deal with :
Having the box-shadow on the left and right of the div #content was kind of the easy part, but I'm really struggling for the top and bottom part. I can't make anything that looks decently clean.
Here is my code :
body {
margin-top: 30px;
}
div#content {
padding: 20px 30px 20px 30px;
color: #515348;
font-size: 76%;
line-height: 1.6em;
height: 100px;
background: #FFF;
width: 240px;
margin-right: auto;
margin-left: auto;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#top {
background: #FFF;
height: 10px;
width: 300px;
margin: 0 auto;
position: relative;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
behavior: url(/PIE.htc);
border-top: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 0 9px 0px 0px white, -8px 0 14px -4px rgba(33, 33, 33, 0.5), 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#bot {
background: #FFF;
height: 10px;
width: 300px;
margin: 0 auto;
position: relative;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
behavior: url(/PIE.htc);
border-bottom: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 8px 4px 14px 4px rgba(33, 33, 33, 0.5), 0 9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Any idea about making this thing a bit "cleaner" ?
Quick Edit: The box-shadow on the bot part actually didn't look that bad on my screen, i had found some better settings that I since lost by trying different configurations.
Shadow all around the shape:
The image provided in question (when seen along with the snippet) is a bit confusing on whether you are looking for a shadow on only the sides (or) for the entire shape as a whole.
If you are looking to add a shadow to the entire shape then one option is to add one pseudo-element to the container element such that it is equal to the height of the container + the top + the bottom element. This pseudo-element should also be given border-radius and be positioned above the container by the same no. of pixels as the height of the top element (inversed). Adding the required box-shadow to this pseudo-element will produce the expected output.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: 0px;
top: -10px; /* positioning above makes shadow extend above */
height: calc(100% + 20px); /* to offset for top and bottom */
width: 100%;
border-radius: 8px;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 6px 6px 0px rgba(33, 33, 33, 0.25), 0px -6px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Shadow all around shape but fades towards top and bottom:
In this approach the shadow is applied all around the shape but it gradually fades towards the top and bottom. These are all the possible variants based on description, image in question and snippet. You can choose the one which suits you best.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: 0px;
top: -8px; /* positioning above makes shadow extend above */
height: calc(100% + 16px); /* to offset for top and bottom */
width: 100%;
border-radius: 8px;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Shadow only on sides:
Looking closely at the original image provided in the question, one thing that I can see is that you don't actually need a box-shadow on the top and bottom elements. You just need shadow on the container which extends a little above and below it. This can be achieved in a very hacky way by using just the container element alone but that's just way too complex and ugly.
So, the alternate option is to add one pseudo-element to the container element and position it a little bit above the container. Once box-shadow is added to this pseudo-element, the expected appearance will be achieved.
Note: In the below snippet, I've added a red colored shadow and also colored the top and bottom div just to illustrate how the shadow extend above and below the #content. I've also removed extra properties which are no longer required and shortened a few others.
I would also strongly recommend converting the three div into one as it would make the entire thing a lot more simpler.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: -1px;
top: -7px; /* positioning above makes shadow extend above */
height: calc(100% + 14px); /* to cover top and bottom */
width: 100%;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 12px -6px rgba(255, 0, 0, 0.75), -6px 0px 12px -6px rgba(255, 0, 0, 0.75);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Whats the point of having three divs instead of one?
box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 300px;
height: 120px;
background: #FFF;
border: 1px solid grey:
}
and then apply box shadow on selector as you wanted
I have a div with the style as so:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
color: #fff;
text-align: center;
}
And also a background color.
I want to add a shadow to this circle.
Is that possible?
I'm seeing conflicting information, with people saying that's inside the image, so you can't apply any styles to it, and other people suggesting that a style like that exists or there is a way to do it.
You can use the box-shadow property:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
text-align: center;
box-shadow:0 0 2px 2px #999;
}
<div class="oval">text</div>
I think you are looking for box shadow:
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
This link explains it: http://www.w3schools.com/cssref/css3_pr_box-shadow.aspAnd this link lets you experiment with it: http://www.cssmatic.com/box-shadow
Use box-shadow property:
.oval {
width: 150px;
height: 150px;
border-radius: 150px;
font-weight: bold;
font-size: 1em;
color: #fff;
text-align: center;
display: block;
background-color: red;
box-shadow: 3px 3px 3px #aaa;
}
<div class="oval"></div>
Box Shadow!
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
.circle {
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 50%;
box-shadow: 5px 5px 5px #BC7046;
position: absolute;
top: 10px;
left: 10px;
}
.circle2{
box-shadow: -6px -6px 6px #BCAE46;
}
#square {
border-radius: 5px;
width: 170px;
height: 170px;
background-color: #D0DA72;
position: relative;
}
<div id=square>
<div class=circle></div>
<div class='circle circle2'></div>
</div>
I have a circle which have both inside and outside box-shadow, but there is 1px unwanted border. Would anyone please help me to understand why this is happening with only circle and share the solution.
.wrapper {
padding: 30px;
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: inset 0 0 0 16px #f9f9f9, 0 0 0 16px #f1f1f1;
background: #32a500;
}
<div class="wrapper">
<div class="circle"></div>
</div>
I think box-shadow: inset is messing up with border-radius.
While waiting for other solutions, you can always avoid using inset and apply instead a border, removing manually the 32px (16px + 16px) from the height and width of your div.
.wrapper {
padding: 30px;
}
.circle {
border-radius: 50%;
background: #32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width: 88px;
height: 88px;
}
<div class="wrapper">
<div class="circle"></div>
</div>
updated code with help of #Andrea Ligios
.wrapper {
padding: 30px;
}
.circle {
border-radius: 50%;
background: #32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width: 120px;
height: 120px;
box-sizing: border-box;
}
<div class="wrapper">
<div class="circle"></div>
</div>