How to rotate a div panel on mouse over using css

                                        We Can rotate the div panel on mouse over by using CSS styles. also the color of the rotating div panel change on the mouse over.
 you can change the angle of rotation by any degree in defining rotate(x deg). also you can add this property to an image by using the same id to the image tag.

                                 before rotate                                               after rotate

*copy the code and paste in the head section

<style type="text/css">
 #submenu
 {
      background-color:#0F9;
       -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out; }
           #submenu:hover
           {
           background-color:#F00;
            -webkit-transform: rotate(360deg);
             -moz-transform: rotate(360deg);
              -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
  transform: rotate(360deg);
   }
   </style>

* add the submenu id to the div panel

<div id="submenu"  style="width:100px; height:100px; margin-left:100px; margin-top:200px;" align="center" ><img src="../../../Public/Pictures/Sample Pictures/Hydrangeas.jpg" /></div>

How to enlarge a div panel on mouse over using css

                                                      In web designing there lots of styles can be applied to div panel for create a better user friendly site. By using css styles to div panel we can enlarge the div panel and its contents. if we place a picture in the div panel on the mouse over the picture and div panel are enlarging.   We can define the amount of enlarging dimension in the code also we can change the color of the enlarging div panel on the mouse over.

Before mouse over                                                          Aftermouse over


* copy the below code and paste it in the head section.

<style type="text/css">
 #submenu
 {
        background-color: #eee;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
 }
   #submenu:hover
  {
        background-color: #fc3;
       -webkit-transform:  scale(2);
       -moz-transform:  scale(2);
       -o-transform:  scale(2);
      -ms-transform:  scale(2);
       transform:  scale(2);
   }
   </style>

* create a div and call the id as submenu

<div id="submenu"  style="width:100px; height:100px;" align="center" ><img src="image url"/></div>

How to Add Auto scrollup button to the page

                                  

                                               In some website you design that contain large height dew to the large amount of data, so this provide some difficulty to the user to scroll from bottom to top . Here include
 some code for add autoscroll up button to the html page.

* Add below code to the head section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>   
        <link rel="stylesheet" type="text/css" href="style.css" />               
        <script type="text/javascript">
            $(document).ready(function(){
           
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('.scrollup').fadeIn();
                } else {
                    $('.scrollup').fadeOut();
                }
            });
           
            $('.scrollup').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 600);
                return false;
            });

        });
        </script>


* Add the code in the body to implement auto scrollup.
  
<a href="#" class="scrollup">Scroll</a>     

** In the head section we refer style.css . so copy below code and save it as style.css.

html, body, ul, ol, li, form, fieldset, legend{
            margin: 0;
            padding: 0;
        }

        h1, h2, h3, h4, h5, h6, p { margin: 0; }
       
       
        body{font-family: 'Droid Sans', sans-serif;background:#eee;color:#888;padding:0;margin:0;font-size: 72.5%; }
               
        p{
            margin-bottom:15px;
        }
       
        h2{
            text-align:center;
            font-size:32px;
            font-weight:400;
        }
       
        h4{
            text-align:center;
            font-size:18px;   
            font-weight:400;           
        }
       
        #wrap{
           
            width:960px;
            margin:0 auto;
        }
       
        #content{
            background:#fff;
            padding:10px 15px;
           
        }
       
        #header{
            margin-bottom:20px;
        }
        #footer{
            text-align:center;
        }
       
        .scrollup{
            width:40px;
            height:40px;           
            text-indent:-9999px;
            opacity:0.3;
            position:fixed;
            bottom:50px;
            right:100px;
            display:none;           
            background: url('top.PNG') no-repeat;
        }
     you can add any image you want to represent the auto scroll button at background:url('up picture')

How to Add auto page scroll to particular location

    
  In some site development process we require auto scrolling of page to the particular point of the web page on button click.   We can do this by using simple javascript. we can define the jumping point by write the pixel position in horizontal and vertical.

* Paste below code ] in head section.

<script type="text/javascript">
    function jumpScrollup() {
       window.scroll(0,0); // horizontal and vertical scroll targets
}
function jumpScroll() {
       window.scroll(0,800); // horizontal and vertical scroll targets
}
</script>

here (0,800) shows the pixel position that you want to jump. 0 for horizontal and 800 for vertical pixel position. you can change this pixel positions.

* Add below code to where you want to add the jumping function such as button click or links.

<a href="javascript:jumpScroll()">Link name</a>

you can use these codes to many times in a single page by changing the pixel positon.

Adobe photoshop cs5 class room in a Book.

   
  This is a training book from adobe for improving the ability in photoshop. This include the step by step of photoshop development. It provide best shortcut method for easy use of photoshop.

*Click VIEW to Read book online.  *Click DOWNLOAD to download pdf.