Clever Geek Handbook

Rotate black icons in CSS?

It's amazing how these guys at http://sociali.st turn their black icons into their CSS ("with love" section). New to this and cannot understand.

Is it their property that allows me to change black icons to gray ones?

+3


source to share


3 answers


You can do it yourself:

div{
  background: url(path.jpg) no-repeat;
}
div:hover{
  opacity: .4;
}

And by the way, what's good to do with black images.

But if you want to change the color image to gray, you can use this:



div:hover{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

If you want to use opacity, see the code for cross-browser compatibility:

 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
+5


source


They use sprites for their black images with an opacity of .4. After: hover, they remove the opacity constraint. This is what the sprites look like at opacity 1:

enter image description here



Clarified with firebug and element validation.

+4


source


They use the : hover style to turn it gray:

.button.button-app-store:hover {
   background: #262626;
   ...

The hover pseduo class is useful for highlighting the actionable, but it can also be used to do some nice tricks like cascading dropdown menus. It is commonly used for links and buttons to create this effect.

Using Chrome developer tools, you can inspect this element and then simulate the hover state like this:

enter image description here

which tells you how they achieve this effect.

Now if you clear the hover state, you will see it reverts to black through this style:

.button.button-app-store {
   background: #171717;
   ...
+3


source






More articles:


All Articles