I have 2 divs where the first is on top and the second is below that...
I have added shadow to the first div which is on top and looks well.
box-shadow: 0px 5px 5px #000000;
-moz-box-shadow: 0px 5px 5px #000000;
-webkit-box-shadow: 0px 5px 5px #000000;
But when i add a gradient css on the second div which is below, the first loses its shadow... or i dont know whats going on...
I need to be able to see the shadow of the first without adding margin to the second div below.
Thanks
EDIT:
My mark up is:
<div id="header">
<div class="960width"></div>
</div>
<div id="content">
<div class="960width"></div>
</div>
My css is:
#content{
background: #e5e5e5;
background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
padding-top:15px;
}
#header{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
padding:5px;
box-shadow: 0px 5px 5px #000000;
-moz-box-shadow: 0px 5px 5px #000000;
-webkit-box-shadow: 0px 5px 5px #000000;
}
This is HTML tags :
<div id="top">
<div id="back">
[Content]
</div>
</div>
your CSS was fine, you only need to change your HTML tag, if you do this, your problem is fix ... look at this Fiddle , i think this is what you meant ...
PS: if you gave width to the top DIV, you will see the shadow in right and left ...
PS2 : i changes the "ID"s name ...
Related
I am trying to style a button that is disabled, but the styling doesn't take effect, and go back to the old styling. I have cleared my cache, to no avail. I have a button that gets disabled using JavaScript with document.getElementById("updateAccountButton").disabled = true;. This aforementioned button also has the class of btn-signature-green. Inside my stylesheet, I am trying to set the styling of this button when disabled using:
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
/* styles go here */
}
This is because I have other buttons that may have disabled attributes that I want to account for.
Code snippet:
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = true;
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background-color: #afafaf;
color: white;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
The disabled style is overlapped by the parent style.
Instead of background-color, use background on :disabled style.
And the parent button has got color style with !important so it is needed to set the color with important on :disabled selector style.
And to disable hover effect when disabled, it is needed to set pointer-events: none;.
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = "disabled";
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background: red;
color: blue !important;
pointer-events: none;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
You are using two different properties, you are setting a background on your button but a background-color on the disabled, background takes priority so it looks like it doesn't work as you'd expect.
To fix this you just need to use the same properties between disabled and active buttons.
When I try to image gallery on trial website using CSS grid, images overlay one another to such extent that is a pain to see.
I tried to check classes and how they interact and everything should be ok. When I delete code of CSS grid, everything starts looking normal, although the sizes of the images are different.
Before:
After:
I would like to make them symmetrical, but don't know what to do. Perhaps, there is an error in managing the sizes of images themselves? But when I tried to make them with the same width and height, nothing changes.
Thank you for help in advance and if there are some inconveniences in post, let me know so I wont do the same mistake in the future.
Code:
body {
margin: auto 0px;
}
.zone {
cursor: pointer;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*Navigation cosumize*/
.navigation {
display: flex;
list-style: none;
font-size: 1em;
margin: 0px;
}
#media only screen and (max-width: 600px) {
.navigation {
font-size: 0.5em;
padding: 0;
}
}
.end {
margin-left: auto;
}
li {
padding: 10px;
}
a {
color: white;
text-decoration: none;
}
/*Cover*/
.red {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}
/*Project's grid*/
.for-grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
img {
width: 100%
}
.box {
background-color: #444;
padding: 100px;
margin: 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="zone green">
<ul class="navigation">
<li>
About
</li>
<li>
Products
</li>
<li>
Our team
</li>
<li class="end">
Contact
</li>
</ul>
</nav>
<div class="zone red">Cover</div>
<div class="zone blue for-grid">
<img class="box zone" src="https://i.ibb.co/qWr3CYq/data-storage-2-2.png">
<img class="box zone" src="https://i.ibb.co/fGcNpN7/desktop-analytics-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/mtXHQ8C/files-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/wyCktLv/monitor-coding-2.png">
<img class="box zone" src="https://i.ibb.co/M9Qkn6G/monitor-settings-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/k0VNnBN/server-2-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/HKHcrdH/server-3.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/b7s4NPN/server-safe-2.png" alt="product image">
</div>
<div class="zone yellow">Footer</div>
</body>
</html>
css
.box {
box-sizing: border-box;
}
Here is some information about the box model that will help you understand why this might work
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
I need to do a shadow effect like the above image. I prefer css, so I am trying this code but the (smooth) borders are not identical. Any best approach?
demo
<div class="box"></div>
.box {
height: 1px;
width: 13em;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#191919;
-moz-box-shadow: 0 0 3px 3px #191919;
-webkit-box-shadow: 0 0 3px 3px #191919;
box-shadow: 0 0 3px 3px #191919;
}
http://jsfiddle.net/SG9pd/
div {
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(60%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
width: 300px;
height: 20px;
}
Made with: http://www.colorzilla.com/gradient-editor/
using just css here is the link to your solution
for demo
visit http://jsfiddle.net/a92My/
I've got a link that I want to make look like a button with round corners and a gradient fill. It works fine in Chrome, but not in IE.
I've found that if I set display: inline-block, it shows the gradient, but removes the rounded corners. Does anybody know how to get around this issue in IE?
Demo in JSFiddle
HTML:
Hello World​
CSS:
a {
color: white;
padding: 8px;
background: #7db9e8;
background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
background: -webkit-linear-gradient(top, #7db9e8, #1e5799);
background: -moz-linear-gradient(top, #7db9e8, #1e5799);
background: -ms-linear-gradient(top, #7db9e8, #1e5799);
background: -o-linear-gradient(top, #7db9e8, #1e5799);
background: linear-gradient(top, #7db9e8, #1e5799);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0);
zoom: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
I know this question is quite old, however since it is unaswered and if this can help people, here is my solution to get a linear Gradient working in all mayor Browsers:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #BDBDBD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #BDBDBD 100%);
There is also an onlie tool to create this CSS gradients, chek it here:
http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
You need to use the Microsoft filter:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#7db9e8', endColorstr='#1e5799');
Use that as a fallback for IE--it works in most versions.
See the specifications:
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
Instead of using a filter, you can always fallback with an image:
a {
color: white;
padding: 8px;
background: #7db9e8;
background: transparent url('gradient.png') 0 0 repeat;
background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
background: -webkit-linear-gradient(top, #7db9e8, #1e5799);
background: -moz-linear-gradient(top, #7db9e8, #1e5799);
background: -ms-linear-gradient(top, #7db9e8, #1e5799);
background: -o-linear-gradient(top, #7db9e8, #1e5799);
background: linear-gradient(top, #7db9e8, #1e5799);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
Please see this fiddle:
jsfiddle example
notice the headers are cutting off the border-radius, any ideas why?
Thanks
The gradients of the .pod-headers are overlapping the round corners on the .pods because you didn't round the .pod-headers. They don't inherit the round corners from their parent elements.
To fix it, round the top corners (only) of your .pod-header elements using this CSS:
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
You are giving one class the border radius and the inner class the background but no radius (so it still has a square corner).
Check out the CSS in the updated fiddle
You also need to set the border-radius on the inner div.
For example Use this:
#pod-container .pod .pod-header {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
border-radius: 6px;
border-bottom: 1px solid #CCC;
}