I spent a good bit of time attempting to explain to him that while people couldn’t right-click, they could still easily rip the photos using the Print Screen button or using any screen capture tool. My suggestion was to simply watermark the images, however he was insistent on having no context-menus show up on right-click. Ultimately, I ended up using a bit of jQuery to disable all context-menus in any images on the site, which allowed him to use the more compatible JS slideshows:

That should do the trick! While I still don’t think it’s the best solution, if you run into the need to disable context menus for any element, feel free to use the snippet above (replace the img with anything else).

Edit: Compatibility and Demo

Someone mentioned it doesn’t work in Firefox in the comments – I’ve tested the code in the latest beta build of Chrome, IE8, Firefox 3.6.8, Safari and Opera – it does work in all of these browsers, at least in my Windows 7 x64 build.

Feel free to view the source of the demo to see how the exact implementation. Also, keep in mind that this is certainly not a fool-proof solution (not even a great one) at preventing image theft. It’s useful in deterring the subset of people who are less tech-savvy and are likely to give up after being unable to right-click.

Edit 2: I am not suggesting this!

A number of comments make the assumption that I am recommending this technique for preventing image theft. Let me be clear: I am not endorsing this technique for that purpose. There are many ways around it and I made that clear to my client.

Since my client, however, was insistent on specifically disabling right-click for images, the above is the method I used. It was somewhat difficult finding this information online so I decided to share it with others here on my blog. It is certainly not the best solution (not even a good one) for preventing image theft, in my opinion a watermark works much better for that. It may be useful for you in some circumstances, so use the knowledge however you’d like.

• Simple Threaded Comments with jCollapsible (new jQuery Plugin)
• Quick SEO Tip: Set Preferred Domain in Google Webmaster Tools
• iPhone Style Radio and Checkbox Switches using jQuery and CSS

Download

The zip file below contains the CSS and HTML to create all of the elements in the above example, as well as the image file used.

The Code

To achieve the shadow and lighting effects we’re going for, I’m using wrapping the actual link text in <span> tags. Some might think this is tedious or extra work but in my opinion the results are worth the effort. You could also just write 1 line of JQuery code to automatically add the <span> tags to your links, making life even easier.

HTML

The only things required are the button class and the span tag inside the anchor. Change the color to whatever you set in the CSS or leave it blank to use the default color.

CSS

The CSS is a bit more intense – it makes use of several CSS3 properties including box shadows, text shadows and background gradients:

Improving Compatibility

While the buttons work perfectly in the latest versions of Chrome, Safari and Firefox, any other browser will have difficulty with the CSS3 gradient property, which means the hover and active states of the button are hard to tell apart. To fix this, we can add a fallback background image that is shown only to browsers that don’t support the required CSS3 properties, like such:

I’ve included the button.png gradient image in the downloadable zip file so feel free to use that if you’d like.

Taking it Further

I’ve seen the articles by Zurb on CSS3 buttons, however I thought I’d try taking a slightly different approach in mine. I also like the way these behave on the active and hover states better than the Zurb examples. While I like the way these buttons look in most browsers, they still look a little weird in IE, as the top-border renders as a solid white bar. The next step will be to explore options that will allow it to degrade even more gracefully in older browsers, perhaps using another image overlay for the top border itself.

Feedback is a must so let me know what you think! As always, follow me on Twitter and subscribe to the RSS feed for more posts like this!

• Super Simple CSS Buttons
• Slick Animated Menus Using Only CSS3
• How to Create Realistic Buttons in Photoshop

So one thing is clear: you want/need your own website. But how do you go about making one? Where do you even start? Whether it’s for your business, personal blog or any obscure reason, understanding how the web works and establishing an online presence is crucial in today’s high-tech world.

Understanding the Web and How Websites Work

According to Wikipedia, a website can be defined as a “collection of related web pages, images, videos or other digital assets that are addressed relative to a common Uniform Resource Locator (URL).” Simply put, it’s a collection of internet-accessible files stored somewhere and identified by an URL/address. Let’s take a look at some more definitions first:

