Posts

Showing posts from March, 2016

responsive menu with select box, menu will change into select box in mobile view

Hello Guys,

Follow beloow steps for making your menu responsive in mobile view with select box.

Just decrease the width of result box.

Demo Url:- https://jsfiddle.net/csszilla/3as9e56b/

iphone, ipads screen sizes

Hello Guys,

These are all screen sizes.

640 *960
1536*2048
768 *1024
1242 *2208
750 *1334
640 * 1136
1024 *768
2048 *1536

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.

Making website text smooth

Hello Guys,

Add this css in your stylesheet.

html {

text-rendering: optimizeLegibility !important;

-webkit-font-smoothing: antialiased !important;

}



Ankit

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

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

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, …

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 ListComplete 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 CharactersISO 8859-1 CharactersISO 8859-1 SymbolsMath SymbolsGreek LettersMiscellaneous HTML entities 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.CharacterEntity NameEntity NumberDescription&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;Slash0&#48;Digit 01&#49;Digit 12&#50;Digit 23&#51;Digit 34&#52;Digit 45&#53;Digit 56&#54;Digit…

How can I use Font Awesome in Photoshop

Image
#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. Choose the Text toolClick on work space >> right click >> Paste.


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



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