Skip to main content

Posts

Showing posts from 2016

How to make colored image gray scale on hover? CSS Tricks

To make a colored image turn into gray scale on hover and vice versa can be achieved by using some simple css tricks. We will see both the codes here.

1) Turn Colored image to Gray Scale on hover:

CSS:
img { filter: gray; filter: grayscale(1); -webkit-filter: grayscale(0); } img:hover { filter: none; -webkit-filter: grayscale(1); }
HTML:

<div id="wrapper"> <img id="myImage" src="IMAGE.JPG"/></div>
In the html part, replace IMAGE.JPG with the link to the source image.


2) Turn Gray Scale image to Colored on hover.

CSS:
img { filter: gray; filter: grayscale(1); -webkit-filter: grayscale(1); } img:hover { filter: none; -webkit-filter: grayscale(0); }
HTML:
<div id="wrapper"> <img id="myImage" src="IMAGE.JPG"/></div>
Same as earlier, replace the IMAGE.JPG with the actual image source link.



Font Awesome CSS links

Here are the list of css link to adding Font Awesome to your website.


Fontawesome Version 4.5.0: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


Fontawesome Version 4.6.3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Keyboard Shortcuts to make symbols in windows

Many times we come across some application where we wish to use symbols but we do not have a direct option to do that.

One way to do it is to visit the Character Map in windows.

However second option is to use keyboard shortcuts to make symbols.

Find a few of them below :

HOW TO MAKE SYMBOLS WITH KEYBOARD Alt + 0153 =  ™ (trademark symbol) Alt + 0169 = ©  (copyright symbol)

Alt + 0174 = ®  (registered trademark symbol)


Alt + 0176 = °  (degre­e symbol)


Alt + 0177 = ±  (plus-or­-minus sign)


Alt + 0182 = ¶  (paragraph mark)


Alt + 0190 = ¾ (fractio­n, three-fourths)

Alt + 0215  = × (multi­plication sign)

Alt + 0162  = ¢ (the cent sign)

Alt + 0161 = ¡  (upside down exclamation point)


Alt + 0191 = ¿  (­upside down question mark)


Alt + 1 = ☺ (smiley face)


Alt + 2 = ☻ (bla­ck smiley face)

Alt + 15 = ☼ (su­n)

Alt + 12 = ♀ (female sign)

Alt + 11 = ♂ (m­ale sign)

Alt + 6 =