I’ve recently started using Amazon Web Services (AWS) to import large amounts of rich content into my weekend-warrior project, ThumbSticks.com. I have to say that I’m quite impressed with Amazon’s dedication to providing their product information in such a transparent and detailed manner. If you’re not familiar with AWS, here is a quick introduction and some useful code snippets to help you get started with AWS in your PHP environment. (more…)
Archive for the ‘Tutorials’ Category
Plug in to Amazon Web Services (AWS) using PHP
Wednesday, March 17th, 2010Create a Lightbox with jQuery and CSS
Monday, March 15th, 2010The “lightbox” is a unique and useful design tool when used properly. It allows designers to present information that is totally independent from the site theme, and it is especially useful when displaying information that is loaded via AJAX requests (often negating the need for additional post-backs on your pages). There are countless ways to implement lightbox functionality into your site, and almost every option I’ve ever seen is weighed down by extraneous functionality or useless transition animations. It’s quite easy to create your own lightboxes with minimal effort. This tutorial can serve as a quick and easy template to get you started. (more…)
IE Corner Inserts via jQuery
Thursday, January 28th, 2010I recently had a client whose design demanded rounded corners in a lot of different areas of their site. As I looked through the design documentation, the variety and color of these rounded widgets really started to add up. I quickly decided that pure CSS corners were the best choice for their design. Most users can utilize border-radius to apply the rounded effect without any overhead (the browser does the work), and the remaining users can be handled by a quick and easy bit of jQuery. (more…)
A Very Simple CSS Chat Bubble
Monday, September 14th, 2009Each time you implement a new design element into your site, there are a vast array of approaches you can take to achieve the same outcome. Often times, I feel that the most simple of solutions is the best one. When implementing the “user comments” feature into ThumbSticks.com, I decided to wrap each user comment in a sort of “chat bubble box,” much like you would see in a comic book story. I experimented with various solutions that gave me different amounts of flexibility and performance, but I eventually settled on a very simple solution that resulted in what I think is an elegant CSS chat bubble. (more…)
CSS Absolute Positioning
Monday, April 6th, 2009Absolute positioning is a very powerful CSS technique when used properly. Traditionally, when you use <div/> tags and the like, everything in your page design is generally stacked from top to bottom. Using absolute positioning gives you the freedom to place elements of your page just about anywhere you’d like. Here are some fundamentals of absolute positioning that can make your design appear more fluid, elegant, and easier to manage. (more…)
Pure CSS Image Hover
Monday, January 5th, 2009Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect. (more…)
Create a DHTML Tab Strip
Tuesday, November 18th, 2008Tab strips are commonplace throughout the web, and they’re utilized in a wide variety of ways, such as in site navigation or form wizards. Organizing links in a tabbed format can add quite a bit of style and functionality to your site, as many visitors are already familiar and comfortable with using tabs on other websites and even on other platforms such as their operating system. This tutorial shows you how to create a simple DHTML tab strip using HTML, CSS, and a small bit of JavaScript. (more…)
All About Table-less Column Design
Monday, October 13th, 2008There are a number of ways to create vertical columns in your XHTML design without using the <table/> tag and the horrendous amount of HTML that always seems to accompany it. Each method listed here is superior in various situations, so choose a good fit for your particular design. (more…)
Karate Corners: XHTML/CSS Rounded Corners
Monday, October 6th, 2008I’ve seen a lot of different ways to create round corners and boxes in web sites, and quite frankly I haven’t exactly fallen in love with any of them. A lot of the methods that I’ve seen use either (1) a table structure which I try to avoid at all costs, (2) too many nested <div> tags, (3) complex CSS, or (4) too many different images that have to be loaded all at once. (more…)