I think the title is the sum of everything...
I have a sprite image and over it another image (like an image frame). What I want is to move the lower image background to the given coordinates when the mouse hovers over the top image :/
In other words, I can't get the sprite to work while having another image over it.
Can anyone help?
this is direct link to my dev server so you can see:
kp77=mine=nu~pokop
= is ., and ~ is /
For now I have a solution with jquery, but I would like pure CSS only. I can't use inline :hover pseudo class so..
Thanks
Maybe I don't understand the issue, but why not simple
a.fg:hover span:first-child {
background-position: 0px 0px !important;
}
? Here is the working CSS-only example, that, I assume, does what you want to achieve with JS
look here CSS: Animation Using CSS Transforms
somtehing like this
Translated to the right:
a:hover
{
-webkit-transform: translate(3em,0);
}
Firefox and Opera now support these transforms with an identical syntax. Just replace -webkit with -moz and/or -o in the examples and you will see the same effects
Related
Hello I am tired of the boring looking Google Chrome native html5 video player design.
It's getting worse with every time they change it.
Right now it's in a bright white which is completely unsatisfying when you ask me.
So I decided to create a little userstyle to make it dark.
This is how far I came but it's not possible for me to change the color of the little circle.
Any help is welcome.
This is my actual progress:
video::-webkit-media-controls-panel {
background-color: #161618;
}
video::-webkit-media-controls-volume-slider-container {
background-color: cyan;
}
video::-webkit-media-controls-volume-slider {
background-color: #1FB2B0;
}
video::-webkit-media-controls-timeline {
background-color: #1FB2B0;
}
Here is the jsfiddle link for it.
https://jsfiddle.net/cyc1j0nv/7/
I eventually got where I wanted to go (more or less) by applying a filter to the media controls as a whole. Of course, one could also apply filters to each pseudo-element of the controls individually.
video::-webkit-media-controls{
filter: hue-rotate(180deg) brightness(0.9);
}
<h1>Styling video controls</h1>
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>
*Note: it's up to the user to add vendor-prefixes to the CSS as required
There isn't any CSS style to change the little blue circles in the same sense as your example; they're images that are packaged into chrome. Maybe one of the css3 image filter properties would work.
There's also a small caveat to overriding these styles in general: they are internal to chrome, and are subject to change at any time. Pages that depend on them might find that they simply don't work the same way in some future version of chrome.
If you'd like media controls with a custom look on your page, then you might want to take a look at the many javascript media players that give you quite a bit more flexibility. They also work across different browsers.
I succeeded in positioning the controls in a way without overlay the original video screen by:
video::-webkit-media-controls-enclosure {
overflow:hidden;
position: absolute;
bottom:-32px
}
video::-webkit-media-controls-panel {
display: flex !important;
opacity: 1 !important;
}
hide download button by adding:
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)
There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).
For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices
<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/
NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.
This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.
So, I have this animation that I want to run in the background of my website.
http://www.theartificialasylum.com/index3.html
I want to layer some divs over that animation containing images and texts etc. I have tried using z-index in the CSS file and different variations of uses of opacity to no avail.
Can anyone see where I am going wrong? this is the best I seem to be able to achieve: http://www.theartificialasylum.com/adex.html
Using Chrome's developer tools, I added some text to the 102 div, gave it a class of "lawl", and used only this stylesheet and was able to accomplish what it sounds like you wanted:
body{
background-color: #000000;
color: #fff;
}
#flashContent {
position:absolute;
top: 0;
left: 0;
}
.lawl {
background: #023;
opacity: .5;
}
I'm not sure what the problem was. Maybe it's your strict doctype. (I only use transitional myself.) Maybe it's because you were applying too many things to the html tag.
I do recommend cleaning up your code a bit, using more semantic IDs, putting test text in your divs, and paring it down so that you only test a few variables/lines of code at a time to achieve what you want.
Also, saving damn IE opacity fixes for last until after you have everything else done.
I am reverse engineering a previous employee's work and noticed a number of css classes look like this...
.img-shadow {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
}
Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?
According to wikipedia, the second background rule is for IE6.
Internet Explorer 6 and below also
have a problem with !important
declarations when the same property of
the same element has another value
specified within the same code block,
without another !important
declaration. This should result in the
second value being overridden by the
first, but IE6 and lower do not honor
this.
It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.
Older versions of IE will use the last one.
These versions had problems with png transparency.
looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)
I am making a website that uses nothing but jquery-ui for theming.
Well, in my application I need to do alternating colors per row on a list. Right now all of the rows are just the color of .ui-widget-content. Well, I can apply a class on alternating rows with no problem, but I want for the alternating color to be a very transparent version of the background color in .ui-widget-header. How would I do this using nothing but html jquery and CSS? (I'm really hoping to not have to use javascript in order to do this little trick though)
The easiest way to do this is to create a small flat image in Photoshop, Fireworks,GIMP,Kreta etc. and set the color / opacity there. The above solutions will allow for transparency but they are
1) Not standards-compliant and
2) They May cause the text contained in the div to also be transparent (usually an undesirable result in design).
So...
.ui-widget-content-alt {
background: transparent url(images/my_80%transparent_black_bg.png) top left repeat;
}
.ui-widget-content {
background: transparent url(images/my_80%transparent_white_bg.png) top left repeat;
}
Assuming that I didn't misunderstand your question, and that you can use a separate CSS class for alternate rows like .ui-widget-content-alt, you may want to use the following CSS:
.ui-widget-content, .ui-widget-content-alt {
background-color: #000;
}
.ui-widget-content-alt {
filter: alpha(opacity=20);
opacity: 0.2;
}
The opacity property is the CSS standard for opacity values, and works in Firefox, Safari, Chrome and Opera.
The filter property is for IE.
You may want to check the following article for compatibility of the opacity property with older browsers:
CSS Tricks - CSS Transparency Settings for All Browsers
There is no standard way of doing it.
You can use css opacity and fiter to achieve it.
Something like the following would give you 80% black transparent color
.someClass { background-color:#000; -moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);}
Using this will cause your CSS to fail compliance checks.