• HTML – HyperText Markup Language, the name of the syntax/code used to create web page files (usually ending in .html)
• Host – A host makes your files accessible on the web by storing your files on a server/computer and providing a persistent internet connection
• Web Server – The actual machine or piece of hardware where your files are stored (usually by your host)
• IP Address – The numerical address of your Web Server; All computers connected to the internet have an IP address, even yours
• Domain Name – The actual address of the website, ie www.mydomain.com
• Registrar – The company that has permission from ICANN to sell domain names, like GoDaddy
• DNS – Domain Name Servers, used to connect a domain name to a host/server

Now that we have a basic understand of the terms involved, let’s take a look at how they are connected. A website is a collection of HTML files and digital assets (images, scripts, videos, etc.) stored on a web server (provided by a host) that makes it accessible by anyone via a persistent internet connection. How do you find that website? Using a domain name, which is the online address of your website. The domain name is purchased from a domain registrar and before it can be used, it must point to the correct domain name servers that correctly directs traffic to your web server’s IP address. It may sound a bit convoluted at first but thinking about it in simpler terms might help to better grasp the concept:

In the above diagram, the green arrow represents the request you make when you enter a URL into your browser and the blue arrow represents the response sent back. What’s important to note is that many hosts offer all of these services, so from one server you can get hosting (web server access) for your files and complete domain name setup.

Further Reading:

1. Wikipedia Article on Websites
2. HowStuffWorks: How Web Pages Work
3. How Websites Work by Quackit

Creating Your First Website

Now that you have an understanding of how websites work, it’s time to create your first web page. The below steps will take you through the entire process, from picking a domain name to uploading your files.

1. Picking the Right Host

This can be a bit complicated depending on your needs but for nearly all starters, a simple shared hosting plan is enough to host a basic website. I suggest Media Temple’s Grid Service to most of my clients and Host Gator to those feeling a little cheaper. Both providers have been around for a long time and are fairly consistent in their services.

2. Getting a Domain Name

There are many providers that offer domain names for a variety of prices. In reality, they are all resellers for ICANN and whoever sells the most can usually offer the cheapest prices. Personally I use GoDaddy because they are one of the cheapest (use CHRIS3 coupon during checkout for $7.95 domains) but their website feels a bit spammy. Throughout the entire purchasing process, they’ll suggest purchasing a million of their other services (including hosting) but I would personally advise against those.

3. Configuring Your DNS

When you register for your domain name, you’re given the option to edit it’s DNS information. If you skip this, you can find it (at least in GoDaddy) under Manage Domains by checking the relevant domain name and selecting Set Nameservers from the top menu. Enter the addresses of the DNS servers your host provided when you signed up with them to let GoDaddy know where to send visitors when they enter your URL.

4. Creating a Basic Web Page

As I mentioned earlier, HTML provides the backbone for web pages. In fact, you can right-click on any website and click View Source to see the HTML code that is powering the site. While it may look daunting at first, HTML is not really that complex and can be learned within a few days with some patience. On your desktop, create a blank file and call it index.html, then enter the following HTML into it:

The above code will produce this, a simple white page with the words ‘Hello Word’ written on it. HTML is all about tags that must be opened and closed. Every page should have a head section with a proper title, this is the text that is visible in the title bar of your browser. The body section is where any content you want shown on the website itself should go – in this example we have a simple paragraph (<p>) with that contains the ‘Hello World’ statement. Also note that each tag must be closed properly and in the correct order.

5. Upload and Sit Back

Now that you have your first web page ready, you need to get it online by uploading the file to your web server. This is done using an FTP, or File Transfer Protocol, program like FileZilla (OS-independent) or WinSCP (Windows only). When you signed up for your host, you should have received an e-mail that contains an FTP address, usually ftp.mydomain.com, and some login credentials. Start the FTP program, enter your credentials and transfer the index.html file from your computer to the public_html folder (or sometimes www) on your web server.

Congratulations! Your Website is Now Online

If you have properly configured your host, purchased a domain name and set your DNS information, entering your URL into a browser should load up your Hello World page.

