Example of 3D text (emboss) with drop shadow using CSS3 only

 

 

3dText

                                                         The effect in Firefox

 

CSS3 has some nice new properties and one of them is the text-shadow property. You can use it to add depth to your text and have an emboss effect. You can have several text-shadow properties on the same element which enables you to create some creative effects. Before CSS3, one had to use a paint program like Photoshop to add the 3D effect by using layers and adding a drop shadow. Before Photoshop I used a Photoshop plugin called Eye Candy from Alien Skin to add drop shadows with very little effort. We have come a long way to using CSS3.

The text-shadow property has several values. The first one is for the horizontal offset, the second for the vertical offset, the third for the blur radius and then the rgba values for the shadow’s color and opacity.

In this demo I decided to use a free web-font. A web-font is a font the browser downloads and uses to display any text whose declaration is set to use that font. I am using a free font called Calluna from Exljbris. Only the regular style is free. The other styles are commercial. The downloadable font is in the OpenType format (otf) which is supported by all the modern browsers, (IE9).

To create the 3D effect I gave the text 3 text shadows including the white one which is offset towards the top to give the text some depth.

I tried the page in FireFox 3.6, Google Chrome 8 and Safari 5. I did not like how Chrome displayed the drop shadows because Chrome gave them hard edges which make them look like they were cut off. See below. The above image is from Firefox and the drop shadow blends nicely with the background.

 

3dText Chrome

                                                The effect in Google Chrome

 

The html:

<!DOCTYPE html>
<html>
<head>
<!--
Sample by Abdu : jentel at hotmail.com
Description at /
-->

<title>3D text with dropshadow & web font using CSS3 only</title>
<meta charset=utf-8>
<style>
@font-face
{
font-family : "Calluna-Regular";
src : url("Calluna-Regular.otf")
format("opentype");
}
body { font-family : "Calluna-Regular", Helvetica, Arial;
background-color: rgb(210,210,210); }
header h1
{
font-size: 86px;
text-shadow:
0 -2px 3px rgba(255,255,255,1),
0 4px 2px rgba(0,0,0,.3),
0 8px 26px rgba(0,0,0,.5);
text-align: center;
color: rgb(50,50,50);
}
</style>

<body>
<header>
<h1>This is a Test</h1>
</header>
</body>
</html>


separator

Pingbacks & Trackbacks should not be visible in your blog

Sometimes I encounter blog posts which have a long list of pingbacks and trackbacks in their comment section. I am not sure if visitors find them useful but personally I wish the blog owners would keep these to themselves instead of making them public and “polluting” the comments section. Specially more useless when every blog post has pingbacks from the same sources. It seems for some blogging software this feature is on by default and the blog owner doesn’t know or doesn’t care to turn it off. When I came across these linkbacks I feel like it’s someone repeating themselves. It’s the same text over and over again. Maybe the blog owner wants to tell us about how many sites link to his site. Why does he think we really care about this? Usability… not so great.

When one goes to a web page they don’t see a long list of sites which link to the web page so why do some people think it’s OK to do this for blog posts? If I want to find which sites link to a web page, Google can provide this information.

separator

Some LinkedIn group owners need a slap for never taking an action on the their group’s join requests

 

LinkedIn

I have sent some requests to join some LinkedIn groups and they have been waiting for approval for weeks. I am going to announce that these group owners are being inconsiderate. If you are a group owner who doesn't bother to look at these join requests, why are you moderating these requests then? Make the group public or delegate the approval process to someone who does have some time. I bring this problem up because LinkedIn allows a certain number of join requests before they block you from more group join requests. So now I have this queue of requests waiting for these group owners' approval. If there wasn't this limitation of requests, I wouldn't have mind but now I am just going to delete some requests to open up the queue and some of these group owners deserve my wrath for wasting my time!

separator

Use a firewall which can intercept requests for connections & asks for user permission

In my previous post I mentioned I run a firewall which 'intercepts' every connection call to the outside and asks the user for permission to allow the connection to go through. The user can allow once or every time, block once or every time or isolate the app. I use Comoro firewall which is a free firewall which has these capabilities. The firewall allows me to find the programs which make Internet connections. There are programs which make connections to look for updates. These are valid requests. However if I have an app which has no business making any connections, I can decide what to do about it. So far I haven't experienced any rogue programs. Key loggers are popular in this category where they try to harvest sensitive information from a computer and send the information to the outside using an Internet connection. A good firewall would catch and block these types of malware.

I recommend Comoro Firewall. It's free and effective.

separator

Don’t create applications which are passive & silent during a problem

I am writing this post because of an annoying usability issue with TweetDeck. TweetDeck is a Twitter client I use on Windows machines and the iPad. On one of the computers I use, TweetDeck doesn't display anything from Twitter. I just get a never ending progress indicator in each Twitter column. I try to validate my credentials to confirm they are correct and the validation never finishes. I don't get any error messages. There be a connectivity issue but the application never times out. There's nothing in the event log. I reinstalled the app but no dice. So I decided not to spend more time troubleshooting this issue and just use another computer where TweetDeck works fine.

One day I came back to troubleshoot the issue and I decided to disable the firewall to see if it helps. TweetDeck worked. So the firewall was the problem. I run a firewall which asks for permission from any app which tries to connect to the outside. It seems I blocked TweetDeck by mistake. I removed it from the firewall's application blocked list.

