![]() ![]() The technique is basicly the same as what did, but perhaps a bit more intuitive because I don't use the background-color: inherit. Thanks to the transition it fades in nicely. On hover of the div, I change the background color of the pseudo element to be less transparent. What I did is i defined the :after pseudo element on the default state of the div in stead of only on the hover state, but with a fully transparent background, and a transition on the background color. Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.Īllthough technique is also nice, and works fine, allow me to slightly alter my answer to the previous question, and add the transition in that code.īackground: url() no-repeat center center More info and examples about how you can transition various properties of pseudo-elements using this inherit technique: IE10 supports them in a bit of a weird way, meaning that something like. ✗ Current versions of Safari and Opera don't support transitions on pseudo-elements.Ĭhrome supports transitions on pseudo-elements only starting from version 26. ![]() ✓ Firefox supports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first. Support for transitions on pseudo-elements The reason why I am not transitioning directly the background-color of the pseudo-element is that support for transitions on pseudo-elements is still not that good yet. However, I am also using background-color: inherit on the pseudo-element, which means that, at any given moment, the pseudo-element, which is situated above its parent div (and therefore above the background-image of the div) is going to have the same background-color (meaning that the background-color of the pseudo-element is going to transition from rgba(0,0,0,0) to rgba(0,0,0.5) on :hover). All this happens behind the background-image. Several functions, such as blur () and contrast (), are available to help you achieve predefined effects. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. To change it from black to white or white to black the background color need to be white.įrom black to colors, you can choose whatever color.įrom white to colors tho, you'll need to choose the opposite color of the one you want.What I am doing here is that I am setting a RGBa background-color on the div, behind its background-image and transitioning this background-color (its alpha) on :hover. The filter CSS property applies graphical effects like blur or color shift to an element. ![]() I added a ::before with exactly the same value so the ::after would do the 'difference' of the 'difference' made by the ::before and cancelled it-self.the 'mix-blend-mode' is set at 'difference' instead of 'multiply' or 'screen'.the url being in my img tag, I put it(and a label) in another div on which ::after will work.So what I did is pretty much the same with three main differences: So, I figured a work around and thought it might help people if they too stumble here. Aslo, the images were generated with ng-repeat, so I couldn't have their url in my css AND you can't use ::after on img tags. The pen in answer works well if you have a white or black background, but mine wasn't. SVG is the way to go now, but if you still want to color a PNG image, I came up with this technique: Īnswering because I was looking for a solution for this. However it's no longer available as an icon font but only as a collection of SVG images. They also have some tips on how to create your very own icon fonts. ![]() Just found out github also uses its own icon font: Octicons Simply put this in your : Īnd then go ahead and add some icon-links like this: įont-Awesome uses different class names in the new version, probably because this makes the CSS files drastically smaller, and to avoid ambiguous css classes. ĮDIT: I'm using Font-Awesome on my latest project. This only works if the logo background is always the same colour. CSS could then be used to change the logo colour, by changing the background-color of the image. You might want to take a look at Icon fonts. If the logos background is always the same colour, you could cut out the logo leaving the logo transparent inside a coloured background. brightness ĮDIT July 2023: when I wrote this answer, more than 10 years ago, CSS filters where not a thing yet, but now it's quite easy to to drop a shadow on a PNG image, and give it the desired color. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |