Shane Strong » Web Design http://www.shanestrong.com Lansing WordPress Web Developer Search Engine Optimization Website Consultant Theme Developer Magento Developer Lansing Michigan Fri, 03 Feb 2012 15:45:52 +0000 en hourly 1 http://wordpress.org/?v= CSS3 Box-Shadow http://www.shanestrong.com/css/css3-box-shadow http://www.shanestrong.com/css/css3-box-shadow#comments Fri, 03 Feb 2012 15:45:52 +0000 Shane http://www.shanestrong.com/?p=1958 It seems like more and more website want to have the newest look and the newest techniques involved with them. A really cool technique that I use quite often is the CSS3 Box Shadow. This is kind of like doing a drop shadow in Photoshop except it is done with CSS. Why should you do a drop shadow this way? Well there are a couple reasons. One really simple because you can. A drop shadow is something that has been used in Photoshop for some time now but there has really never been a way to create a drop shadow in web. Two and the most important because it is created in CSS you do not have to save a gigantic image that has the drop shadow.

What are the down falls to using Box Shadows

Well unfortunately like most of the new techniques that are created everyday some browsers don’t support this. Well what browser do support this. Pretty much all of the popular browsers new versions. The Box Shadow is supported with IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. As most people know Safari uses a little bit different coding style you will have to create this with the -webkit. You can also use the -moz setting for Mozilla but you don’t have to.

How to implement Box Shadows

Like all other CSS you first have to determine the container that you want to place this on. Whether it is a div, class, id, or any other element. This property has 6 parts. The first part is the h-shadow or horizontal shadow. The next part is the v-shadow or vertical shadow. The third part is the blur, which is optional. The fourth is the spread and this is also optional. The fifth is the color and this can handle all the types whether it is hex or rgb. Now the sixth part I am going to save for a little later.

What Box Shadow should look like.

So as stated above you have 6 parts to this that you can fill out. There are 3 that are optional. So lets see what this looks like.

.yourclass {
   -moz-box-shadow: 3px 3px 3px 3px #000000;
   -webkit-box-shadow: 3px 3px 3px 3px #000000;
   box-shadow: 3px 3px 3px 3px #000000;
}

OK so now you can see what it looks like. As you can see the first value is the h-shadow, the second is the v-shadow, the third is the blur (optional), the fourth is the spread (optional), and the fifth is the color. Now what about this fifth part.

The fifth part

The fifth part is one that you may never use and it is one that you could find yourself using a lot. The fifth element is a inset. What this does is exactly as it sounds it puts the shadow inwards. Now below is how you add this to the property.

.yourclass {
   -moz-box-shadow: 3px 3px 3px 3px #000000 inset;
   -webkit-box-shadow: 3px 3px 3px 3px #000000 inset;
   box-shadow: 3px 3px 3px 3px #000000 inset;
}

If you would like to see examples and learn more about this I would recommend going over to CSS Tricks.

Spread and Share
]]> http://www.shanestrong.com/css/css3-box-shadow/feed 0 jQuery Corner Page Peel http://www.shanestrong.com/web-design/jquery-corner-page-peel http://www.shanestrong.com/web-design/jquery-corner-page-peel#comments Sat, 06 Feb 2010 08:39:50 +0000 Shane http://www.shanestrong.com/?p=1310 There are many different ways to make your RSS Icon jump out at people. Well why not have it peel at people. You have seen those ads that sites have in the upper right corner of there site that when you hover over them they just peel away. Well some people might think that must be flash at work or something that is so advanced I can never learn it. Well to let everyone know yes you can learn it and no it is not hard. I am sure that you could make a peel away corner with flash and I bet it would look good. But, I also bet that it would take a couple hours to create and then a few more to implement. Well with some jQuery and CSS you can create a peel away corner in about 20-30mins. All that you need to know for this is how to copy some code into your head and header area of your website. I am going to break down exactly what you need to do in 3 easy steps. If you would like to download the end product you can find it at the bottom of this tutorial.

Add Your jQuery Scripts

We are going to use Google’s AJAX Library to add our jQuery library to our header. You may ask why we would do this well including the jQuery library from a external source will make less stress on your server and we all know that Google’s servers can handle the stress.

<head>
//Google Hosted
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
//Your Script
<script type="text/javascript">
   jQuery(document).ready(function($) {
      $(".cornerpeel").hover(function() { //Hover Over
         $(".cornerpeel img , .message").stop()
	 .animate({ //Expand the Message and the Hover Image
	    width: '138px',
	    height: '138px'
	 }, 600);
      } , function() {
         $(".cornerpeel img").stop() //Hover Out Go Back To Original
	 .animate({
	    width: '50px',
	    height: '50px'
	 }, 200);
	 $(".message").stop() //Hover Out Go Back To Original
	 .animate({
            width: '50px',
	    height: '50px'
	 }, 180); //This should be a tad faster than the image because IE is known to glitch
      });
   });
</script>
</head>

Create Your Styles

These are your styles and can be changed up depending on where your image is and what size you want to start out with.

.cornerpeel {position: relative;}
.cornerpeel img {
  width: 50px; 
  height: 50px;
  z-index: 101;
  position: absolute;
  right: 0; 
  top: 0;
}
.cornerpeel .message {
  width: 50px; 
  height: 50px;
  position: absolute;
  z-index: 100;
  right: 0; 
  top: 0;
  background: #fffcf9 url(http://www.shanestrong.com/jQuery/cornerpeel/rss.jpg) no-repeat right top;
  text-indent: -9999px;
}

Create Your Corner Peice

This is were you create your hoverable corner piece. This will be placed somewhere in your header area or right inside your body tag.

<div class="cornerpeel">
   <a href="http://feeds.feedburner.com/ShaneStrong">
      <img src="http://www.shanestrong.com/jQuery/cornerpeel/corner_img.png" alt="" />
      <span class="message">Subscribe To My Feed</span>
   </a>
</div>

Your Finished

Well that was it, that is all that you need to create your self a corner peel. If you would like to see this in action you can download my script at the bottom. There is a ton of things that you can do with jQuery that can make your site seem more flashy without having to find a flash developer. jQuery is one of the fastest growing languages around. If you have any tutorials that you would like to publish on my site please go to my contact page.

jQuery Corner Peel: Corner Peel Trial

Download: jQuery Corner Peel (1262)

Website Design , Development, and SEO Marketing

If by chance you are in need of any web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Sponsors

Start saving on printing services today. Visit our website to learn more about booklet printing today.

Spread and Share
]]> http://www.shanestrong.com/web-design/jquery-corner-page-peel/feed 4