Wednesday, June 12, 2013
in HTML there is too many option to accomplish a small task. Every kind of option make a different result. In this post I will show you how you can design ul li better way 
<ul>
<li> List item </li>
</ul>
Here is a some guideline proper Guideline using list-style-type property you can show the circle, disk square shape just before the list item. This is nice way.
If you have icon instead of shape that html provided then you need to use list-style-image If this thing not fit with your requirement then you need to set it to none and use non-repeated images (Through background-image) that will be shown at the position whichever you want through Background position
If you have the theme of page in your mind (Everything is ready and you just need to write html to make it finish) then setting icon is good choice. Remember that You can’t change the color of image (icon in this context) by using any property in css. Image is static which not allowed you to change their color by any css property.
in case of PNG some cased allowed you to modify the background color of image but maybe This implementation going buggy in old browser.
In this case I would like to set the icon through content property in Css and change the color whenever we want through color property in css.
This thing going something as
li:before{
content:”xyz”;
color:red;
}
Remember that xyz is utf8 based entity character which can be a pretty looking UTF8 icon shown before li. You can modified the color of this thing whenever you want.
For better example suppose you have font which contain a lot of pretty icon. Now you can use them in your web-apps through HTML5 features which allowed you to embedded the custom fonts (font-face , cufon)
This way you can implement the typography you like to implement in your web-apps. For example see a nice example called Font-awesome which provide a lot of icon.
in Font-awesome you need to tried thing like
<li><i class="icon-expand-alt"></i> </li>
in this li you have shown the expand alternative icon in the list-item. If you have write a lot of li then this code is not looking good.
You can tried it also this way
li:before{
content:”myiconcode”;
font-family:”Fontawesome”;
}
Now open the firebug and copy the content value for the icon you have set and replace it with “myiconcode”. Now you not need to write I with icon class anymore. this way you code look some more beautiful.
As fontawesome use their own font we can implement our own fonts (or whatever we can do). Now remember that this thing have one more benefit . The benefit is setting color on anytime is possible. You can increase the font size to make icon bigger and smaller.
Thanks for read this post. The information I post in this blog-post is thing I learned from other people. The title of this post is about list-icon but you can applied the font-icon using x:before on any element like <div> , <span>.
Cheers
Tuesday, June 4, 2013
In this post I will show you how to create a box and wrapper for page that have shadow effect using css3.
For make this effect we use box-shadow
<div class="container">
<div class="container-hold pull-left">
<div class="container-hold-top pull-left">
</div>
</div>
</div>
Here is the css
.container {
box-shadow: 10px 10px 5px #888;
}
.container .container-hold {
box-shadow: -8px 10px 5px #888;
width: 100%;
height: 100%;
}
.container .container-hold .container-hold-top {
box-shadow: 10px -10px 8px #888;
height: 100%;
width: 100%;
}
This code make shadow on left ,right and top side of wrapper.
This is the syntax for box-shadow
Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
Check my code that I not use spread for box-shadow. You can try it to make spread your box-shadow more.
Here is some link to great post
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html
http://www.css3.info/preview/box-shadow/
If you miss something in my post Please comment me so I can improve it.
Monday, March 11, 2013
I was quite Excited to hear that I got a shipment come from Microsoft. I open it and this is the thing I got in my hand 
. It's a shiny glass cube with writing etched in the middle of it..
Do you want to run something when you open your system. Here is a simple way to do this in Windows 8.
press Win + R and type “%appData%” then press Enter
You are now in Roaming folder.
Follow this folder “Microsoft\Windows\Start Menu\Programs\Startup” in explorer.
Make a shortcut of apps you want to run and paste them on this folder.
This way you can run them automatically when you start your own system.
If you want to disable startup for any of executable you have set previously then you can use Task manager to disable them to no further run when you start your own PC. Look at the image below.
Friday, March 8, 2013
Few days ago I hear about Succinctly series that syncfusion made for us. You can check all these resources at http://www.syncfusion.com/resources/techportal The good thing about these books are they are freely available & it’s nicely written for beginners.
For example if you look at http://www.syncfusion.com/resources/techportal/ebooks/javascript “JavaScript Succinctly” then you found that their is all code is nicely written for anyone to easily understand. “JavaScript Succinctly” is only 143 pages book so this not make you bore once you start reading the book.
http://www.syncfusion.com/resources/techportal
Saturday, March 2, 2013
If you have installed Github for Windows and still got trouble when you tried to running command on CMD then here is a sollution to trouble.
Open this C:\Users\myusername\AppData\Local\GitHub\PortableGit_93e8418133eb85e81a81e5e19c272776524496c6\libexec\git-core in your windows explorer. Now copy this path.
Now go to Start –> Edit environment variable > search the System Variable “path” Edit the value. Add ; and the path you have just copied. Now you can run git commands on Cmd.
If you still have trouble that some DLL is missing then download Git from http://git-scm.com/
Now after installing this you can Follow http://stackoverflow.com/questions/3431361/git-for-windows-the-program-cant-start-because-libiconv2-dll-is-missing to solve the issue for missing DLL.
Thanks for read my post
Recently I hear about IE 10 launch for windows 7. It’s sound pretty good to me. I have check if this have something good for me as a designer’s prospective. I start checking the code that is break in Ie9 or old browser. I found this code still not work in IE10 for me 
. Same way code work without any issue in Firefox and Chrome perfectly.
So all I want is writing Custom CSS for IE browser. Unfortunately it will not work In IE10. Microsoft have removed this feature in Ie10 see link1 link2 This means the code I have written for legacy support doesn’t work in Ie10.
This means this code will no longer work in IE10
<!--[if IE]>
<link rel="stylesheet" href="assets/ie.css">
<![endif]—>
if you tried to use trick like jQuery.browser() then after jQuery 1.9 it’s no longer work too. see jQuery upgrade guide
script from http://www.impressivewebs.com/ie10-css-hacks/
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]—>
Will not work. But you can use this code by remove comments and direct run the code without comments. Write above code this way.
<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script>
Now you have class ie10 on your web-pages’s html tag. Now when you write Css you can write custom css for Ie10 this way. This will only work in Ie10
UPDATE 17 MARCH
There is no need to add extra class .ie10 for Ie10. Because we need to run the ie.css in IE10 as what we do for earlier version. adding Ie.css dynamically is enough to solve this issue.
<script>
if (/*@cc_on!@*/false) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="assets/ie.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
</script>
This code will add ie.css in Ie10. Cheers
Thanks for read my post.
Sunday, January 27, 2013
Sometime people things to get back the settings of software they used last time on another computer. Sometime installing OS means lost the Settings made in Firefox and Chrome browser.
portableapps.com provide the portable version of software which you can backup and able to use them on another computer without loosing any settings.
This way you never lost History,plugins and custom settings you have applied in Firefox,chrome & skype.
Portableapps is better way to run software. It’s not make any Registry on computer. You can backup your software with Settings and able to use them on another computer without doing same settings again and again.
http://portableapps.com/
Friday, January 25, 2013
in javascript we can use document.readyState to know the state of page.
Some state of page is
“loading” :- when page is still loading and script is executed.
“interactive” :- when page is finished parsing but still loading sub-resources.
“completed” :- page is completely loaded.
check a little demo at http://f1beta.com/demo/document.readyState.html
Thursday, January 17, 2013
In Javascript if you try to run this code then only #4 statement will print the value.
<script type="text/javascript">
function print(obj){
console.log(obj);
}
if(undefined){
print ("undefined");
}
if(null){
print('null');
}
if(isNaN(null)){
print('isNaN(null)');
}
if(isNaN(undefined)){ // only this statement will come true
print('isNaN(undefined)');
}
</script>