I planed to add an image below a div. It would be below a navigation bar (div), adding some nice shadow effect (img). Looks like this:
<div>...</div>
<img>
So far it is just in the html code, but I want to keep the html code since it's a theme that gets updated frequently. So I want to alter only the CSS.
Is there a way to do that without altering HTML code, just using CSS?
Two suggestions:
Add the shadow image as a 1px x Xpx repeating background image to the bottom of your nav DIV. So it would sit within the nav DIV. Simply add some padding to the bottom of the NAV DIV to accomodate it e.g.
nav {
padding-bottom:6px;
background:url(images/nav-bg.png) repeat-x 0 bottom;
}
(The above code would presume you have a background image which is 6px in height and probably 1px wide (but that's up to you) and the path would obviously have to be adjusted to be where your actual image was located.
Instead of adding an IMAGE under the NAV DIV add another DIV and once again add a 1px x Xpx shadow image to that DIV through the CSS.
you cant change the source of an image element through css...
you could create the shadow using CSS tho:
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
or you could change the image through javascript or from the codehind
javascript: $(element).src = "path to new image";
Related
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
In a fundraising page I'm working on at https://cjshayward.com/these-are-a-few-of-my-favorite-things/, in the body of the post there is one portrait without any border, but once you get to the shuffled list of "favorite things," all of the product images have an eight-pixel-wide border that remains present after setting DIV, A, and IMG tags to have inline style of border: 0 !important; margin: 0 !important; padding: 0 !important.
I've also spent some time inspecting the page, and can't find anything that would be assigning borders to the images or immediate containers. (N.B. I think it's more likely a border than a background with padding: some images are partially transparent PNG's, and those let you see the background image through transparent parts of the PNG's.)
The page is part of a Wordpress site under a modification of the twentyseventeen theme.
What am I missing?
It is the box-shadow property
.entry-content a img, .widget a img {
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}
remove this from the css
it was just masquerading as a border :-)
I have a simple frame.
Code I use for borders:
box-shadow: 0px 0px 0px 5px #E1E1E1;
Every other element looks okay, but this one kinda acts weird. Only top border.
.frame {
height: 585px;
}
.frame:hover {
box-shadow: 0px 0px 0px 5px #E1E1E1;
}
<div class="frame" background-image:url(...png)>
...
</div>
First : background-image:url(...png) is not correct, you need to wrap it into a style attr if you want inline styling, so style="background-image:url(...png)" is correct. (also image path should be a valid one)
Second : The border is 5px tick and appears only on hover, by default it will add height/width to the element, if you want to keep the size of the image on hover you should think of using a box-shadow: inset 0p 0p 0p 5px #E1E1E1; Also if you are wondering why it looks like a border instead of a shadow, see this: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp . You are setting a blur of 0px s0 that's why.
Hope it helps!
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
As I'm developing my webpage, I found an issue using the box-shadow feature.
I want to add a box-shadow to the whole wrapper of my webpage, which contains the header, nav, content and footer.
The nav and content are side by side element.
The problem is, that when I add the box-shadow to the #wrapper, it only appears on the header, as I reproduced here
I was able to fix it by using the side by side elements with the display: table-cell propriety, but it ruined the rest of the page, so I'm asking how could I fix this.
Add overflow:hidden to your wrapper as shown here. It will force your container to wrap the floated elements.
[edit] Without having to add extra markup...
Use CSS clear:both; because you are floating elements to the left, check this out : my fiddle
instead of a wrapper you could simply make another separate with the same size and position and give it a box shadow. change the height to whatever you want, just figure out the height of the content you want to be shadowed.
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->