Ok, folks as you might notice on some of my clients’ sites I am a big fan of using jquery / ajax for rendering galleries of images. This is SUPER important nowadays so as to make them work on the all important APPLE DEVICES. If you are still using FLASH, then you need to work TWICE as hard to then create something that will render something close to your Flash creation for all of the iOS devices. SHEESH! Why do double the work! Just stop using Flash! Learn jquery to be able to do this! Ok so this is what I did on the home page. I wanted to add an OBVIOUS place for potential clients to see my portfolio… SO as I was considering adding this script, I realized that the site was too narrow… SO, I started adjusting the CSS first to see how wide the background element needed to expand, once I knew my measurements, I then just widened the swoopy gray area in photoshop to cover the width of the main element. The CSS across ALL of the pages took a bit longer AS USUAL! As there are always margins and padding here and there that you realize that don’t QUITE look right that you want to improve. Plus I added my favorites from CSS3: border-radius and box-shadow to a few of the elements like in the menu, and on the blog listing pages. Once all of that was done, I then started figuring out the sizing needed for the portfolio area on the home page. This turned out to be easier than I thought as I used a STRETCHY width element for the jquery. In this case I “cheated” with an iFrame, but it really doesn’t matter as there is no real text in this element anyway. The last thing I added was a absolutely positioned search tool in the upper left corner with a jquery live search element that I had used before. Anyways, I always love using this wordpress framework as it makes tweaking so fast and easy. All of the above only took a few hours of work this weekend.
Archive for the ‘CSS3’ Category
Latest Updates to this site on 6/26/2011
Monday, June 27th, 2011
CSS3 Animations now work in FireFox 5!
Thursday, June 23rd, 2011Read up more on the CSS3 animations on this page for FireFox 5.0! If you are viewing this page on Firefox 5.0 or Safari 4+ or the latest Chrome and I BELIEVE in Internet Explorer 9.0, then you’ll see the below animation effect…
Zen Cart CSS Buttons
Wednesday, May 4th, 2011Ok, maybe this will help someone else out as this seemed to be really hidden on the zen cart forum. Am building a new template for a client and as I typically do I copy the classic template file folder in the /includes/templates/ and proceed to custom build it. Ok, this time my goal was to use as few actual images as I could for the design and use CSS buttons only.
Ok, but I quickly ran into an issue of resizing. The coloring, shading, border inset/outset control is all pretty obvious in the CSS buttons stylesheet located in the CSS folder. But, trying to resize the header search button became quickly impossible. It just flat out wouldn’t budge!!! I tried width in ems, pixels and percentages and nothing worked. Looking in the Safari developer tool, element inspector, I see an inline element style of width:80px; no matter what I did.
I then proceeded to look at the tpl_search_header.php file located in the includes/templates/template_default/sideboxes/ folder to directly change or delete this 80px code, but alas, it was not there! In the CSS button section I only found a php function to create the button… No help there.
I then needed to learn how this button functioned in zen cart. Looked in includes/functions… No luck… Did a search for it directly with Apple’s spotlight tool and found WAY TOO MANY… Out of luck again. I needed to find out where it was built, and I remembered editing the HTML_output.php file a while back. It made sense it would be here as a great many functions exist in this file to actually show various HTML elements in zen cart without us having to create any… Especially those ones that you click to go into an ssl session.
Ok, so it was in this file that I found it. The function for creating the zen cart buttons was indeed here. Ok but what to edit? I looked for the width:80px and it couldn’t be found… Then looked for it with a space like this width: 80px and still nothing. Ok I then looked for just 80 and I found it!
Sooooo, I now found the section of code but what was I to do TO the code to give me total control via the stylesheet. I found a referenced $style variable that related to a concatenated section for the actual style=”" section of the button… Well, knowing that I wanted to completely control all aspects of the button from the stylesheet, I quite simply eliminated the $style variable from the concatenation by deleting the $style variable and the period just before it.
Now, I am able to completely control the style of the CSS based header search button in zen cart. And I found out that I am able to control various of the other submit buttons ad well. I really have no idea why the zen cart team decided to code this in this manner. Perhaps it is a remnant from the old OS commerce code? Perhaps they were trying to save the basic buttons coding from the average user? Most folks hate CSS, but I really love it and the complete control it gives you over the total design of the site. And especially now that css3 / html5 is out and the fact that everything on the iPad is html5 and css3 this is now suddenly a really big deal… Anyways, I hope this helps someone else wanting to build their own CSS based zen cart buttons. -Tom
The Man From Hollywood
Friday, August 20th, 2010More CSS fun! The Man From Hollywood. Again this is ALL DONE IN CSS3!!! I am starting to do less and less work in Photoshop and more work directly with CSS3! I love CSS3!
Anigma CSS3 GAME!
Sunday, August 15th, 2010Our Solar System in CSS3
Friday, August 13th, 2010Our solar system all done in CSS3! Wicked cool folks!
Our Solar System — An experiment with CSS3 border-radius, transforms & animations..
HTML5 / CSS3 Experiment for a Mail Signature in Apple Mail
Tuesday, July 6th, 2010Date: July 5th, 2010 by Tom Reitz
Top section is Best Viewed in HTML5 / CSS3
& (Apple Mail 3.6 running Mac OS X Leopard):
Looking at this closer, it seems WordPress is trying to take over my css a bit… I am sure I forgot to define something in the css… here is the original experiment.
A PNG screenshot of how it looks in HTML5 / CSS3
Without HTML5 / CSS3 coding:
(Gmail, Hotmail & Yahoo Interfaces)
Style CODE:
<div style="
-webkit-border-radius: 60px/30px;
-moz-border-radius: 60px/30px;
-khtml-border-radius: 60px/30px;
border-radius: 40px/25px;
border: solid 1px silver;
padding:10px;
width:220px;
text-align:center;
-webkit-box-shadow: silver 1px 1px 15px;
-moz-box-shadow: silver 1px 1px 15px;
-khtml-box-shadow: silver 1px 1px 15px;
box-shadow: silver 1px 1px 15px;
background: -webkit-gradient(linear, left top, right top, from(white), to(white), color-stop(.01, #00003f), color-stop(.10, silver), color-stop(.5, white), color-stop(.91, silver), color-stop(.99, #00004f));
background: -moz-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver));
background: -khtml-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver));
background: gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver));
padding-top:6px;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
">
<span style="
-webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
-moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
-khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
">
ENTIRE CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<center>
<h1>HTML5 / CSS3 Experiment for a Mail Signature in Apple Mail</h1>
<h3>Top section is Best Viewed in HTML5 / CSS3<br />& (Apple Mail 3.6 running Mac OS X Leopard):</h3>
<div style="-webkit-border-radius: 60px/30px; -moz-border-radius: 60px/30px; -khtml-border-radius: 60px/30px; border-radius: 40px/25px; border: solid 1px silver; padding:10px; width:220px; text-align:center; -webkit-box-shadow: silver 1px 1px 15px; -moz-box-shadow: silver 1px 1px 15px; -khtml-box-shadow: silver 1px 1px 15px; box-shadow: silver 1px 1px 15px; background: -webkit-gradient(linear, left top, right top, from(white), to(white), color-stop(.01, #00003f), color-stop(.10, silver), color-stop(.5, white), color-stop(.91, silver), color-stop(.99, #00004f)); background: -moz-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver)); background: -khtml-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver)); background: gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver)); padding-top:6px; -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));">
<a href="http://seo9oneone.com" target="_blank" style="text-decoration: none;" title="...specializing in online strategies, web development, e-commerce and search engine marketing..."><span style="font-size:26px; -webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;">
<span style="color: #d60636; ">SEO</span><span style="color: #384e80;">9</span><span style="color: #d60636;">one</span><span style="color: #384e80;">one</span><span style="color: #d60636;">.com</span></span></a><br />
<span style="-webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;">Tom Reitz</span><br />
<a href="http://seo9oneone.com/googlevoice" target="_blank" title="Click and I'll call you via Google Voice!" style="text-decoration: none;"><span style="-webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; color: #384e80;">407-588-<span style="color: #d60636;">SEO</span>9</span> </a>
<a href="http://www.facebook.com/pages/Windermere-FL/SEO9oneone/83836645036?ref=ts" target="_blank" title="SEO9oneone on Facebook!"><img src="http://seo9oneone.com/facebookicon.png" border=0></a> <a href="http://www.linkedin.com/in/thomasereitz" target="_blank" title="SEO9oneone on LinkedIn!"><img src="http://seo9oneone.com/linkedin-logo.png" border=0></a> <a href="http://www.youtube.com/user/seo9oneone" target="_blank" title="SEO9oneone on YouTube!"><img src="http://seo9oneone.com/youtube-button.png" border=0></a> <a href="http://www.twitter.com/seo9oneone" target="_blank" title="SEO9oneone on Twitter!"><img src="http://seo9oneone.com/twitter-button.png" border=0></a>
</div>
<br /><br /><br /><br /><br /><br /><hr />
<br />
<h3>Without HTML5 / CSS3 coding:<br />(Gmail, Hotmail & Yahoo Interfaces)</h3>
<div style="border: solid 1px silver; padding:10px; width:220px; text-align:center;">
<a href="http://seo9oneone.com" target="_blank" style="text-decoration: none;" title="...specializing in online strategies, web development, e-commerce and search engine marketing..."><span style="font-size:26px;">
<span style="color: #d60636; ">SEO</span><span style="color: #384e80;">9</span><span style="color: #d60636;">one</span><span style="color: #384e80;">one</span><span style="color: #d60636;">.com</span></span></a><br />
<span>Tom Reitz</span><br />
<a href="http://seo9oneone.com/googlevoice" target="_blank" title="Click and I'll call you via Google Voice!" style="text-decoration: none;"><span style="color: #384e80;">407-588-<span style="color: #d60636;">SEO</span>9</span> </a>
<a href="http://www.facebook.com/pages/Windermere-FL/SEO9oneone/83836645036?ref=ts" target="_blank" title="SEO9oneone on Facebook!"><img src="http://seo9oneone.com/facebookicon.png" border=0></a> <a href="http://www.linkedin.com/in/thomasereitz" target="_blank" title="SEO9oneone on LinkedIn!"><img src="http://seo9oneone.com/linkedin-logo.png" border=0></a> <a href="http://www.youtube.com/user/seo9oneone" target="_blank" title="SEO9oneone on YouTube!"><img src="http://seo9oneone.com/youtube-button.png" border=0></a> <a href="http://www.twitter.com/seo9oneone" target="_blank" title="SEO9oneone on Twitter!"><img src="http://seo9oneone.com/twitter-button.png" border=0></a>
</div>
</center>
</body>
</html>
