Blogspot Vision

Tuesday, May 24, 2011

Another Magnifying Menu using CSS and HTML

SEE THE LIVE DEMO

Similar to the fisheye menu, this magnifying menu doesn't use javascript and only magnifies the image selected. The images are held as foreground images and have associated text (out of site) for text readers. The styling for this is very simple and the enlargement can be set to any value you please (so long as it does not completely cover adjacent images so that they cannot be selected.) This one gives a x2 enlargement which is probably the maximum value it should be set to for compatibility reasons.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

<ul id="enlarge">
<li><a href="#one"><img src="http://blogspotvision.com/icons/panda-social-icons/blogger.png" alt="image 1" title="Blogger" />Blogger</a></li>
<li><a href="#two"><img src="http://blogspotvision.com/icons/panda-social-icons/delicious.png" alt="image 2" title="Delicious" />Delicious</a></li>
<li><a href="#three"><img src="http://blogspotvision.com/icons/panda-social-icons/digg.png" alt="image 3" title="Digg" />Digg</a></li>
<li><a href="#four"><img src="http://blogspotvision.com/icons/panda-social-icons/facebook.png" alt="image 4" title="Facebook" />Facebook</a></li>
<li><a href="#five"><img src="http://blogspotvision.com/icons/panda-social-icons/flickr.png" alt="image 5" title="Flickr" />Flickr</a></li>
<li><a href="#six"><img src="http://blogspotvision.com/icons/panda-social-icons/reddit.png" alt="image 6" title="Reddit" />Reddit</a></li>

<li><a href="#one"><img src="http://blogspotvision.com/icons/panda-social-icons/rss.png" alt="image 1" title="RSS" />RSS</a></li>
<li><a href="#two"><img src="http://blogspotvision.com/icons/panda-social-icons/stumble_upon.png" alt="image 2" title="Stumble Upon" />Stumble Upon</a></li>
<li><a href="#three"><img src="http://blogspotvision.com/icons/panda-social-icons/technorati.png" alt="image 3" title="technorati" />technorati</a></li>
<li><a href="#four"><img src="http://blogspotvision.com/icons/panda-social-icons/twitter.png" alt="image 4" title="Twitter" />Twitter</a></li>
<li><a href="#five"><img src="http://blogspotvision.com/icons/panda-social-icons/vimeo.png" alt="image 5" title="vimeo" />vimeo</a></li>
<li><a href="#six"><img src="http://blogspotvision.com/icons/panda-social-icons/yahoo.png" alt="image 6" title="Yahoo!" />Yahoo!</a></li>
</ul>

Note: Change link and images. Each image will appear to the right of the the previous one.

Power Up Your 3D Digg Buttons and Icons

Specifications

Category: Social Media
Format: .png
Pixels: 32x32, 52x35, 64x64, 71x49, 72x38, 84x33, 97x59, 118x44, 128x128, 133x91, 142x55, 169x100, 189x71, 227x87
Total Files: 90

Create a Zero Dollar Ads Page using CSS and HTML

SEE THE LIVE DEMO

This tutorial will show you how to add a zero dollar ads page using CSS and HTML. Each grid space is 70x20 expanding with a white border to 75x25 with mouse over. Each image will be placed to the right of the previous one and can be linked to any specified page; serving as a good advertising or back linking widget.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

</ul>
<div class="clear"></div></div>

Note: Change link and images. Each image will appear to the right of the the previous one.

Saturday, March 12, 2011

CSS3 Garage Door Horizontal Menu

CSS Code Snippet
This section code should be inserted before the closing head tag.

/* Modernizer Enabled */
.csstransitions #garagedoor li {
 -webkit-transition: background-position 0.6s ease;
 -moz-transition: background-position 0.6s ease;
 -o-transition-property: background-position 0.6s ease;
}
.csstransitions #garagedoor li:hover {
 background-position: 0 -100px !important;
}

