I try to make web site with minimal HTML markup for presentation.
Having the following HTML tag:
<div class="title">I'm a title!</div>
I need to add two elements before it using CSS, 1 for background and 1 for shadow.
Something like:
.title
{
display: block;
position: relative;
}
.title:before
{
display: block;
background-color: #00FFFF;
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
.title:before
{
display :block;
background-color: #111111;
position: absolute;
width: 100%;
height: 100%;
margin: 5px -5px -5px 5px;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
doesn't work because the second .title:before overrides the first.
I cant add the background to the element because I need it to have opacity.
Is there any way to do this without adding additional markup? And if the answer is somehow not using two :before elements is there any way to specify more then one?
Not sure how you'd apply n elements, but for only two (and especially here) it seems to me you could just use :after for the second element...
I am not sure. Have you tried something like .title:before:before? Maybe this helps... Not able to test it right now.
why don't use backgroungd gradient image instead
you call then Something like
background : url("../images/image_path.png") 0 0 no-repeat;
I dont understand why you cant just use...
.title
{
display: block;
position: relative;
background-color: #00FFFF;
}
.title:before
{
display :block;
background-color: #111111;
position: absolute;
width: 100%;
height: 100%;
margin: 5px -5px -5px 5px;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
Two befores will be only in future. No one browser supports it now.
Here specification: http://www.w3.org/TR/2003/WD-css3-content-20030514/#nesting
And second before will be working like div::before::before or div::before(2)
Related
I want to add some pizzazz to some banners... my banners are simply an h1 element with a background color property that stretches the legth of the containing element.
Here is my CSS:
.banner {
position: relative;
z-index: 1000;
padding: 20px;
}
.banner-blue {
background-color: #93DEFF;
color: #222222;
}
.banner-yellow {
background-color: #FFF072;
color: #777777;
}
.banner-red {
background-color: #FF356B;
color: white;
}
And I would apply it like this:
<h1 class="banner banner-yellow">I'm a banner!</h1>
My problem:
I want to overlay a copy of the banner background but change the color and rotate it slightly on the z-axis to get an effect like this.
However I can't work out how to do that using the ::before (or is it ::after) psuedo-elements to do that... here is what I have tried:
.banner-red::before {
display: block;
position: absolute;
padding: 20px;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(3deg);
width: 100%;
margin-left: -30px;
}
Here is a codepen of it running: not looking too good: https://codepen.io/jethazelhurst/pen/JyKqRB
Just rotate your box in the opposite direction: transform: rotateZ(-3deg);
You can set the top and left value in order to place your rotated box correctly.
.banner-red::before {
display: block;
position: absolute;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(-3deg);
width: 102%;
height: 97px;
margin-left: -30px;
top: 2px;
}
Of course you can change the colors: your horizontal box is #91c6ff and the rotated one is #91c6ff. Also, they are transparent.
Here's a fork of your project: https://codepen.io/anon/pen/zdBVGe
And with the colors:
Make a element with another child element for text, span for example. Then you can set z-index on span so that text is above pseudo element.
div {
background: #91C6FF;
padding: 25px;
margin: 40px;
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(135, 171, 255, 0.7);
transform: rotate(-4deg);
}
span {
position: relative;
z-index: 2;
font-size: 30px;
}
<div><span>Lorem ipsum dolor.</span></div>
I'm trying to create a setup where I have a navbar, a collapsible menu within the navbar, and website content.
Sorry for the bad example but kind of like this: https://jsfiddle.net/2nqchLpf/
As you can see if you hover over the sub-menu links when the dropdown is not expanded, you can still click on them.
How can I get the links to display behind the content while having the navbar display over everything?
I have applied z-index like this:
.navbar {
position: fixed;
z-index: 1000;
}
.big-dropdown {
position: absolute;
z-index: -1;
}
#content {
position: relative;
z-index: 999;
}
It's tricky with z-index, considering stacking order and other z-index characteristics. Here's a complete run-down: Basics of the CSS z-index property
But for a simple and easy solution, since you're already using position: absolute, just move the sub-links off the screen.
So instead of this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
}
Try something like this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: -9999px; /* adjustment */
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
left: 0; /* new */
}
revised fiddle
This may not be exactly what you are looking for, but if you replace
.show {
opacity: 1!important;
}
with
.show {
display: block;
}
and used
display: none;
instead of
opacity: 0;
it would work
I have tried to create a minimal snippet that demonstrates the situation. The following HTML/CSS creates two boxes, one red and one cyan. Each one contains a clickable link. When I apply a CSS filter (as I have done to create the cyan one), the box is no longer clickable. My best guess is that this has to do with "stacking contexts," but I admit I don't know enough about them.
For the second part of the question, working around this, is there any way I can modify the CSS for the filtered class to avoid this issue? I am running into this in the context of a Chrome extension that applies CSS filters to images, so I would like a solution that does not require modifying the underlying structure of the site (the HTML) or significantly changing the way the site looks. I would consider it particularly useful if there were a solution that could be applied programmatically without introducing risk that other sites will now behave incorrectly.
.filtered {
filter: invert(100%);
}
/* I cannot modify any of the following CSS to solve this. */
div, a {
display: block;
height: 50px; width: 50px;
left: 0; top: 0;
position: absolute;
}
.outer:before {
display: block;
height: 50px; width: 50px;
left: 0px; top: 0;
position: absolute;
content: '';
z-index: 2;
}
.inner {
background: red;
}
.link {
z-index: 2;
}
<div style="position: relative">
<div class="outer">
<div class="inner">
</div>
</div>
</div>
<div style="position: relative">
<div class="outer">
<div class="inner filtered">
</div>
</div>
</div>
You should set the z-index of the .filtered element higher than the z-index of the :before pseudo class:
.filtered {
filter: invert();
z-index: 10;
}
.filtered {
filter: invert();
z-index: 10;
}
/* I cannot modify any of the following CSS to solve this. */
div, a {
display: block;
height: 50px; width: 50px;
left: 0; right; 0; top: 0; bottom: 0;
position: absolute;
}
.outer:before {
display: block;
height: 50px; width: 50px;
left: 0px; right: 0px; top: 0; bottom: 0;
position: absolute;
content: '';
z-index: 2;
}
.inner {
background: red;
}
.link {
z-index: 2;
}
<div class="outer">
<div class="inner filtered">
</div>
</div>
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/
Im trying to make a popup box that causes the surrounding area to get greyed out. My issue is that the opacity of the shadow div seems to overide that of the popup. I tried changing one from absolute to fixed position and increasing the z index of the popup but neither worked.
Here is a screensot of the problem.
And below is the relevent code (ask if you need to see more)
.textPopup
{
width: 1400px;
height: 600px;
background-color: White;
position: fixed;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 0.2;
}
#innerPopup
{
background-color: White;
width: 1350px;
height: 550px;
position: absolute;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 1;
}
... snip
<div id="popupShadow">
</div>
<div class="textPopup">
<div id="innerPopup">
</div>
</div>
</body>
</html>
The issue you have is that #innerPopup is inside #textPopup. The opacity is then inherited by the child and cannot be overridden with it's own property.
If it is not possible to separate them, then consider using an rgba value for the background as opposed to the opacity property:
#textPopup {
background-color: rgba(255,255,255,0.2);
}
You can see it working on jsfiddle.
You'll be able to make it work as expected by making the following changes in your CSS:
#innerPopup
{
position: relative; /* change this to relative - will allow you to override the parent specified opacity */
opacity: 1;
/* other properties */
}