Simulate image "overlay" with CSS - html

Basically I'm trying to simulate Photoshop's image overlay thing using images and CSS for a menu.
There are 2 versions of the menu background image: one is the normal state (pink), and one the active state (blue). The entire menu is wrapped in a DIV with the normal (pink) image as background.
How can I make it so each active menu link uses the corresponding slice of the blue image?
Like this:
My code so far
Do you think this is possible with CSS?

CSS Only solution for modern browsers:
ul {
background-color:#ff00ff;
background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
height:50px;
width:400px;
margin:0;
padding:0;
border-radius:25px;
overflow:hidden;
}
li {
width:100px;
height:50px;
float:left;
}
li:hover {
background-color:rgba(0,0,255,0.2);
}
Click to see a working demo: http://jsfiddle.net/AlienWebguy/ZLg4B/

If you need to support older browsers and can't use css3, there is a number of ways to do this. One of them:
You can cut out the blue image of the entire thing (you can actually make it wider)
then
li.active {
background: url('path/to/yourImage.png') no-repeat -50px 0;
/* 50px or however wide that rounded tip is */
}
li.active.first {
background-position: left top;
}
li.active.last {
background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */

Are you ever going to have links at the rounded parts? If not, you could just take a pixel-wide slice of the blue image and set that to the :hover state background with repeat-x.
There are definitely other ways to do this but this is the most straightforward IMHO.
Edit: After seeing your fiddle, perhaps this isn't the case. I would consider using JavaScript to calculate appropriate x-offsets for each link, and using a slice of the overlay image in that way. Or you could just make the first link a "special case" and use a generic different-color background for the rest of the links.

Related

How to use css property linear-gradient to gradually change color from red to yellow to green?

I want to create a legend using html, css which contains change of color gradient from green to yellow to red. I have tried using linear gradient property of css. However, what I got so far is given below:
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
}
<div id="color_range"></div>
My code for color gradient
I need a figure like this:
How can I make a legend like above?
Simply change: background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
To: background: linear-gradient(red,yellow,green);
You can also change it to: linear-gradient(to top, green,yellow,red); but I don't think that to top is necessary
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(red,yellow,green);
}
<div id="color_range"></div>
To understand how linear-gradient works in CSS please read: CSS Gradients
Also take a look at this page that can be helpful when using CSS gradients: https://www.colorzilla.com/gradient-editor/
You can try this.
#color_range{
height:280px;
width:40px
background:linear-gradient(red,yellow,green);
}
You can also use the color codes for these colors .

CSS - Change css background of class text without sub element

