Posts

Showing posts from March, 2016

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

By -
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/
Post a Comment
Read more

iphone, ipads screen sizes

By -
Hello Guys, These are all screen sizes. 640 *960 1536*2048 768 *1024 1242 *2208 750 *1334 640 * 1136 1024 *768 2048 *1536
Post a Comment
Read more

how we add favicon icon in html

By -
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. 
Post a Comment
Read more

Making website text smooth

By -
Hello Guys, Add this css in your stylesheet. html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } Ankit
Post a Comment
Read more

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

By -
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:aft...
Post a Comment
Read more

how we change the color of image into black and white

By -
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"); }
Post a Comment
Read more

scrollbar color change by css

By -
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 {  -webk...
Post a Comment
Read more

cross browser styleable scrollbars with jQuery and CSS

By -
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
Post a Comment
Read more

HTML Entity List and Complete list of HTML entities

By -
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 ISO 8859-1 Characters ISO 8859-1 Symbols Math Symbols Greek Letters Miscellaneous 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. 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 ...
Post a Comment
Read more

How can I use Font Awesome in Photoshop

By -
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 tool Click 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/
Post a Comment
Read more