I've been coding my portfolio website from scratch and I want to implement an image change (black and white to color) when I hover over the thumbnails in my gallery. Is there a way to do this easily? I have 14 images, two pictures each (color and black and white).
Thanks!
You can save some traffic for you and your visitors and only have one color image, which you can desaturate using CSS filter.
Assign the class to your image in HTML: <img class="image-bw" src="image.jpeg"/>
Make your image black and white in non-hovered state by using this CSS:
.image-bw {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
And turn off this filter in hovered state:
.image-bw:hover {
-webkit-filter: none;
filter: none;
}
Take into account that this solution will not work in IE. Refer here for detailed browser compatibility information. You may also use SVG images, which can be desaturated in IE, as described here.
If you want to use two images, several ways to do so are described in this question.
Related
I have a PNG picture representing a monochrome white magnifying glass with an alpha channel. This image is overlayed on the top of other pictures, with a semi-transparent background such that you still see below it:
When you hover that picture, I would like it to change to red, as do textual links per my CSS.
I have considered several options:
Use a 'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D) character. This wouldn't work for the (fewer and fewer) clients that don't support an extensive set of Unicode characters; but when it works, it's not guaranteed to produce a monochrome character (on Apple implementations, it's a full-color emoji).
Use a mask, as described in this other similar question. This only works when you don't mind an opaque background (mine is not opaque) or when you can tell what's underneath your element with great certainty (and then it's rather hackish and ugly).
My current solution is to use a different picture to represent the white magnifying glass and the red magnifying glass that it changes for when you hover over the picture. It's an okay solution, but I was wondering if there was a way I could have just one picture of just one color, so that I don't have to go back to change the image color if I change my mind about the color.
I'm already doing extensive use of CSS3 and HTML5, so I don't mind going deeper as long as it's supported by the latest iterations of each major browser.
Fiddle with the numbers on this to get your color.
img.magnify:hover {
filter: hue-rotate(20deg);
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);
}
Found here - more options available
I'm wanting to create a neon sign of a logo for use on a website and also email signature.
I've a couple of questions I'm hoping a kind person can help me with.
For the email signature, I was thinking an animated gif would be best- just to be safe? However, I could use an html template- but I'm unsure the CSS animations used on the website version would render correctly in an (or numerous) email client(s)?
I've found this example of a CSS animated neon sign using typed letters in the mark-up. http://www.broken-links.com/tests/animations/
I was wondering if this same CSS animation technique would work with a flat image? How would the CSS know where the edges of the letters are? Would a transparent png work correctly using this technique? I've got the image as pixel or vector based if that helps?
This is a screen shot of the logo and quick mock up style of neon sign I want to create.
Thanks in advance!
The example you linked uses text only. It uses a #font-face rule to load a custom font, then animates the colour of the font. Its colour is flat.
What you are attempting to do involves rather more. The easiest solution would probably be to separate each letter into its own image, then you can animate the opacity property. This is probably the best you can hope for.
im not sure if i understand you well.. but this will apply a drop-shadow to a transparent image as applied on the neon text..
-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
filter: url(/assets/svg/shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)')";
filter: progid:DXImageTransform.Microsoft.S
This link also explains a lot about drop-shadow and box-shadow - due to the browser support it's not quite what I need for my project, but might be useful for someone else searching this drop shadow CSS trick.
http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison
I have a class called "button", I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.
However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the "satauration" value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..
I was thinking... if it is possible to change the "saturation" value (only) of the background-color so that my hover effect will still be useful for random colors.
Using filter currently seems to only work for webkit-based browsers..
-webkit-filter: saturate(3);
filter: saturate(3);
Demo | Source
Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);
Demo | Source
Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html
There are two solutions for this problem:
First, use a transparent png with a white to transparent gradient. On onHover, apply the image over the button. I haven't tried it but it looks promising.
Second, use a css inset dropshadow. With the parameters set correctly, you can easily manage the gradient effect.
You can also use rgba(r,g,b,a) for making changes to the underlying button color. But remember that the text value of the button will also get affected, giving you issues of usability.
using the guide at
http://developers.facebook.com/docs/reference/plugins/like
I am trying to put a like button on my web page. How can i change the color of text [Be the first of your friends to like this.]
You can change the colour theme of the whole button to either light or dark, but those are the only options allowed. See their brand guidelines:
While you may scale the size to suit your needs,
you may not modify the Like button in any other way
(such as by changing the design).
Yes, it can be done. I will give you the first steps (just to REMOVE COLOR), then you can do a further research on -webkit-filter: hue-rotate to change the color, if you don't want just to remove it.
First, add an #id to your FB code:
<div id="fboverlay" class="fb-like" data-href="YOURFACEBOOKADDRESS" data-width="300" data-layout="button_count" data-show-faces="false" data-send="false"></div>
You can leave your code as it is right now, just add that id="fboverlay" over there.
Then edit your css and add:
#fboverlay {
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
Or whatever else you'd like. And that's it.
Surely it's using CSS3, therefore it's not 100% compatible (specially with old browsers), but you know how it is...
YES it can be done
NO Facebook's brand guidelines don't seem to allow it
See below for technical details or try out the Facebook Button Colorizer tool I built.
Turning the button red (Chrome, Firefox, Safari, Opera)
It is possible to change the color of the button through CSS/SVG filters. These can influence the appearance of the contents of the iframe. Thanks to OleSchmitt for putting me on this track.
Webkit
With this code I am currently able to make the color of the button red on Webkit-based browsers:
stylesheet.css:
.fb-like {
-webkit-filter: hue-rotate(120deg);
}
Only tested on Chrome, but as it is a Webkit feature, should also work on Safari and Opera as these are also both Webkit-based.
Firefox
Firefox doesn't support the CSS equivalents of the SVG filters yet, but you can get hue-rotate to work by linking to an .svg filter. Create an svg filter (either external or internal) and refer to that in your css:
External SVG file
filters.svg:
<svg>
<filter id="fb-filter">
<feColorMatrix type="hueRotate" values="120"/>
</filter>
</svg>
Internal SVG fragment
page.html
<div class="fb-like" data-href="http://facebook.com"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div>
<svg height="0" width="0">
<filter id="fb-filter">
<feColorMatrix type="hueRotate" values="120"/>
</filter>
</svg>
stylesheet.css:
.fb-like {
/* simplest way, but currently only supported by webkit */
/* -webkit-filter: hue-rotate(120deg); */
/* Internal svg filter */
-webkit-filter: url(#fb-filter);
filter: url(#fb-filter);
/* External svg filter */
-webkit-filter: url(filters.svg#fb-filter);
filter: url(filters.svg#fb-filter);
}
Only one svg reference is needed, either to an external file or to an inline svg fragment. Not both at the same time.
Tested on Chrome, Firefox and Opera, should also work on Safari. Have a look at this jsFiddle.
UPDATE: It seems Chrome and Firefox treat the URL passed to the (-webkit-)filter rule slightly different. One browser is resolving it against the stylesheet the rule is in, the other against the html document. I had the strange situation that internal filters were working for Chrome but not Firefox and external filters were working for Firefox but not Chrome. So if it's not working for you, have a very close look at the URL. In the end I just placed the style rule that ties the SVG fragment to the fb-like button inline as well. That works on both browsers.
What about Internet Explorer?
IE is lagging behind on CSS support, but they wil get there eventually no doubt. Until then I welcome any suggestions for dealing with IE.
It's in an iframe, so you cannot change the color of the text.
What I did, cause I just had the same issue, is I changed the background color from dark gray to white (which I isolated the like button with the title of the page) So I changed the color of the title, the background to white and now you can see the dark lettering. It's the best I could do cause I can't change the font color.
It is in an iframe element on a different domain; you can not change it.
You can choose from light or dark theme.
All incarnations of the "Like" button are iframes, so you can't change them yourself.
As far as I can see, "light" and "dark" are the only customization options that Facebook offers.
Somewhat understandable from Facebook's point of view - they have a brand to protect. But sad for the site owner, of course.
#Mohammad Samim Samir inspired this alternate solution... he stated .fb-like-box, it didn't work for #isherwood only because of the appended "-box", ".fb-like" on it's own with followed by "{background:#f5f5f5;}", it would have worked.
".fb-like {
position: relative;
top: 3px;
left: -10px;
background-color: white;
width: 220px;
height: 20px;
color: white;
}"
What it looks like after applying the above style to stylesheet.css
It is possible, just create a css class by the name of .fb-like-box { background:#f5f5f5; }
This works:
a { color: hsla(0,100%,50%,0.2) }
And this does not:
img { color: hsla(0,100%,50%,0.2) }
Is there something like img { opacity: 1 } that allows to define hsl values to an image?
Text and images are 2 different things.
Text is rendered by the browser with the settings you provide (decoration, size font color ...)
an image is rendered in another way. the browser does not have information about what is on the image, and can therefor not alter the image itself.
Parameters like color etc will not have effect on the image.
By the way, the color parameter defines the text color.
Edit: If you want to apply a "color" to an image, you could create a div with a background image, and then in that div another div with a background color and an opacity. that way the transparant color will be overlayed on the image.
You can apply filters to images in some browsers: Firefox allows you to apply SVG filters to HTML content from CSS, but Chrome, Safari and Opera you'll need to wrap your content in SVG to apply filters to them, here's an example that works in Opera. There might not be an appropriate SVG filter for what you need, but it may be an avenue worth exploring if you have no other alternatives.
In Internet Explorer you might be able to use a static filter.
This works (press 'run code snippet' multi times):
.colors{ filter: hue-rotate(90deg); }
<img src="http://lorempixel.com/300/150/" heigh=150 >
<img src="http://lorempixel.com/300/150/" heigh=150 class="colors" >
degree is 0 to 360.
W3Schools.com: CSS filter Property
The color attribute is used as the drawing colour for text characters, borders and such. It does not apply to bitmap images.
Therefore, it doesn't matter whether you add alpha channel information to your colour value or not: The whole of the declaration doesn't apply.
opacity is different, because it specifies the alpha value for the whole element.
The only way to impact the colors of an image with css is to use opacity to control the alpha channel. Note that you could make a hack to (sort of) change the luminance of your image by placing another element on top of if. Ensure that it covers the image exactly by adjusting position and size, make the background-color black, and set the opacity to 0.5.
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
may be these filter help you to change a single image in different color sachem but they also have browser compatibility issue