Make it Better With Open Source Software

The example above is too simple for any practical use and chances are, you want something that looks nice and has more functionality. While I would definitely recommend learning as much about building websites as you can first, there are a few ways to get a nice website up very quickly and with limited knowledge. Open source software makes this possible, there are literally hundreds of blogging platforms and content management systems that you can install to have a very complete website running in minutes.

Most of these scripts require the minimum of PHP and MySQL, both of are included in 99% of shared hosting services. Create a database, upload the script and point your browser to the install file, the rest is taken care of automatically. The best part is that open source software is completely free to use, so definitely check it out.

A Few Open Source Options:

1. WordPress Blogging Software
2. phpBB Forum Software
3. FrogCMS Content Management System

Conclusion

This article is meant to be a very basic introduction into the very big world of web development. It’s meant for my friends who have always expressed interest in creating a website but don’t have the time to invest in learning to make one. Feedback is appreciated and comments are always welcome!

Also remember to subscribe to the RSS Feed and follow @ThinkDevGrow on Twitter!

• Creating the Perfect CSS3 Buttons
• Best Bet CSS Practices
• Quick and Simple PHP Honey Pot Spam Prevention

Step 1 Prepare the Canvas

Create a new Photoshop document about 600px wide and 300px high, that should give us plenty of space to work in. Fill the background with a light grey color (I used #eeeeee) and apply the Noise filter (Filter -> Noise -> Add Noise) with the following settings:

Step 2 Create the Base Shape

Create a white rounded rectangle (hot key: U) with a radius of 3px and with Anti-alias turned on. I made mine 150px by 40px but any size will do. Make sure the button itself is white (#FFFFFF) as that will help when it comes to applying effects in the next step.

Step 3 Apply Layer Effects

This step is really where the button gets it’s 3D feel from. We’ll be applying a number of layer effects:

To summarize, we are applying:

1. Drop Shadow – #000000, Normal blend mode, 15% Opacity, Angle: 120, Distance: 2, Spread: 0, Size: 2
2. Inner Shadow – #FFFFFF, Multiply blend mode, 30% Opacity, Angle: 120, Distance: 2, Spread: 0, Size: 2
3. Inner Glow – #000000, Normal blend mode, 40% Opacity, Choke: 100%, Size: 1
4. Bevel and Emboss – Style: Inner Bevel, Direction: Up, SIze: 2, Soften: 2, Angle: 120, Altitude: 30, Anti-aliased, Highlight Mode: Hard Mix, Highlight Color: #FFFFFF, Highlight Opacity: 50%, Shadow Mode: Multiply, Shadow Color: #000000, Shadow Opacity: 35%
5. Color Overlay – Mode: Linear Burn, Color: #b6f27a (you could use another light color instead)
6. Gradient Overlay – Blend mode: Luminosity, Opacity: 25%, Gradient: Black to white (left to right)

The above settings should produce a 3D-looking button effect. Applying both gradient and color overlays allows us to easily change the color of the button – simply change the color overlay until you’re satisfied with the color of the button.

Step 4 Add Text

Depending on whether or not you chose a light or dark color overlay, your text will have to be either black or white. For light backgrounds use black and for dark backgrounds, use black text color. I used the Gotham Bold font with uppercase letters. I cranked the layer fill opacity down to 75% and applied the Bevel and Emboss style with the following settings:

Step 5 Create Hover and Active States

To create the hover state, I simply change the Color Overlay value to something a little lighter and punchier – in this case #ccff84. As for the active state, I change a few settings on both the text and the button itself.

Active Button:

The button itself has the gradient and bevel reversed, a different color overlay and a inner shadow among other things. The exact values are:

1. Drop Shadow – #FFFFFF, 50% Opacity, Distance: 2, Size: 2
2. Inner Shadow – #000000, 30% Opacity, Angle: -60, Distance: 2, Size: 2
3. Inner Glow – Same as default and hover states
4. Bevel and Emboss – Change Direction from Up to Down, Change Highlight Opacity to 25%
5. Color Overlay – I set mine to #7ab91f
6. Gradient Overlay – Reverse gradient and set to 45% Opacity

Here are the same settings in Photoshop:

Active Text:

For the text, I changed the color to white (#FFFFFF) and lowered it’s fill opacity to 85%. I also moved the actual text down by a pixel, which gives it the feeling of being pressed. Lastly, I applied a Bevel and Emboss layer effect with the following settings:

Final Results

As you can see, I also made some darker colored buttons. For the text on those, I used the same settings as the Active state of the lighter buttons, with the only difference being the Fill Opacity was turned up to 90% instead of 85%.

Download

The complete PSD is available under the Creative Commons License, feel free to download and share as you please:

Conclusion

This is my first real Photoshop tutorial. Were the screenshots helpful? Did I cover everything needed to reproduce the desired effect? As always, feedback is highly appreciated.

Also, subscribe to the RSS feed and follow us on Twitter if you’re not already, there’s going to be a giveaway soon you don’t want to miss!

• Creating the Perfect CSS3 Buttons
• Super Simple CSS Buttons
• iPhone Style Radio and Checkbox Switches using jQuery and CSS

A honey pot trap involves creating a form with an extra field that is hidden to human visitors but readable by robots. The robot fills out the invisible field and submits the form, leaving you to simply ignore their spammy submission or blacklist their IP. It’s a very simple concept that can be implemented in a few minutes and it just works – add them to your contact and submission forms to help reduce spam. I’ve used them extensively in my last few projects, I’ve found it to be well worth the small time investment.

Contact Form Example

Here is an example of a simple contact form that uses the honey pot spam prevention method:

The HTML:

The PHP:

The CSS:

In the above example link, I added some optional CSS to make it look a little nicer. Also, you’ll notice the actual e-mail form doesn’t work, as the to e-mail address is a fake one. The contact form part is just to illustrate the honey pot, the important thing to notice is that the last text field is hidden using CSS (the entire paragraph) and that if text is entered in the field, the entire form fails.

Conclusion

This concept is certainly not my own and in fact, there is even an entire project dedicated to catching spammers using dummy forms and blacklisting their IP addresses (rightfully called Project Honey Pot). Again thanks to Aaron for reminding me about this technique, I’ve been meaning to do a write up on it for a while now. This post is also thanks to Forrst, I’m quite pleasantly surprised at the amount of interesting information I’m finding there.

• Simple Threaded Comments with jCollapsible (new jQuery Plugin)
• Best Bet CSS Practices
• The Complete Guide to Creating Your First Website

Creating a Sitemap

A sitemap is simply a listing of all the important pages of your website. It’s a directory that can be easily and quickly understood by both search engines and visitors who may be lost. Your sitemap can be a simple page on your website that lists all of the inner pages, but ideally you should use an XML sitemap, as it is preferred by most search engines. The structure of your XML sitemap is simple:

The above example indexes two pages from my site, a blog post and the main article homepage. Obviously this method can be time consuming if you have a lot of pages, and this is the perfect reason to use services like MakeASitemap.com or the XML Sitemap Generator to automatically index your site. If you’re running WordPress, I highly recommend the Google XML Sitemaps plugin, which automates sitemap creation for you blog. If you’ve manually created the file, save it in the root of your site.

Submitting Your Sitemap

After you’ve created your sitemap, submitting it to search engines is a great way to help them identify which pages on your site are worth crawling, how frequently they should be crawled and their overall search priority. A good sitemap can help bring traffic to your site by essentially providing search engines with a guideline to correctly index and rank your pages.

Places to submit your XML sitemap:

• Google Webmaster Tools
• Yahoo! Site Explorer
• Bing Webmaster Tools

You will have to login and verify you own the site in order to submit a sitemap, however it’s well worth the time.

Conclusion

If you haven’t submitted your sitemap, do so to help search engines better index and rank your pages. If you’re using WordPress, be sure to check out that Google XML Sitemaps plugin, it can make life a heck of a lot easier.

If you have any other SEO tips, please leave them in the comments. And as always, subscribe to the RSS feed if you haven’t already and follow us on Twitter!

• Quick SEO Tip: Set Preferred Domain in Google Webmaster Tools

The plugin has been tested (and works fine) on Firefox 3, Chrome 5, IE7+, Safari 4 and Opera 10. It should work on older browsers too though the CSS may need to be fiddled with.

Example

This page actually has the plugin enabled – you can see it in action on the following list or in the comments section!

• Test Parent
  • Test Child
  • Test Child 2
• Test Parent 2 (childless)
• Test Parent 3
  • Test Child
    • Child Level 3
  • Test Child 2

Download

You can download the full source, minified version or view the example online.

Usage Instructions

SliderNav is super easy to use, but first you have to load JQuery, the plugin and the relevant CSS file in order to use it:

Simple enough – just include JQuery (1.3.2 and up), the jCollapsible file and then call the function with your settings.

Customize the Icon or Use Images Instead

While I did try to keep the plugin lightweight, I also wanted to make it somewhat extensible by adding a few different options, including:

• defaulthide – hide all children by default (default: true)
• symbolhide – symbol to hide child elements (default: -)
• symbolshow – symbol to show child elements (default: +)
• imagehide – image to hide child elements (default: null)
• imageshow – image to show child elements (default: null)
• xoffset – amount pixels to move symbol/image horizontally (default: -15)
• yoffset – amount pixels to move symbol/image vertically (default: 0)

Please note that the image values are null by default (using symbol instead) and the offset values are there to fine-tune the location of the image/symbol.

The Code

For those who are curious, here is the source for the code:

I wasn’t exaggerating when I said this plugin was simple! It first few lines initialize the plugin/function and set the default values. The each function creates the actual expand/collapse icons and the last function (click) just toggles the child elements.

Final Thoughts

This plugin actually comes from a function I wrote for one of my personal projects, I just thought some of you guys may find it useful so I’ve wrapped it up as a plugin. If you do use it (or like it), please leave some feedback, good or bad – it’s highly appreciated and helps me produce better work.

As always, subscribe to the feed if you haven’t and follow me on Twitter!

• Griddy: Simple Grid Overlay Plugin for jQuery
• SliderNav: iPhone Style Contact Lists Using jQuery and CSS
• Sharebar WordPress Plugin

Demo

Download

The zip file below contains the CSS and HTML to create all of the elements in the above example, as well as the image file used.

Example 1

This is probably the more practical example, as it uses the standard/conventional menu markup that you are probably already using. Applying it only requires adding the necessary class to your UL/OL element.

The CSS for Example 1 is as follows:

The code is pretty self-explanatory but the key part to make note of are the transition properties applied to the .nav a selector – they produce the animation effect on CSS3 compatible browsers. The first value is which effect the transition animation should apply to and in our example, it’s set to all (which will animate any and all changes possible). The second is the duration of the animation, which in this case is 200 milliseconds. The third is whether you want the animation to ease-in, ease-out or a combination of both – ease-in-out. Feel free to play with these settings as well as the actual changes in the element, including padding, border widths, height, etc. to get a feel of how the transition property works.

Example 2

While this animation arguably looks cooler, it requires a bit more effort when we’re not using Javascript. Here is the HTML for example 2:

The way it works is that two blocks are created, the first being the text in the strong element and the second being the em element. The elements are stacked on top of each other with only one being visible at any given time (the other is hidden as the parent element has a fixed height and overflow set to hidden). The transition property is applied to both objects and on mouseover, both objects shift up, producing the desired effect.

The CSS for Example 2:

Browser Compatibility

The examples only work on browsers that support the CSS3 transition property, which right now include Safari, Chrome and Firefox 3.7. I believe the latest build of Opera should support it as well, though I haven’t tested it yet. For all other browsers, they will degrade to standard CSS rollovers.

Final Remarks

This tutorial is meant to be more instructional than practical. If I were attempting to produce the effect from the second example in the real world, chances are I would probably use JQuery to do it. If you have any feedback on this technique, please leave a comment!

And as usual, please subscribe to the RSS feed if you haven’t yet and follow us on Twitter!

• Super Simple CSS Buttons
• Creating the Perfect CSS3 Buttons
• iPhone Style Radio and Checkbox Switches using jQuery and CSS

Examples

Download

The zip file below contains the CSS and HTML to create all of the elements in the above example, as well as the image file used.

The HTML

I wanted to keep it dead simple to use, enough so that a single class could be added to any element to create a button. The HTML I used in the example is as follows:

The CSS

In order to add a subtle gradient effect, I decided to use a single image file. If you really want, you can leave that out and the buttons should still work fine. To give you an idea of how it can be customized, I created styles for 7 additional colors and 3 different sizes.

The CSS is pretty self-explanatory, however an interesting point is that I change the padding in the active state (.button:active) while shifting the element up by 1 pixel – this creates a pseudo-3D effect of physically pushing down on it.

Compatibility and Final Remarks

While the buttons themselves do work on all major browsers (FF, Safari, Opera, Chrome, IE7+), certain effects may not be available on all browsers. For instance, IE and Opera will not render rounded corners.

Play with it and let me know what you guys think! I’m sure most of you designers already have your own button code – if you’d like to share it, please post it in the comments (directly or as a link) so the other readers can check it out!

Also, if you haven’t already, please consider subscribing to the RSS feed or following us on Twitter.

• Creating the Perfect CSS3 Buttons
• How to Create Realistic Buttons in Photoshop
• Slick Animated Menus Using Only CSS3

Updated May 25: I’ve just added a new option that displays arrows above and below the SliderNav object. This is used to navigate longer sections for users that do not have a mouse wheel (or those who are on a mobile browser).

SliderNav is a JQuery plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It is made mainly for alphabetical listings but can be used with anything, though longer words can look a bit awkward. The plugin automatically adds the navigation and sets the height for the object based on how tall the navigation is, in order to make sure users have access to the entire list. I also used the overflow: auto; property for the actual content so you can use your mousewheel to scroll through the content as well.

The plugin has been tested (and works fine) on Firefox 3, Chrome 5, IE7, Safari 4 and Opera 10.

Download

You can download the full source, minified version, css file, or view the example online.

Usage Instructions

SliderNav is super easy to use, but first you have to load JQuery, the plugin and the relevant CSS file in order to use it:

After you’ve done that, create the section content in HTML using the following structure (you can name your element anything):

Once you’ve set the HTML, it’s simply a matter of calling the sliderNav function for the element you’ve just created:

Custom Options

The first of the configurations is height – set this to a pixel value if you wish to override the automatic detection based on the vertical navigation (you may need to change the min-height in the CSS too). Also by default, the plugin will generate an alphabetical navigation that uses all 26 letters of the English alphabet, however you can also use custom items using the following code:

You can also set arrows to true (default) or false, which displays arrows above and below the slider object to allow scrolling longer sections. Click on an arrow will scroll the object by it’s height – I used this method to keep code to the minimum, as anything smoother/nicer-looking required a lot more code. The last customizable option is debug, which can either be true or false. This adds a little bit of text on the bottom of the slider that shows how many pixels the current offset is (was useful during early development, probably not anymore).

Possible Use Cases

I believe this navigation can be useful in certain circumstances, mainly where you’re trying to show a lot of information that has been organized alphabetically (or by date) in a small area. For instance, it could be used to create a WordPress widget that lists all posts alphabetically or better yet, a widget for complete archives categorized by date. I’m not sure how much better it would be than traditional means of navigation but it’s certainly worth trying out.

Conclusion

As usual, please leave any feedback if you have it. I’m still very new to the JQuery plugin scene so there may be bugs or mistakes – if you find one, please mention it in the comments.

If you haven’t yet, please subscribe to the RSS feed and follow us on Twitter for more plugins and other useful bits!

• iPhone Style Radio and Checkbox Switches using jQuery and CSS
• Simple Threaded Comments with jCollapsible (new jQuery Plugin)
• Quick Tip: Preventing Right-Click Context Menu with jQuery