If you develop software which depends on external services like a web service or API make sure your application displays a useful error message when something wrong happens or if the application doesn't receive data within a specific period of time. To test your app in such a situation, unplug the network cable or block the connection using the firewall and then make sure the application displays a proper message. A silent and passive application during a problem is a useless application. These application increase the number of incoming support issues for your company. An unnecessary big expense.

separator

Put form field error message next to the corresponding form element

It’s easier for the user to correlate an error message if the error message for a form element be placed next to the form element itself instead of somewhere else in the page. You can highlight the field by making it more prominent. For example by placing a red border around the field or the field having a red background.  Make sure the error message always shows above the fold. Either by scrolling the page to the error message or display a notification message at the top of the page notifying the user about the existence of any errors so they can look for it. Error messages which do not display in the viewable area can mislead the user.

Here’s an example of a page showing too many errors in a long list. Notice the errors box pushed the form below the fold. The problem here also is the inclusion of the full labels of the problematic fields. Some labels are very long causing the summary error box to look like an unorganized laundry list. Had the error message been placed next to the field, there wouldn’t be a need to include the label.

 

hubspot1

                                     See the form on the right side

 

hubspot2

             The error summary box is a long list which pushed the form down
separator

A ticket sales and distribution company limits available tickets on their site to coerce users to buy

A few months ago I decided to buy a couple tickets for a local show. So I go to the website of a well known ticket sales & distribution company to select and buy the tickets. They select the seats for you, probably at random, display where they are located in the seat map and you choose whether to buy them or try for another two seats. You can repeat the selections a few times. After about 3-4 times, the same seats started showing up. I didn’t like the fact their selections were that limited and I was skeptical. I knew they have more seats. They was several days before the show started and there was no news that they were getting sold out. I know some websites which sell products or services resort to all kinds of gimmicks to get people to buy.  They can know whether you are the same person who visited the site earlier either by using your browser’s cookie or maybe even by your ip address. (I remember few years ago when Amazon was doing variable pricing for the same products and was caught). So I decided to try something.

I have access to several computers connected to the net. So I use another computer to repeat the process above and guess what? The seats being offered to me this time are mostly different than the ones offered just a few minutes ago from computer #1. Oh.. those d-bags. So they DO have more seats but they are limiting your choices so you don’t spend too much time on the site and they get you to purchase tickets faster. On computer #2, they started showing another set of seats again. Then I repeated the process with a third computer and got even more selections of seats. In total I had access to 4 computers and from their total selections I choose the best seats available to me.

It is annoying that these companies resort to these tactics in their business instead of providing more options to the user.

separator

I am thinking of upgrading to BlogEngine 2.0 when it comes out but..

BlogEngine v2.0 RC came out a few days ago so the official version should be out very soon. This is a major version change and I checked quickly to find out what the big changes are and it seems they are mainly in the admin section which only I can see and which I hardly use. So perhaps the upgrade is not worth it for me specially it was a pain converting  the WordPress template to BlogEngine’s  format. I ended up messing with BE’s code which meant I wouldn’t be able to upgrade BE again without touching the code again. Not a fun job.  I explained this in an earlier post. However this might be a chance for me to clean up the code.

I am getting emails about posted comments which are not showing up. Ah! Akismet working beautifully killing the comment spam.

Finally.. sorry for losing all the comments. I can’t believe I did that.

separator

Don’t put the credit card number field before the credit card type field in the order form

I have filled tens of order forms at eCommerce sites so usually I don’t scan the form before filling it. The other day I came across an order form which caused a small usability issue. I started filling the form starting from the usual. First name.. last name.. street address..etc and then I entered my American Express card number, my primary credit card, in the card number field. The next field was the credit card type drop down. It contained two entries for Visa and Master Card. They don’t accept American Express. So I had to go back, delete the 15 digit number I just entered & entered a Visa card number. I wondered what benefit they get from putting the card # before the card type. I can’t think of any. If you do please let me know.

ccbefore

separator

Let me download Silverlight plugin even if it’s already installed

One thing which bugs me on Microsoft’s site is that it doesn’t allow users to download the Silverlight plugin on demand. The Silverlight installer webpage checks to see if you have the plugin already installed and if you do, it doesn’t supply you with the download link. Is it trying to be too helpful to the point it’s actually annoying and treating users as idiots!?  I noticed Microsoft does this a lot. It acts as if it knows more than what the user wants for themselves. Maybe I want to download it so I can install it on a non networked computer? or maybe I want to download it just for the pleasure of downloading a file called silverlight.exe!

So I disable the plugin  in Firefox, refresh the page, the link shows up, I download it and save it. Then I re-enable the plugin. Why do I have to go through this process? At least it’s faster than doing a time consuming search to see if some download link is hidden somewhere deep in Microsoft’s site.

How about putting a text informing the user the plugin is already installed and if the user still wants to download it, provide a download link.

I have Flash installed and when I go to Adobe’s Get Flash page, it doesn’t tell me “You already have it installed.. stupid!”. It allows me to download it. Thank you Adobe.

The other confusing usability issue is all the instructions about downloading and installing Silverlight.exe. Some users might miss what “You are ready to use Microsoft Silverlight” really means. It could also mean that your system is ready to download and install Silverlight, as in your system has the necessary requirements installed for you to proceed to get and use Silverlight, instead of “You’re done. You don’t need to download and install Silverlight. You can skip the rest of this page” type of understanding.

separator