Make svg icon color on hover - html

I am new to svg icons and I just need to change the color of this icon on hover.
This is what I have so far: jsfiddle.net
.search-social :hover .search-icon {
fill: #72dcff;
}
It's just working from the fiddle as you can see since I applied.search-social on both of them.
But is this solution clean or do you suggest a better solution?

https://jsfiddle.net/e1491y39/4/
I think it's because you've got strokes and fills and separate pieces. So if you make it a single path, you could just use that single path. Otherwise, you could use a hover on the SVG itself. (See jsFiddle.)
.

Related

Force/3dTouch gesture on iphone gives weird background for <a> element

I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.

Color overlay on shape

I've got a small problem.
I want to create an overlay effect on the picture in the following jsfiddle.
http://jsfiddle.net/39gud4bh/1/
<div>
<img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png">
<img src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png">
</img>
</div>
#bubble {
}
I want the overlay to have the color #ff9f2d
How is this possible? Been trying litterally everything i could find. The problem is that the image (might not be in jsfiddle) is a shape with a transparent background. This causes all my attempts to background/foreground filter the color to recolor the whole square instead of just the shape.
Really need some help.
In advance - Thank you!
EDIT - Fiddle has been updated to entail the desired outcome of the CSS on the grey bubble.
I don't think you can turn that yellow bubble into gray one with just css.
You could do that if you reversed transparent and colored parts, and filled whole square with color. Example: http://jsfiddle.net/Arministrator/j5gLgyt8/
#bubble_img{
background:yellow;
}
#bubble_img:hover{
background:#ff9f2d;
Or you can use two images (css sprites even better) as shown in one of the answers.
This may not be the exact answer you're looking for, but maybe you can consider using Font Awesome. It'll be a clean, sharp bubble and you can easily resize and color it anyway you want with CSS. Another route would be to use SVG.
http://jsfiddle.net/wilchow/39gud4bh/5/
.fa-bubble {
font-size: 140px;
color: #333333;
cursor: pointer;
}
.fa-bubble:hover {
color: #ff9f2d;
}
Just move the second image over the first and set opacity
#overlay {z-index:100;opacity:0.2;position:relative;left:-131px;top:-3px;
}
<div>
<img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png">
</img>
<img id="overlay" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png">
</div>
As far as I know there is no CSS property that will allow you change a gray colored image into a colored one.
However, the reverse is possible using CSS filters.
So if we reverse the 'process' and make the colored image appear grey by default we can remove that styling, perhaps on hover, to achieve the effect we are looking for.
#bubble {
-webkit-filter: grayscale(1) brightness(0.3);
}
#bubble:hover {
-webkit-filter: none
}
<div>
<img id="bubble" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png" />
</div>
Jsfiddle Comparison
NOTE: CSS filters are highly experimental and browser support is poor.
This is an experimental technology
Because this technology's
specification has not stabilized, check the compatibility table for
the proper prefixes to use in various browsers. Also note that the
syntax and behavior of an experimental technology is subject to change
in future versions of browsers as the spec changes
MDN Reference
CanIUse.com Reference

change shape of font icon using css

I have downloaded font-icon from flaticon.com
to change font-icon color we can use css like this:
.flaticon-baby23:before {
content: "\e000";
color:red;
}
to change size we use this:
.flaticon-baby23:before {
content: "\e000";
font-size:15px;
}
Is ther any method to change shape of font-icon like given in the picture i found those from here is webiste
Those are various shape
how do i change icon shape???
my style
The way those icons are changing "shape" is that the border radius, background, and drop-shadow is being applied to them. The icon itself (the twitter bird) is not changing.
Depending on what you are trying to do, you might be able to do the same.
If you are trying to get the edges of the phone font icon to be rounded, that is not possible unless you find one that has that already. If, instead, you are trying to create a background for your icon similar to the twitter icons you showed, style the font icon with a border-radius, background-color and drop-shadow.
better download other font-icon packs or use background radious method

Recolor an SVG image via CSS "fill" doesn't work

I'm trying to recolor a simple SVG image with CSS (as I saw here http://codepen.io/chriscoyier/pen/evcBu ):
My HTML:
<img src="http://dl.dropbox.com/u/12091580/rwdicon/icon-menu.svg" class="myMenu" alt="menu">
My CSS:
.myMenu { fill: red; }
It's not working (see http://jsfiddle.net/sexyzane/1hojaccb/ )!
What am I doing wrong?
fill is used for svg element markup, you have an img element with an svg source, as such you cannot use fill to change the image color.
Instead, if you want to colorize the image, you may want to look into applying a CSS filter effect to the img tag, although this may not be able to achieve the exact result you're after.
Demo Fiddle

How to create the effect of neighboring non-rectangtular elements which change color independently?

How to do the arrows shown in this screenshot:
http://i.stack.imgur.com/odpCG.png
(Forget the gradients.)
I can do a single image containing the arrow, but I also need the elements to the left and right change colors.
It's possible with the use of pseudo elements. Chris Coyier explains here: http://css-tricks.com/triangle-breadcrumbs/
If you worried about supporting older versions of IE, then you can use IE8.js (or IE9.js): http://code.google.com/p/ie7-js/
You can use PNGs with transparency, you will need only one arrow per color.
Images is it, you can create a sprite with a bunch of options and dynamically switch or change on hover.
You could have an transparent image for the following conditions:
light blue forward arrow
light blue back
dark blue forward arrow
dark blue back
grey forward arrow
grey back
Then in the CSS you could use something like the following to get it to work:
.completed:after{ content: url(../images/lightblueforward.png); padding: 5px}
.completed:before{ content: url(../images/lightblueback.png); padding: -5px}
.current:after{...}
.current:before{...}
.notcompleted:after {...}
.notcompleted:before {...}
Haven't tried this, so you'll have to experiment. You will have to mess around with the paddings/margin on those elements to get to line up correctly.