AN@ND-Graphc's Jockey

Tuesday, April 29, 2014

Created my New Website -

http://anand-ui-jockey.yolasite.com

Monday, July 1, 2013

IE Cross Browser & Compatibility Issue for IE8, IE9

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

Will fix....all IE 8 & IE9 issues :)

Saturday, June 23, 2012

SEMANTIC HTML5 LAYOUT

HTML code for page layout

<body>
 <div id="pageContainer">
  <header id="pageHeader"></header>
   <div id="contentContainer" class="clearfix">
   <nav id="pageNav"></nav>

    <section id="pageSection">
    <header class="sectionHeader"></header>
    <article class="sectionArticle"></article>
    <footer class="sectionFooter"></footer>
   </section>

    <aside id="pageAside"></aside>
  </div>
  <footer id="pageFooter"></footer>
 </div>
</body>

Friday, June 22, 2012

CSS SPRITES !!!!


sprite image

Design a image like above for making any elements like mouseover menu,buttons etc., and make use of single image instead of using multiple in the websites.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Enjoy in making CSS SPRITES !!!!

Thursday, June 21, 2012

Simple HTML 5 Layout

HTML 5 Layout - Tags with Structure

The Most prominent additions in HTML 5 are tags like <header>, <footer>, <aside>, <nav>, <audio> etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags i listed above clearly explains that :

<header> = Header (Head area of the site)
<nav> = Navigation (Menu/Navigation Area)
<footer> = Footer Area
<aside> = An area on a side (Side Bar)

Normal HTML Structure

<!Doctype html>
<html lang="en">
<head>
         <title>Your Page title</title>
</head>
<body>
   <!-- Define Header -->
       <header>
       </header>
   <!-- End Header -->
<!-- Define Navigation/Menu -->
     <nav>
     </nav>
<!-- End Navigation -->
<!-- Main content area -->
<section>
</section>
<!-- End of Main content area -->
<!-- Sidebar -->
<aside>
</aside>
<!-- End Sidebar -->
<!-- Footer -->
<footer></footer>
<!-- End of Footer -->
</body>
</html>

Defining Header Tag:

<header>
<h1>HTML 5 Tutorial Sample </h1>
</header>

Defining Navigation Area with Few links in it:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>

Stylizing the Navigation with CSS3 for Rounded Corners:

nav {
width:77%;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; //for opera
background:#f3f3f3;
border:1px solid #cccccc;
position:absolute;
}
nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
width:940px;
}
nav ul li {
float:left;
}
nav ul li a{
margin-right:20px;
display:block;
line-height:40px;
}

Defining Sidebar <aside>:

<aside>
<section>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</aside>

Defining the Footer:

<footer>
<section>Anything you want to put in footer goes here. </section>
</footer>

Stylizing the Footer:

footer{background:#666666;
border-top:1px solid #cccccc;
padding:10px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-radius:5px; // for Opera
text-align:center;
color:#ffffff;
}

Wednesday, June 20, 2012

Cool CSS3 Features !!!!

Border Radius

The ability to have rounded corners without images and JavaScript is one of the most sought after features of CSS3.

#my_id {
 height: 100px;
 width: 100px;
 border:  1px solid #FFF;
 /* For Mozilla: */
 -moz-border-radius: 15px;
 /* For WebKit: */
 -webkit-border-radius: 15px;
}

Border Images

 Adding Images to the border:

#my_id {
 /* url, top image, right image, bottom image, left image */
 border-image:  url(border.png) 30 30 30 30 round round;
}

Multi-Column Layout

Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout. It offers a new way to arrange text in more of a “news paper” type way. You have the choice to pick the amount of columns, the column width, column gap width, and column separator. A feature like this was not possible before CSS3. Here is how you do it:

#my_id {
 text-size: 12px;
 /* For Mozilla: */
 -moz-column-gap: 1em;
 -moz-column-rule: 1px solid #000;
 -moz-column-count: 3;
 /* For WebKit: */
 -webkit-column-gap: 1em;
 -webkitcolumn-rule: 1px solid #000;
 -webkit-column-count: 3;
}

Multiple Backgrounds

In the past, having layered backgrounds required you to create more than one element. But now, with CSS3 you can have multiple backgrounds on a single element. This will eliminate a huge annoyance that we have had to deal with in the past. Here’s how it works:

#my_id {
 background:
  url(topbg.jpg) top left no-repeat,
  url(middlebg.jpg)center left no-repeat,
  url(bottombg.jpg) bottom left no-repeat;
}

Opacity

#my_id

{

background: #F00; opacity: 0.5;

}

Box-shadow, one of CSS3′s best new features

Box-shadow

Shadow-outer

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

This property will form the box shadow outside. And it will works on Firefox, Safari/Chrome, Opera and IE9.

Examples:

Example A shows a shadow offset to the left and top by 5px:

#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Example B shows the same shadow with a blur distance of 5px:

#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Example C shows the same shadow with a spread distance of 5px:

#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Example D shows the same shadow with both a blur distance of 5px and a spread distance of 5px:

#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Example E shows a shadow with no offset and a blur distance of 5px:

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Example F shows a shadow with no offset and both a blur distance of 5px and a spread distance of 5px:

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Creating an inner shadow with the ‘inset’ keyword

An optional ‘inset‘ keyword can be supplied, preceding the length and color values. If present, this keyword causes the shadow to be drawn inside the element. According to the specification:

An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.

#Example_G {
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}

Example H shows the same inner shadow with a blur distance of 5px:

#Example_H {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}

Example I shows the same inner shadow with a spread distance of 5px:

#Example_I {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}

Example J shows the same inner shadow with both a blur distance of 5px and a spread distance of 5px:

#Example_J {
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}

Example K shows an inner shadow with no offset and a blur distance of 5px:

#Example_K {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inset 0 0 5px #888;
}

Example L shows an inner shadow with no offset and both a blur distance of 5px and a spread distance of 5px:
#Example_L {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;

That's it.......Create shadows.....

Translate