I'm working on a project based on a wordpress theme that is regularly updated so I can't change the HTML (without making maintenance hell anyway). I added a stylesheet that allows me to change the appearance of the site and all I have to do is add an "include" with each update.
I have an availability calendar that shows as follows:
As you can see, the "31" is barely visible.
The html output:
<td class="calendar-end" data-curent-date="1564531200">
31
</td>
I want to edit the text's css to add a reversed gradient (white on the red section, grey on the white section) so that the text is properly readable. See my css below
background: linear-gradient(135deg, #ffffff 0%,#ffffff 48%,#4d5567 48%,#4d5567 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
This gives the following result (when adding <p> tags to the element via chrome inspector and giving it the css rule)
My issue is, I don't know how to create a rule for the text as it's not a subelement.
Normally I would engulf the 31 with <p> tags so I could create a rule for .calendar-end p but thats not possible because of the HTML restrictions...
Is there a way that I am not aware of to affect the text inside the td via a specific css rule?
If I try to apply my code to the .calendar-end class it causes a conflict with the background gradient and I end up with completely invisible text (same gradient as background)
I am not sure what I am asking is even possible but css isn't my strong suit and I'm hoping someone here is more knowledgeable than I am on the subject :D
Thanks for any help all!
With chrome you can consider multiple background like below (doesn't work on firefox, raised a bug)
.calendar-end {
color: transparent;
background:
linear-gradient(135deg, #ffffff 48%, #4d5567 48%),
linear-gradient(135deg, red 48%, #fff 48%);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
width:100px;
height:100px;
font-size:100px;
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>
For the other browser consider a pseudo element. Simply make sure to not specify any z-index to main element to have the pseudo element behind (related: Why can't an element with a z-index value cover its child?)
.calendar-end {
background:
linear-gradient(135deg, #ffffff 48%, #4d5567 48%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
width:100px;
height:100px;
font-size:100px;
position:relative;
}
.calendar-end:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(135deg, red 48%, #fff 48%);
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>
In case the gradient will be the same for text and background you can optimize the code like below:
.calendar-end {
background-image:
linear-gradient(135deg, #ffffff 49%, #4d5567 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
width:100px;
height:100px;
font-size:100px;
position:relative;
}
.calendar-end:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: inherit;
transform:rotate(180deg);
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>

set 80% of background color of a div to one color

I have a div and background color is red. Now I'd like to make left 80% remain red, rest 20% on the right part to no color or transparent. Is it possible to alter css only without adding more divs or changing the padding of the div? I'd like div to remain it's original size.
.myClass
{
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 20%, rgba(255,48,48,1) 21%, rgba(255,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(20%,rgba(41,137,216,0)), color-stop(21%,rgba(255,48,48,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* W3C */
}
result:
i don't think you can set multiple background colors for one div, but you could try:
div.twocolorish {
background-color: blue;
border-left: 20px solid green;
}
This would only work if you didn't need text (or other) to go over the part with the green border
You cannot use padding to achieve the partial coloring. A div can be colored in the background which makes the whole div to be colored with the given color. But you can use an outer div to achieve your desired result or use css3pie to achieve your desired result (especially in IE 8 and below). It has gradient options also.
<div style="width:500px; height:400px; ">
<div style="width:80%; height:100%; background-color:blue;">
</div>
</div>
The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
(index):6770 crbug/1173575, non-JS module files deprecated.
(anonymous) # (index):6770
(index):6770 crbug/1173575, non-JS module files deprecated

Weird CSS3 Transition (flickering)

When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My browser is Google Chrome
See here
<button>Log In</button>​
CSS:
button {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border:1px solid #890000;
display:block;
margin:0 auto;
width:200px;
padding:5px 0;
border-radius:8px;
color:#fff;
font-weight:700;
text-shadow:0 1px 1px #000+50;
box-shadow:0 2px 3px #000+150;
-webkit-transition:background linear .5s;
}
button:hover {
background:#ff3019;
}
button:active {
background:#cf0404;
}
​
I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!
Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.
So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.
You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.
-webkit-transform: translate3D(0, 0, 0);
I believe it is currently an issue without a fix. I too have run into this before playing around and could not get it to work. Using a solid color seems to be fine, or faking it with a background image.
Similar Question here: Webkit support for gradient transitions
More detail: http://screenflicker.com/mike/code/transition-gradient/
The flicker you're noticing is actually the button's background color being changed to transparent (so, the button "flashes" or turns white in your Fiddle because the body's background-color is white).
If you overlay your button on top of another element with the exact same size/height/background-color (including gradients), the "flicker" won't be noticeable.
Check here for an example using your fiddle: http://jsfiddle.net/hrDff/12/
Still definitely a bug tho...
I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
I changed the top color of the linear-gradient to give a noticeable change to the hover effect.
button:hover {
background: -webkit-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
}
There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.
With a similar issue, Jan's suggestions helped improve for all background images but one. I got rid of the flickering of the last one by noticing two conflicting positioning rules. I had for a position:static one rule margin-top:-3em (minus) and the other one margin-top:5em (plus). Thus, I suggest you carefully check the consistency of the positioning when you experience such an issue.
In your case Michelle, I've been testing with a longer delay 1s to 3s, which helped me understand what is that clearer stage, a flash with a very short delay. Your gradient starts with no background in fact and what you see is the background of the page. I got this information by changing the background of the body of my test page from ivory to black.
When I tried your gradient on a black background I got a black stage/flash (easier to see at 3s).
Perhaps it should be wise to test the order of your rules, and also try to understand why the gradient starts from the background of the body or parent and not from your background.
A workaround could be to set your button in a div with your button red background at the exact size and shape of your button.
I solved the blinking like this:
Html as follows:
<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>
css as follows:
.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
This link fixed it for me. You just have to add a line to the css of the element that's flickering:
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

How do I remove background-image in css?

I have a general rule which gives all DIVs a background image.
I have one div (with id='a') which I don't want it to have the background image.
What css rule do I have to give it?
Try:
div#a {
background-image:none
}
div#a {
background-image: none;
}
div#a {
background-image: none !important;
}
Although the "!important" might not be necessary, because "div#a" has a higher specificity than just "div".
div#a {
background-image: url('../images/spacer.png');
background-image: none !important;
}
I use a transparent spacer image in addition to the rule to remove the background image because IE6 seems to ignore the background-image: none even though it is marked !important.
Since in css3 one might set multiple background images setting "none" will only create a new layer and hide nothing.
http://www.css3.info/preview/multiple-backgrounds/
http://www.w3.org/TR/css3-background/#backgrounds
I have not found a solution yet...
When background-image: none !important; have no effect.
You can use:
background-size: 0 !important;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center top, #fff 0%, #fff 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #fff 50%);
for older browsers.. if you have defined css in some framewokrk.css like select2.css in IE9 background-image: -webkit-gradient etc. and you want it via another .css rewrite with "background-image: none !important" not works. I used same color to color gradient like page background color.
If your div rule is just div {...}, then #a {...} will be sufficient. If it is more complicated, you need a "more specific" selector, as defined by the CSS specification on specificity. (#a being more specific than div is just single aspect in the algorithm.)
HTML :
<div id="a" class="mydiv"></div>
CSS:
div#a {
background-image:none;
}
Another Way:
div:not(#a) {
//all rules goes here
//add image here
//div with id a not effected by these rules
}
Multiple (not pseudo)
div:not(#a):not(#b):not(#c) {
//all rules goes here
//add image here
//div with ids not effected with these rules
}
Doesn't this work:
.clear-background{
background-image: none;
}
Might have problems on older browsers...
Replace the rule you have with the following:
div:not(#a) { // add your bg image here //}