Is there a way to fake a foreground-image analagous to a background-image in CSS? Instead of existing behind other elements in a div, it would obscure everything inside the element.
Use a pseudo-element (::before won't work in IE≤7):
.obscured{
position: relative;
}
.obscured::before{
position: absolute; /* maximize the pseudo-element */
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color:rgba(0,0,0,0.3); /* use background-image here */
content: " "; /* it needs actual content, an empty space is enough */
}
See also:
JSFiddle Demo
W3C: CSS2.1: 12.1 The :before and :after pseudo-elements
On way is to use absolute positionning, to cover all the tags. I presume you want to trigger this with an event. So when the event is triggered, you can float all the elements except the foreground
You can overlay a same-size child element with absolute positioning and add a bg image to it.
jsfiddle example with bg color instead of an image. Tested in FF, Chrome, IE9.
You can use one line of css > backdrop-filter: blur(1rem);:
<div class="some-background">
<div style="backdrop-filter: blur(1rem);"></div>
</div>
Related
I have been trying to add an image next to my navigation menu using CSS pseudo selectors ::before or ::after.
.menu_container::before{
content: "";
background: transparent url('ISO.png') no-repeat;
position:relative;
float:right;
width: 50px;
height:100px;
}
When i use above code, the image is positioned on a line before the actual menu. When I use the ::after selector it goes to the next line.
I have tried almost all the solutions given in this forum for similar issues. But nothing worked. Really appreciate your support.
Thanks heaps.
Try this.....
.menu_container{
position: relative;
}
.menu_container::before{
position: absolute;
}
/* now u can change where ever you want your before , after div */
You would need to place the :before pseudo element in a way that it will always be positioned according to where the 'actual' element is.
So, to achieve this, you will need to first ensure your 'main' element is positioned relatively:
.menu_container{
position:relative;
display:inline-block; /*more than likely needed for elements*/
}
That's realistically the only required CSS you need on the parent for this to work.
For your pseudo element, you shouldn't look to use a float as that will take the pseudo out of the flow of the dom - we don't want that. We can to position it according to the next relatively positioned parent (which we have just made as the main element).
.menu_container:before{
content: "";
background: transparent url('ISO.png') no-repeat;
position:absolute;
top: 0;
left:0;
height:100%;
width:50px;
}
I would also suggest removing the double :: and replacing with a single : for better browser support (old IE doesn't like the double colon syntax).
So the Position:absolute will allow you to use the top:, left:, bottom: and/or right: properties to position it according to this relative parent.
I've created an 'underline' animation that uses an ::after pseudo-element underneath the link. Here is the code for the link and the pseudo-element:
Link
a {
position: relative;
}
::after
a:after {
content: '';
display: inline;
position: absolute;
height: 2px;
width: 0%;
background-color: #ce3f4f;
left: 0%;
bottom: 0px;
transition: all 0.2s ease;
}
a:hover::after {
width: 100%;
}
This all works fine when the link is on a single line, but if the link flows onto the next line then it only fills across the bottom of the first line, as seen here:
http://i.stack.imgur.com/7SX7o.jpg
If I inspect the element then it appears that the issue is not solvable, as the browser (in this case, Firefox) isn't selecting the entirety of the wrapped element:
http://i.stack.imgur.com/342GH.jpg
Is there a way of solving this purely with CSS, or is it a problem with the way the browser renders the objects? I have played around with a lot of white-space, display and position configurations but to no avail.
Here's an example of the behaviour:
https://jsfiddle.net/57Lmkyf4/
This cannot be done with CSS. (I've implemented it using JS for links that wrap over not more than 2 lines: https://jsfiddle.net/6zm8L9jq/1/ - you can resize the frame to see it at work)
In my Chrome (39.0.2171.95) the underline under a wrapping a doesn't work at all, while in FF it displays like in your screenshot above. Primarily this is because your a element is inline (default), and when it wraps, any pseudo/child elements that depend on its width get 0 width in Chrome and the element's width on the first row in FF. Inline elements don't have control on their own width/height properties (eg, you can't set a width:100px on them without changing them to block elements), and this also affects any absolutely positioned elements that depend on them for width/height.
If you call the window.getComputedStyle method on the pseudo element in FF and Chrome, like:
var a = document.querySelector('a');
a.onmouseover = function(){
setTimeout(function(){
var width = window.getComputedStyle(a,':after').getPropertyValue('width');
console.log(width);
},300); //timeout so that animation to 100% width is completed
}
...in chrome you will see 0px while in FF you will see 100% - and neither will span to actual 100% of the parent. If you added a child element (eg a span) to a instead of a pseudo element, you could investigate the child's actual width after mouseover by calling getBoundingClientRect().width on the child, in which case again, in chrome you would see 0px, and in FF the width of the part of the parent element falling on the first line.
You can change the a element to display: inline-block and it will work, but it will obviously no longer wrap.
I have a fixed position element inside a relatively positioned element, as far as I'm concerned the position: relative element shouldn't have any effect on the position: fixed (fixed elements are positioned relative to the window, right?).
However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index.
I hope I'm making sense? Below is a HTML example of what I'm talking about:
.outer {
position: relative;
z-index: 2;
}
.inner {
background: #fff;
left: 50px;
position: fixed;
top: 40px;
z-index: 1000000;
}
.fade {
background: #555;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="fade"></div>
If you change the following:
.outer { position: relative; z-index: 4; }
Then the .inner element appears in front of the fade element.
I find this behaviour very peculiar... is there a way of working around this without moving the .inner div, or changing the CSS of the .outer div?
Fiddles of above code samples:
http://jsfiddle.net/n2Kq5/
http://jsfiddle.net/U8Jem/1/
In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.
Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.
Changing HTML options
The first option is to move inner outside of outer, which would look like this.
The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.
A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.
Changing CSS options
The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).
Explanation
If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.
Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.
I am working on a project for a class and have an issue.
The site can be found here: http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10
What I have now is a div that I have positioned towards the bottom using inline styling in the HTML and a div.
It appears fine right now, but of course that depends on the browser that is being used.
I would like that image to always appear at the bottom without having to use inline styling. Essentially, I would like it to stick out of the footer, but not have anything else be affected or moved.
What would be the process to do this, if it is possible?
Here's a link to the CSS: http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css
Thank you very much for the help in advance.
I assume that the oil well tower image is the one to be positioned. I would create a .png file with a transparent background and then set it as background image to the .container element.
The .png transparency will allow the other background motif to show through in the open spaces (transparent) sections of your vector image.
This works fine as long as your footer elements flows right after your container element.
The key is place the image with position absolute. I have moved the mast illustration to the footer: http://jsfiddle.net/David_Knowles/98PLA/
Does this solve your problem?
#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */
.fltright {position: absolute; bottom: 56px; right: 0;}
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6-7 (trigger hasLayout) */
.container {
zoom:1;
}
<div id="footer">
<!-- Begin Container -->
<div class="container">
<img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/>
<h1>Copyright © 2013 <br />All Rights Reserved</h1>
<h3>Webmaster |Site Map | About</h3>
</div>
<!-- End Container -->
</div>
<!-- End Footer -->
To make an image ignore it's parent element, a combination of positioning and z-index can be used:
position: absolute;
z-index: 2;
You can also try playing around with the display and overflow properties depending on exactly what you want it to look like.
When I looked at your code, I came up with these css values to absolutely align your .sidebar on your page. You had position: relative; to position it, however, it moves relative to how the large the window is and the surrounding elements. This is why it was probably moving around. However, position: absolute; does not consider surrounding elements and therefore will stay put.
.sidebar {
position: absolute;
top: 233px;
right: 10px;
}
Is it possible to not display an element, as with display:none, but continue to display the :before and/or :after?
I tried
#myspan {display:none}
#myspan:after {display:inline; content:"*"}
but that didn't work. I'm trying to have CSS replace the content of a span with an asterisk, without introducing jQuery.
No, it is not possible.
Pseudo elements are rendered like children:
<span id="myspan">whatever<after></span>
And display:none hides the element including all children.
EDIT 1
JavaScript is your best option in my opinion. Even without jQuery changing text is not hard:
document.getElementById("myspan").innerHTML = "*";
Demo
EDIT 2
However, if you really want to do it with CSS, you can use negative text-indent to hide the text and relative positioning to show the asterisk:
#myspan {
text-indent: -9999px;
display: block;
}
#myspan:before {
content: '*';
position: absolute;
top: 0;
left: 9999px;
}
Demo
I think a very easy approach to doing this is to exploit the visibility property. But note that a "hidden" element still takes up the space. But if you are okay with that, just make make the parent element "hidden" and pseudo element "visible":
#myspan {visibility:hidden}
#myspan: after {visibility:visible}
Once you have the visibility taken care of, feel free to play around with the position so that excess space is avoided.
Something like,
myspan {
visibility: hidden;
position: relative;
}
myspan:after {
visibility: visible;
position: absolute;
left: 10px;
}
It's definitely possible. Use font-size: 0px instead of display: none:
#myspan {
/* display: none; */
font-size: 0px;
}
#myspan:after {
/* display: inline; */
font-size: 16px;
content: "*"
}
A demo is here.
In this case you can only use px/pt for the display text font units.
Use:
#myspan {font-size:0}
#myspan:after {font-size:16px; content:"*"}
If you have a min-font size specified, it won't work (browser setting). I'd only use this method for things like previous and next buttons so that screen readers will read "Previous", but you want to replace it with a \276e. So plan for what it will look like with the text showing up.
As explained by #bookcasey, setting display: none on an element unavoidably hides the :after or :before pseudo-element too (because they are not really something displayed after or before an element but content added inside the element, after or before its real content).
But the goal of replacing an element’s real content by generated content is in principle possible, according to the old (2003) CSS3 Generated and Replaced Content Module draft, by simply setting content on the element, e.g.
#myspan { content: "*"; }
So far, only Opera supports this. But a special case where the replacing content is an image is supported by WebKit browsers, too:
#myspan { content: url(asterisk.png); }
It is possible, but you need to use visibility:hidden instead of display:none.
See the answers in the following question for more detail:
How can I replace text with CSS?
You need to break them into multiple content DIV blocks because the style is inherited by child elements. So it's not possible once the parent display style is defined.