#garagedoor li#shutter1 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-africanplains.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter2 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-reptiles.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter3 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-aviary.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter4 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-arcticzone.jpg) 0 0 no-repeat; 
}
#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(http://www.blogspotvision.info/css/garage-door-menu/images/window.png) no-repeat bottom center;
   text-indent: -9999px;
}
</style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<ul id='garagedoor'> 
  <li id='shutter1'><a href='#1'>Link 1</a></li> 
  <li id='shutter2'><a href='#2'>Link 2</a></li> 
  <li id='shutter3'><a href='#3'>Link 3</a></li> 
  <li id='shutter4'><a href='#4'>Link 4</a></li> 
 </ul> 
  
 <script> 
 
  var jQueryScriptOutputted = false;
  
  function initJQuery() {
      
      if (typeof(jQuery) == 'undefined') {
      
          if (!jQueryScriptOutputted) {
              jQueryScriptOutputted = true;
              
              // Primitive way of loading scripts (no library yet)
              document.write("<scr" + "ipt src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\"></scr" + "ipt>");
          }
          setTimeout("initJQuery()", 50);
          
      } else {
       
       // jQuery way of loading scripts
       $.getScript('js/jquery.backgroundPosition.js', function() {
        
        // Just for demo
        $("h2").text('This Browser is using a jQuery fallback for this effect.');
        
        $("html").removeClass("csstransitions");
           
              // Set CSS in Firefox (Required to use the backgroundPosition js)
     $('#shutter1').css({backgroundPosition: '0px 0px'});
     $('#shutter2').css({backgroundPosition: '0px 0px'});
     $('#shutter3').css({backgroundPosition: '0px 0px'});
     $('#shutter4').css({backgroundPosition: '0px 0px'});
  
     // Animate the Shutter  
     $("#garagedoor a").hover(function() { 
           $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
         }, function() {
           $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
     });
     
       });
  
      }
              
  }
  
  if (!Modernizr.csstransitions) {
   initJQuery();
  }
 </script>

JavaScript Code Snippet
This section code should be inserted before the closing head tag.

Thursday, March 10, 2011

Exploding Image/logo for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

HTML Code Snippet
This section code should be inserted where you want the output to appear.

JavaScript Code Snippet
This section code should be inserted before the closing head tag.

Wednesday, March 9, 2011

Sexy Image Hover Effects using CSS3 for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

}
.clearfix{
 clear:both;
 float:none;
}
</style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

Tuesday, March 8, 2011

CSS3 - The future now - Carousel Slideshow

CSS Code Snippet
This section code should be inserted before the closing head tag.

Copyright (c) 2005-2011 Stu Nicholls - CSS play. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements. Bloggerized by http://www.blogspotvision.com
=================================================================== */

/* this is a CSS answer to fix the hover tilde problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}

.slide {width:8500px; position:absolute; height:320px; right:-2160px; text-align:right; top:20px;}
.window {width:726px; float:left; height:360px; position:relative; border:1px solid #000; margin:0 auto; overflow:hidden; background:#f0f0f0;
box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7);
-ms-box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.7);
}
.slide img {display:inline-block; width:240px; opacity:0.5; margin:70px 0 0 0;
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);

-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.slide .p7 {margin-right:0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.slide img:hover {width:480px; margin-left:-60px; margin-right:-60px; margin-bottom:-80px; margin-top:0; position:relative; z-index:100; opacity:1;
-o-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}
.slide .p1:hover ~ img.p21 {margin-right:-2460px;}
.slide .p2:hover ~ img.p21 {margin-right:-2220px;}
.slide .p3:hover ~ img.p21 {margin-right:-1980px;}
.slide .p4:hover ~ img.p21 {margin-right:-1740px;}
.slide .p5:hover ~ img.p21 {margin-right:-1500px;}
.slide .p6:hover ~ img.p21 {margin-right:-1260px;}
.slide .p7:hover ~ img.p21 {margin-right:-1020px;}
.slide .p8:hover ~ img.p21 {margin-right:-780px;}
.slide .p9:hover ~ img.p21 {margin-right:-540px;}
.slide .p10:hover ~ img.p21 {margin-right:-300px;}
.slide .p11:hover ~ img.p21 {margin-right:-60px;}
.slide .p12:hover ~ img.p21 {margin-right:180px;}
.slide .p13:hover ~ img.p21 {margin-right:420px;}
.slide .p14:hover ~ img.p21 {margin-right:660px;}
.slide .p15:hover ~ img.p21 {margin-right:900px;}
.slide .p16:hover ~ img.p21 {margin-right:1140px;}
.slide .p17:hover ~ img.p21 {margin-right:1380px;}
.slide .p18:hover ~ img.p21 {margin-right:1620px;}
.slide .p19:hover ~ img.p21 {margin-right:1860px;}
.slide .p20:hover ~ img.p21 {margin-right:2100px;}
.slide .p21:hover {margin-right:2280px;}

</style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.