I'm going to set background image and background color both this is working fine but the problem is that when I write some text on a div the background automatically apply on the text here is my code please review it.
#canvas-preview {
width: 200px;
border: 1px solid #000;
box-sizing: border-box;
position: relative;
background-image: url('path/to/image.png');
}
#canvas-preview::before {
background-color: green;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
#custom-canvas {
margin: 10px;
color: #fff;
}
<div id="canvas-preview">
<div id="custom-canvas">There is some text</div>
</div>
I want to set text color white. What's the problem with this code.
UPDATE
I need both background-image and background-color.
For example green color over the image with opacity: 0.37
Sorry, I forgot the placing opacity property in css
#canvas-preview::before {
background-color: green;
opacity: 0.37; /* editing in code */
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
I need both things not one.
Add z-index:-1; to your pseudo element #canvas-preview::before to make visible the Text
As it comes over the #canvas-preview as a layer and works as fallback in case your bg-image won't load.
So to make visible the text-layer over that you need to lower the z-index of your pseudo element.
Updated Code Snippet
#canvas-preview {
width: 200px;
border: 1px solid #000000;
box-sizing: border-box;
position: relative;
background-image: url(https://hd.unsplash.com/photo-1463950922781-0e6d07cbd146);
}
#canvas-preview::before {
background-color: rgba(0, 128, 0, 0.5);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
#custom-canvas {
margin: 10px;
color: #ffffff;
z-index: 2;
position: relative;
}
<div id="canvas-preview">
<div id="custom-canvas">There is some text</div>
</div>
Instead of adding opacity I would suggest to use alpha value of the bg-color(rgba) in your pseudo element which will be a better solution.
I checked your code and text is white. It is just hidden behind this green container because of this:
#canvas-preview::before
If you remove before thing(just for test purposes) you will see that text is white. So You need a different approach. Code is fine.
#canvas-preview{
width:200px;
border:1px solid #000;
box-sizing: border-box;
position: relative;
background-image: url('http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e');
}
#canvas-preview::before{
background-color:green;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index:-99999; // add z-index in this css code.
}
#custom-canvas{
margin:10px;
color:#fff;
}
<div id="canvas-preview">
<div id="custom-canvas">There is some text</div>
</div>
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
Reference :
Your code should change like this:
#canvas-preview::before{
background-color:green;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index:-1;
}
#custom-canvas{
margin:10px;
color:#fff;
}
This may be helpful.
Related
So I did was the snippet I've attached but the problem is when hovering on square area and not in the circle area or in the corner it's jittering. I need to somehow keep the square area as clickable. I'm wondering on how to approach this properly.
.container {
background-color: orange;
width: 150px;
height: 150px;
}
.container:hover {
border-radius: 50%;
background-color: red;
}
<div class="container"> </div>
enter image description here
You can use pseudo elements such as ::after or ::before.
Though they insert content at selected element, ::after inserts content after the selected element and ::before inserts content before the selected element.
content property generates the pseudo element. If you do not set that property, it will be content: none; by default and your pseudo element is not generated.
.container {
background-color: orange;
width: 150px;
height: 150px;
}
.container::after {
content: "";
position: absolute;
height: inherit;
width: inherit;
background-color: red;
opacity: 0;
transition: all .15s linear;
}
.container:hover::after {
opacity: 1;
border-radius: 50%;
}
<div class="container"> </div>
You can use a before pseudo element to be the background, so leaving the actual element untouched on hover.
The before pseudo element is given the same dimensions as the element but changes its background from orange to red on hover, and its radius changes to 50%.
To achieve the correct positioning and sizing of the before pseudo element you need to set the actual element to have a position, in this case the snippet sets it to relative, and the pseudo element is positioned absolute, behind the actual element:
.container {
width: 150px;
height: 150px;
position: relative;
}
.container::before {
content: '';
background-color: orange;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container:hover::before {
border-radius: 50%;
background-color: red;
}
<div class="container"> </div>
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 have 3 overlapping html divs, one next to another, colored: red, green and blue. All elements have opacity 0.5. First two divs (red and green) I want to summate color (creates something between red and green) - standard behaviour, without changes here.
My problem is how to prevent summating colors only between green and blue divs?
It would be great if we could do this without additional elements.
html:
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
css:
div {
position: absolute;
opacity: 0.5;
}
#d0 {
top: 60px;
height: 100px;
left: 50px;
width: 100px;
background-color: red;
}
#d1 {
height: 150px;
left: 130px;
top: 50px;
width: 200px;
background-color: green;
}
#d2 {
height: 100px;
left: 300px;
top: 80px;
width: 120px;
background-color: blue;
}
EDIT:
I forgot about: http://plnkr.co/edit/5MIduRMFo0dZ54xqzpAa?p=preview
It should look likt this (fourth element is to show that blue also has opacity):
If you want to keep opacity of all divs to be still 0.5. Then here is your pure CSS solution. No additional elements added.
Here is a fiddle for that.
http://jsfiddle.net/tdh7ks2x/2/
**HTML**
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
**CSS**
#d2 {
opacity: 1;
height: 100px;
width: 120px;
left: 300px;
top: 80px;
}
#d2:before,
#d2:after{
content: "";
position :absolute;
left: 0;
top: 0;
height: 100px;
background-color: blue;
}
#d2:before{
width: 30px;
z-index: 2;
opacity: 0.99999999;
background-color: #7F7FFF;
}
#d2:after{
width: 120px;
z-index: 1;
opacity: 0.5;
}
#d4 {
width: 200px;
height: 80px;
left: 400px;
top: 90px;
background-color: red;
}
Just added this CSS instead of #d2, rest all your CSS is fine. Let me know if this resolves your issue.
Pick the color of the div with opacity and use it in the ":before" div.
You can use z-index property to bring a div to front or back. Higher the value of z-index to move it to the top and decrease it to move it back.
Moreover you have used opacity:0.5 due to which you will see the back colors at the intersection. You must increase the opacity to see the exact colors there
div {
position: absolute;
opacity: 0.5;
}
#d0 {
top: 60px;
height: 100px;
left: 50px;
width: 100px;
background-color: red;
z-index:2
}
#d1 {
height: 150px;
left: 130px;
top: 50px;
width: 200px;
background-color: green;
}
#d2 {
height: 100px;
left: 300px;
top: 80px;
width: 120px;
background-color: blue;
}
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
css:
Basically, this problems occurs due to overlapping transparent colors. Example is rgba(255,255,255,0.3) overlapping with rgba(255,255,255,0.3) to form a brighter color.
If your design can do without transparent colors, you can easily solve this by converting your transparent colors (rgba) to fully opaque ones (hex) for related elements.
You will need the background color to help compute a fully opaque hex from rgba or just use a color picker browser extension after rendering.
I'm trying to use 'bakground-position' in the background of my div, but not working.
When background an image, the 'background-position' works, but with 'background-color' is not working.
What can I do?
This is my CSS:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-color: #000000;
background-position: right 50px;
}
You can provide an background-image as a solid color, creating a monochrome gradient:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-image: linear-gradient(#000, #000);
background-position: right 50px;
background-repeat: no-repeat;
}
The gradient is fully compatible with an image, and if you set both colors to the same, it is fully equivalent to a solid color
demo
You can workaround with a div only for background, simulating it by mixing position: absolute offsets and negative z-index.. (Though I've tested only in chrome)
See fiddle
HTML
<div id="defaultContentParent">
<div id="defaultContent"></div>
<div id="defaultContentContent"><div>
</div>
CSS
#defaultContentParent {
border: 1px solid #00f;
background-color: #aaa;
color: #fff;
position: relative;
width: 200px;
min-height: 140px;
margin: 0 auto;
z-index: 0;
}
#defaultContent {
background-color: #000000;
height: 50px;
position: absolute;
top: 50px;
right: 0;
width: 80px;
z-index: -1;
}
#defaultContentContent {
z-index: 9999;
}
You can't position a background-color property, since that property fills the entire space. Likewise, you can't use background-color with a background image, because that would, basically, replace your background image with the filled background-color, at which point there is no reason to use a background image at all!
Are you perhaps thinking of using a gradient, or giving a background image a filter of a certain filter? That would be a different question.
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/