CSS3 Box Shadow Effect

Posted by on Jun 20, 2013 in Tutorials

CSS3 Box Shadow Effect

CSS3 has been around for a few years now, but I can remember a time when many of the cool things it can do, had to be done graphically. Some things, like a flexible gradient background, couldn’t be done at all or could only be done with the help of JavaScript. The shadow effects are among the easiest to use among the new tools in CSS3. Surprisingly, you don’t need separate variations for Mozilla and Webkit (Firefox and Safari/Chrome). Unsurpisingly, this feature isn’t supported by IE8. I didn’t have a copy of IE 9 handy, so I wasn’t able to test with that, but I understand that box-shadow is supported. I’m less sure about the inset variation, but who really cares? We’re talking about IE. The main trick to remember is that if you want the inset shadow effect, you need to apply it to a div instead of an image, and that div needs to have your image as a background. One thing to keep in mind before dedicating yourself to this effect is that if you want your images to be printable or if you need to have them linked (and a transparent gif or png just won’t do for some reason), this will not work for you. Because these conditions rarely apply to anybody, you should be fine. CSS <style type=”text/css”> .img-shadow { position: relative; max-width: 100%; float: left; border:8px solid #999; } .img-shadow::before { content: “”; position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7); -moz-box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7); -webkit-box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7); } .img-shadow img { float: left; } </style> HTML <a href=”#” class=”img-shadow”><img src=”http://champlai.wwwssr14.supercp.com/champlainwebsites.com//wp-content/uploads/2013/06/train_wheels.jpg” alt=””...

Read More »

Champlain Host

Posted by on Jun 11, 2013 in Portfolio

Champlain Host

Champlain Host is the hosting side of my business. This website runs on the WHMCS Content Management Sysytemd designed specifically for hosting ecommerce websites. The CMS is on the clunky side when compare with WordPress, but the ecommerce part of it is rock solid. I have customized the template and separated the http from the https parts to optimize it for search and for Google Analytics.

Read More »

.htaccess – Changing .php to .html and Getting Rid of www

Posted by on Jun 5, 2013 in Tutorials

This is a good one to use if you’re building your website from scratch. This is not a good one to use with a Content Management System (CMS) like Joomla or WordPress. I know Joomla has its own core htaccess file as well as third party extensions like JoomSEF. I would imagine WordPress has similar options. That being said, if you’re building a PHP site, this is a great way to hide the fact that this a PHP site and possibly causing hackers to overlook your site. There’s no SEO advantage to having a .html extension over a .php extension. The biggest drawback I can see to using this part of the script is if you commonly pass variable through your URLs (ie. filename.php?id=420&action=token). If that is the situation you are in, then you can simply strip that part out of the script. The second feature of this script is eliminating the “www.” option to get to your site. When someone types in http://www.yoursite.com, it will automatically change to http://yoursite.com. This part of the script is important to SEO because it concentrates all of your indexed pages into a single domain, making it more relevant in the eyes of Google. It also makes it much easier to track with Google Analytics and helps to eliminate “self referrals” (when your own website shows up in Analytics as a referring site). The Script RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} !^northernseo.com$ [NC] RewriteRule ^(.*)$ http://northernseo.com/$1 [L,R=301] Options +FollowSymlinks RewriteRule ^(.*)\.html$ $1.php [nc] UPDATE This one is much better. It will take any page on your site and serve it without the www. The previous example would redirect all www. requests to the home page. If you have several pages indexed in any of the major search engines, that would be quite disruptive. This new script is seamless. RewriteEngine On RewriteBase / RewriteCond ${HTTP_HOST} . RewriteCond %{HTTP_HOST} !^northernseo\.com RewriteRule (.*)$ http://northernseo.com/$1...

Read More »