how we add favicon icon in html

how we add favicon icon in html
Adding a favicon to a static HTML page

<!DOCTYPE html
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://csszilla.blogspot.in">

<link rel="icon" 
      type="image/png" 
      href="http://csszilla.blogspot.in">


[…]
</head>
[…]
</html>



add line in your HTML head part which is written in bold characters. 

css triangle with smooth edges, How to make 3-corner-rounded triangle in CSS

css triangle with smooth edges, How to make 3-corner-rounded triangle in CSS
Hello Guys,


Demo:- Click here


Try this


.triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; }
.triangle {
overflow: hidden;
position: relative;
margin: 7em auto 0;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
cursor: pointer;
pointer-events: none;
}
.triangle:before, .triangle:after {
position: absolute;
background: orange;
pointer-events: auto;
content: '';
}
.triangle:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(-30deg) scaleY(.866) translateX(24%);
}

.triangle:hover { overflow: visible; }
.triangle:hover:before, .triangle:hover:after { background: none; }
.triangle:hover, .triangle:hover:before, .triangle:hover:after {
border: dashed 1px;
}

how we change the color of image into black and white

how we change the color of image into black and white
hello guys,

want to change the color of image into black and white

try this code

ul.testimonials li a img {
    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");
    float: left;
}


ul.testimonials li a img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

scrollbar color change by css

scrollbar color change by css
hello guys

follow these css but unfortunately not support in mozilla firefox. If you want to support in all browsers follow this url , this example from using js and css both. Demo

<STYLE TYPE="text/css">
BODY {
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
.flexcroll {
width:400px;
height:200px;
overflow:scroll;
}
.flexcroll {
scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}

/* Let's get this party started */
.flexcroll::-webkit-scrollbar {
 width: 12px;
}

/* Track */
.flexcroll::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 -webkit-border-radius: 10px;
 border-radius: 10px;
}

/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
 -webkit-border-radius: 10px;
 border-radius: 10px;
 background: rgba(255, 0, 0, 0.8);
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
</STYLE>


<div class="flexcroll">
<p> The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!). </p>
<p>
<h5>The spirit of Rang De</h5>
The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour and exuberance and that is the significance we want our efforts to have for the people we reach out to.
</p>
<div>

cross browser styleable scrollbars with jQuery and CSS

cross browser styleable scrollbars with jQuery and CSS
jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant files in the head of your document all you need to to is call one javascript function to initialise the scrollpane. You can style the resultant scrollbars easily with CSS or choose from the existing themes. There are a number of different examples showcasing different features of jScrollPane and a number of ways for you to get support.


It is very simple to use jScrollPane. You will need to download the necessary files and place them on your server. Then you just need to include the relevant files in the <head> of your document:

Example:- Demo


HTML Entity List and Complete list of HTML entities

HTML Entity List and Complete list of HTML entities

HTML Entity List

Complete list of HTML entities with their numbers and names. Also included is a full list of ASCII characters that can be represented in HTML (i.e. printable characters).

ASCII Characters (Printable)

Only printable characters are displayed as control characters (0-31) shouldn't be present in HTML pages since they have no visual representations.

Character Entity Name Entity Number Description
 &nbsp;&#32;Space
!&#33;Exclamation mark
"&#34;Quotation mark
#&#35;Number sign
$&#36;Dollar sign
%&#37;Percent sign
&&amp;&#38;Ampersand
'&#39;Apostrophe
(&#40;Opening/Left Parenthesis
)&#41;Closing/Right Parenthesis
*&#42;Asterisk
+&#43;Plus sign
,&#44;Comma
-&#45;Hyphen
.&#46;Period
/&#47;Slash
0&#48;Digit 0
1&#49;Digit 1
2&#50;Digit 2
3&#51;Digit 3
4&#52;Digit 4
5&#53;Digit 5
6&#54;Digit 6
7&#55;Digit 7
8&#56;Digit 8
9&#57;Digit 9
:&#58;Colon
;&#59;Semicolon
<&lt;&#60;Less-than
=&#61;Equals sign
>&gt;&#62;Greater than
?&#63;Question mark
@&#64;At sign
A&#65;Uppercase A
B&#66;Uppercase B
C&#67;Uppercase C
D&#68;Uppercase D
E&#69;Uppercase E
F&#70;Uppercase F
G&#71;Uppercase G
H&#72;Uppercase H
I&#73;Uppercase I
J&#74;Uppercase J
K&#75;Uppercase K
L&#76;Uppercase L
M&#77;Uppercase M
N&#78;Uppercase N
O&#79;Uppercase O
P&#80;Uppercase P
Q&#81;Uppercase Q
R&#82;Uppercase R
S&#83;Uppercase S
T&#84;Uppercase T
U&#85;Uppercase U
V&#86;Uppercase V
W&#87;Uppercase W
X&#88;Uppercase X
Y&#89;Uppercase Y
Z&#90;Uppercase Z
[&#91;Opening/Left square bracket
\&#92;Backslash
]&#93;Closing/Right square bracket
^&#94;Caret
_&#95;Underscore
`&#96;Grave accent
a&#97;Lowercase a
b&#98;Lowercase b
c&#99;Lowercase c
d&#100;Lowercase d
e&#101;Lowercase e
f&#102;Lowercase f
g&#103;Lowercase g
h&#104;Lowercase h
i&#105;Lowercase i
j&#106;Lowercase j
k&#107;Lowercase k
l&#108;Lowercase l
m&#109;Lowercase m
n&#110;Lowercase n
o&#111;Lowercase o
p&#112;Lowercase p
q&#113;Lowercase q
r&#114;Lowercase r
s&#115;Lowercase s
t&#116;Lowercase t
u&#117;Lowercase u
v&#118;Lowercase v
w&#119;Lowercase w
x&#120;Lowercase x
y&#121;Lowercase y
z&#122;Lowercase z
{&#123;Opening/Left curly brace
|&#124;Vertical bar
}&#125;Closing/Right curly brace
~&#126;Tilde

ISO-8859-1 Characters

Full list of supported ISO-8859-1 characters. Notice that the names are case sensitive, hence if you want an uppercase letter, the name should also start with an uppercase letter.

Character Entity Name Entity Number Description
À&Agrave;&#192;Capital a with grave accent
Á&Aacute;&#193;Capital a with acute accent
Â&Acirc;&#194;Capital a with circumflex accent
Ã&Atilde;&#195;Capital a with tilde
Ä&Auml;&#196;Capital a with umlaut
Å&Aring;&#197;Capital a with ring
Æ&AElig;&#198;Capital ae
Ç&Ccedil;&#199;Capital c with cedilla
È&Egrave;&#200;Capital e with grave accent
É&Eacute;&#201;Capital e with acute accent
Ê&Ecirc;&#202;Capital e with circumflex accent
Ë&Euml;&#203;Capital e with umlaut
Ì&Igrave;&#204;Capital i with grave accent
Í&Iacute;&#205;Capital i with accute accent
Î&Icirc;&#206;Capital i with circumflex accent
Ï&Iuml;&#207;Capital i with umlaut
Ð&ETH;&#208;Capital eth (Icelandic)
Ñ&Ntilde;&#209;Capital n with tilde
Ò&Ograve;&#210;Capital o with grave accent
Ó&Oacute;&#211;Capital o with accute accent
Ô&Ocirc;&#212;Capital o with circumflex accent
Õ&Otilde;&#213;Capital o with tilde
Ö&Ouml;&#214;Capital o with umlaut
Ø&Oslash;&#216;Capital o with slash
Ù&Ugrave;&#217;Capital u with grave accent
Ú&Uacute;&#218;Capital u with acute accent
Û&Ucirc;&#219;Capital u with circumflex accent
Ü&Uuml;&#220;Capital u with umlaut
Ý&Yacute;&#221;Capital y with acute accent
Þ&THORN;&#222;Capital thorn (Icelandic)
ß&szlig;&#223;Lowercase sharp s (German)
à&agrave;&#224;Lowercase a with grave accent
á&aacute;&#225;Lowercase a with acute accent
â&acirc;&#226;Lowercase a with circumflex accent
ã&atilde;&#227;Lowercase a with tilde
ä&auml;&#228;Lowercase a with umlaut
å&aring;&#229;Lowercase a with ring
æ&aelig;&#230;Lowercase ae
ç&ccedil;&#231;Lowercase c with cedilla
è&egrave;&#232;Lowercase e with grave accent
é&eacute;&#233;Lowercase e with acute accent
ê&ecirc;&#234;Lowercase e with circumflex accent
ë&euml;&#235;Lowercase e with umlaut
ì&igrave;&#236;Lowercase i with grave accent
í&iacute;&#237;Lowercase i with acute accent
î&icirc;&#238;Lowercase i with circumflex accent
ï&iuml;&#239;Lowercase i with umlaut
ð&eth;&#240;Lowercase eth (Icelandic)
ñ&ntilde;&#241;Lowercase n with tilde
ò&ograve;&#242;Lowercase o with grave accent
ó&oacute;&#243;Lowercase o with acute accent
ô&ocirc;&#244;Lowercase o with circumflex accent
õ&otilde;&#245;Lowercase o with tilde
ö&ouml;&#246;Lowercase o with umlaut
ø&oslash;&#248;Lowercase o with slash
ù&ugrave;&#249;Lowercase u with grave accent
ú&uacute;&#250;Lowercase u with acute accent
û&ucirc;&#251;Lowercase u with circumflex accent
ü&uuml;&#252;Lowercase u with umlaut
ý&yacute;&#253;Lowercase y with acute accent
þ&thorn;&#254;Lowercase thorn (Icelandic)
ÿ&yuml;&#255;Lowercase y with umlaut

ISO-8859-1 Symbols

Full list of supported ISO-8859-1 symbols in HTML.

Symbol Entity Name Entity Number Description
 &nbsp;&#160;Non-breaking space
¡&iexcl;&#161;Inverted exclamation mark
¢&cent;&#162;Cent
£&pound;&#163;Pound
¤&curren;&#164;Currency
¥&yen;&#165;Yen
¦&brvbar;&#166;Broken vertical bar
§&sect;&#167;Section
¨&uml;&#168;Spacing diaeresis
©&copy;&#169;Copyright
ª&ordf;&#170;Feminine ordinal indicator
«&laquo;&#171;Opening/Left angle quotation mark
¬&not;&#172;Negation
­&shy;&#173;Soft hyphen
®&reg;&#174;Registered trademark
¯&macr;&#175;Spacing macron
°&deg;&#176;Degree
±&plusmn;&#177;Plus or minus
²&sup2;&#178;Superscript 2
³&sup3;&#179;Superscript 3
´&acute;&#180;Spacing acute
µ&micro;&#181;Micro
&para;&#182;Paragraph
¸&cedil;&#184;Spacing cedilla
¹&sup1;&#185;Superscript 1
º&ordm;&#186;Masculine ordinal indicator
»&raquo;&#187;Closing/Right angle quotation mark
¼&frac14;&#188;Fraction 1/4
½&frac12;&#189;Fraction 1/2
¾&frac34;&#190;Fraction 3/4
¿&iquest;&#191;Inverted question mark
×&times;&#215;Multiplication
÷&divide;&#247;Divide

Math Symbols

Full list of all supported math symbols in HTML.

Symbol Entity Name Entity Number Description
&forall;&#8704;For all
&part;&#8706;Part
&exist;&#8707;Exist
&empty;&#8709;Empty
&nabla;&#8711;Nabla
&isin;&#8712;Is in
&notin;&#8713;Not in
&ni;&#8715;Ni
&prod;&#8719;Product
&sum;&#8721;Sum
&minus;&#8722;Minus
&lowast;&#8727;Asterisk (Lowast)
&radic;&#8730;Square root
&prop;&#8733;Proportional to
&infin;&#8734;Infinity
&ang;&#8736;Angle
&and;&#8743;And
&or;&#8744;Or
&cap;&#8745;Cap
&cup;&#8746;Cup
&int;&#8747;Integral
&there4;&#8756;Therefore
&sim;&#8764;Similar to
&cong;&#8773;Congurent to
&asymp;&#8776;Almost equal
&ne;&#8800;Not equal
&equiv;&#8801;Equivalent
&le;&#8804;Less or equal
&ge;&#8805;Greater or equal
&sub;&#8834;Subset of
&sup;&#8835;Superset of
&nsub;&#8836;Not subset of
&sube;&#8838;Subset or equal
&supe;&#8839;Superset or equal
&oplus;&#8853;Circled plus
&otimes;&#8855;Circled times
&perp;&#8869;Perpendicular
&sdot;&#8901;Dot operator

Greek Letters

Full list of all supported greek letters in HTML.

Letter Entity Name Entity Number Description
Α&Alpha;&#913;Alpha
Β&Beta;&#914;Beta
Γ&Gamma;&#915;Gamma
Δ&Delta;&#916;Delta
Ε&Epsilon;&#917;Epsilon
Ζ&Zeta;&#918;Zeta
Η&Eta;&#919;Eta
Θ&Theta;&#920;Theta
Ι&Iota;&#921;Iota
Κ&Kappa;&#922;Kappa
Λ&Lambda;&#923;Lambda
Μ&Mu;&#924;Mu
Ν&Nu;&#925;Nu
Ξ&Xi;&#926;Xi
Ο&Omicron;&#927;Omicron
Π&Pi;&#928;Pi
Ρ&Rho;&#929;Rho
Σ&Sigma;&#931;Sigma
Τ&Tau;&#932;Tau
Υ&Upsilon;&#933;Upsilon
Φ&Phi;&#934;Phi
Χ&Chi;&#935;Chi
Ψ&Psi;&#936;Psi
Ω&Omega;&#937;Omega
α&alpha;&#945;alpha
β&beta;&#946;beta
γ&gamma;&#947;gamma
δ&delta;&#948;delta
ε&epsilon;&#949;epsilon
ζ&zeta;&#950;zeta
η&eta;&#951;eta
θ&theta;&#952;theta
ι&iota;&#953;iota
κ&kappa;&#954;kappa
λ&lambda;&#955;lambda
μ&mu;&#956;mu
ν&nu;&#957;nu
ξ&xi;&#958;xi
ο&omicron;&#959;omicron
π&pi;&#960;pi
ρ&rho;&#961;rho
ς&sigmaf;&#962;sigmaf
σ&sigma;&#963;sigma
σ&sigma;&#963;sigma
τ&tau;&#964;tau
υ&upsilon;&#965;upsilon
φ&phi;&#966;phi
χ&chi;&#967;chi
ψ&psi;&#968;psi
ω&omega;&#969;omega
ϑ&thetasym;&#977;Theta symbol
ϒ&upsih;&#978;Upsilon symbol
ϖ&piv;&#982;Pi symbol

Miscellaneous HTML entities

List of miscellaneous HTML entities.

€Œ €Œ Œ €Œ €Œ €Œ €Œ Œ €Œ Œ €Œ €Œ Œ Œ €Œ Œ €Œ €Œ €Œ €Œ €Œ €Œ Œ €Œ €Œ €Œ €Œ
Symbol Entity Name Entity Number Description
Œ&OElig;&#338;Uppercase ligature OE
œ&oelig;&#339;Lowercase ligature OE
Š&Scaron;&#352;Uppercase S with caron
š&scaron;&#353;Lowercase S with caron
Ÿ&Yuml;&#376;Capital Y with diaeres
ƒ&fnof;&#402;Lowercase with hook
ˆ&circ;&#710;Circumflex accent
˜&tilde;&#732;Tilde
&ensp;&#8194;En space
&emsp;&#8195;Em space
&thinsp;&#8201;Thin space
&zwnj;&#8204;Zero width non-joiner
&zwj;&#8205;Zero width joiner
&lrm;&#8206;Left-to-right mark
&rlm;&#8207;Right-to-left mark
&ndash;&#8211;En dash
&mdash;&#8212;Em dash
&lsquo;&#8216;Left single quotation mark
&rsquo;&#8217;Right single quotation mark
&sbquo;&#8218;Single low-9 quotation mark
&ldquo;&#8220;Left double quotation mark
&rdquo;&#8221;Right double quotation mark
&bdquo;&#8222;Double low-9 quotation mark
&dagger;&#8224;Dagger
&Dagger;&#8225;Double dagger
&bull;&#8226;Bullet
&hellip;&#8230;Horizontal ellipsis
&permil;&#8240;Per mille
&prime;&#8242;Minutes (Degrees)
&Prime;&#8243;Seconds (Degrees)
&lsaquo;&#8249;Single left angle quotation
&rsaquo;&#8249;Single right angle quotation
&oline;&#8254;Overline
&euro;&#8364;Euro
&trade;&#8482;Trademark
&larr;&#8592;Left arrow
&uarr;&#8593;Up arrow
&rarr;&#8594;Right arrow
&darr;&#8595;Down arrow
&harr;&#8596;Left right arrow
&crarr;&#8629;Carriage return arrow
&lceil;&#8968;Left ceiling
&rceil;&#8969;Right ceiling
&lfloor;&#8970;Left floor
&rfloor;&#8971;Right floor
&loz;&#9674;Lozenge
&spades;&#9824;Spade
&clubs;&#9827;Club
&hearts;&#9829;Heart
&diams;&#9830;Diamond

How can I use Font Awesome in Photoshop

#1. Download and install the font

Go to Font Awesome page and press the Download button.
Decompress the file.
Find this folder: /font-awesome-4.0.3/fonts/
Copy the file FontAwesome.otf to your Fonts folder. The location of this folder depends on your operating system. In Windows 7 the folder is located in: C:\Windows\Fonts\
#2. Add icons to your PSD

Open your browser and go to the icons page ie "http://fortawesome.github.io/Font-Awesome/cheatsheet/".
From the list of available icons select one >> right click >> Copy.





Open Photoshop and start a new file by going to File >> New >> OK.
  1. Choose the Text tool
  2. Click on work space >> right click >> Paste.



  1. Select the text (which at this point is just a square).
  2. Select Font Awesome to get the icon look.




reference by : https://www.ostraining.com/blog/webdesign/fontawesome-psd/